vue知识点面试题

四、vue.js 核心知识点高频试题一

4.1 对于Vue是一套渐进式框架的理解

问题一：vue.js的两个核心是什么？

1、数据驱动，也叫双向数据绑定。

      Vue.js数据观测原理在技术实现上，利用的是ES5Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制。核心是VM，即ViewModel，保证数据和视图的一致性。

2、组件系统。

.vue组件的核心选项:

1、模板（template）：模板声明了数据和最终展现给用户的DOM之间的映射关系。

2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状态。

3、接受的外部参数(props)：组件之间通过参数来进行数据的传递和共享。

4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。

5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，最新2.0版本对于生命周期函数名称改动很大。

6、私有资源（assets）：Vue.js当中将用户自定义的指令、过滤器、组件等统称为资源。一个组件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

等等。

 

问题二：对于 Vue 是一套 构建用户界面 的 渐进式框架 的理解

渐进式代表的含义是：没有多做职责之外的事。

vue.js 只提供了 vue-cli 生态中最核心的 组件系统 和  双向数据绑定。

像vuex、vue-router 都属于围绕 vue.js 开发的库。

比如说，你要使用Angular，必须接受以下东西：

1. 必须使用它的模块机制
2. 必须使用它的依赖注入-
3. 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰

比如说，你要使用React，你必须理解：

1. 函数式编程的理念，
2. 需要知道什么是副作用，
3. 什么是纯函数，
4. 如何隔离副作用
5. 它的侵入性看似没有Angular那么强，主要因为它是软性侵入。

Vue与React、Angular的不同是，但它是渐进的：

1. 你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；
2. 也可以整个用它全家桶开发，当Angular用；
3. 还可以用它的视图，搭配你自己设计的整个下层用。
4. 你可以在底层数据逻辑的地方用OO和设计模式的那套理念，
5. 也可以函数式，都可以，它只是个轻量视图而已，只做了最核心的东西。

4.2 请说出vue几种常用的指令

问题一：请说出vue几种常用的指令

1. v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
2. v-show：根据表达式之真假值，切换元素的 display CSS 属性。
3. v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。
4. v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
5. v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。
6. v-model：实现表单输入和应用状态之间的双向绑定
7. v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
8. v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

4.3 请问 v-if 和 v-show 有什么区别?

问题一：请问 v-if 和 v-show 有什么区别

共同点：v-if 和  v-show 都是动态显示DOM元素。

区别：

1、编译过程：

     v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

     v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS 属性display。

2、编译条件：

     v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。

     v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

3、性能消耗：

     v-if有更高的切换消耗。v-show有更高的初始渲染消耗。

4、应用场景：

     v-if适合运行时条件很少改变时使用。v-show适合频繁切换。

4.4 vue常用的修饰符

问题一：vue常用的修饰符

v-on 指令常用修饰符：

1. .stop - 调用 event.stopPropagation()，禁止事件冒泡。
2. .prevent - 调用 event.preventDefault()，阻止事件默认行为。
3. .capture - 添加事件侦听器时使用 capture 模式。
4. .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
5. .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
6. .native - 监听组件根元素的原生事件。
7. .once - 只触发一次回调。
8. .left - (2.2.0) 只当点击鼠标左键时触发。
9. .right - (2.2.0) 只当点击鼠标右键时触发。
10. .middle - (2.2.0) 只当点击鼠标中键时触发。
11. .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

注意： 如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用`·.native修饰符了，如：

//使用示例：

<el-input

v-model="inputName"

placeholder="搜索你的文件"

@keyup.enter.native="searchFile(params)"

></el-input>

v-bind 指令常用修饰符：

1. .prop - 被用于绑定 DOM 属性 (property)。(差别在哪里？)
2. .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
3. .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

v-model 指令常用修饰符：

1. .lazy - 取代 input 监听 change 事件
2. .number - 输入字符串转为数字
3. .trim - 输入首尾空格过滤

4.5 v-on可以监听多个方法吗？

问题一：v-on可以监听多个方法吗？

v-on可以监听多个方法，例如：

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

但是同一种事件类型的方法，vue-cli工程会报错，例如：

<a href="javascript:;" @click="methodsOne" @click="methodsTwo"></a>

会报错。

4.6 vue中 key 值的作用

问题一：vue中 key 值的作用

key值：用于 管理可复用的元素。

因为 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做使 Vue 变得非常快，但是这样也不总是符合实际需求。

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">

        <label>Username</label>

        <input placeholder="Enter your username">

</template>

<template v-else>

         <label>Email</label>

        <input placeholder="Enter your email address">

</template>

那么在上面的代码中切换loginType

loginType将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，</span>不会被替换掉，仅仅是

替换了它的 placeholder`。这样也不总是符合实际需求，所以Vue为你提供了一种方式来表达

这两个元素是完全独立的，不要复用它们。只需添加一个具有唯一值的 key 属性 即可：

<template v-if="loginType === 'username'">

      <label>Username</label>

      <input placeholder="Enter your username" key="username-input">

</template>

<template v-else>

     <label>Email</label>

     <input placeholder="Enter your email address" key="email-input">

</template>

现在，每次切换时，输入框都将被重新渲染。

4.7 vue-cli工程升级vue版本

vue-cli如何进行工程升级？

前言：此命令谨慎使用，实际开发中如需升级建议直接使用 vue-cli 脚手架搭建，只需要了解即可！

推荐使用：

//升级插件

npm-check-updates

首先安装插件，建议用 npm 源安装，测试时用 cnpm 安装未下载成功：

npm install npm-check-updates -g

然后在待升级工程的目录结构下，命令行输入：ncu

然后升级所有版本，命令行输入：ncu -a

再输入：npm install

4.8 vue事件中如何使用event对象？

问题一：vue事件中如何使用event对象？

注意在事件中要使用 $ 符号

//html部分

<a href="javascript:void(0);" data-id="12" @click="showEvent($event)">event</a>

//js部分

showEvent(event){

//获取自定义data-id

console.log(event.target.dataset.id)

//阻止事件冒泡

event.stopPropagation();

//阻止默认

event.preventDefault()

}

4.9 $nextTick的使用

问题一：什么是$nextTick？

简单回答：因为Vue的异步更新队列，$nextTick是用来知道什么时候DOM更新完成的。

4.10 Vue 组件中 data 为什么必须是函数

问题一：Vue 组件中 data 为什么必须是函数？

简单回答 ： 因为一个组件是可以共享的，但他们的data是私有的，所以每个组件都要return一个新的data对象，返回一个唯一的对象，不要和其他组件共用一个对象。

//为什么data函数里面要return一个对象

<script>

export default {

data() {

return {  // 返回一个唯一的对象，不要和其他组件共用一个对象进行返回

menu: MENU.data,

poi: POILIST.data

}

}

}

</script>

4.11 v-for 与 v-if 的优先级

问题一：v-for 与 v-if 的优先级

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 

v-if 将分别重复运行于每个 v-for循环中。当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">{{ todo }}</li>

上面的代码只传递了未完成的 todos。而如果你的目的是有条件地跳过循环的执行，那么可以将 v-if 置于外层元素 (或 <template>)上。如：

<ul v-if="todos.length">

   <li v-for="todo in todos">{{ todo }}</li>

</ul>

<p v-else>No todos left!</p>

1.