2019-03-28（Vue知识点1）

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

----简单地说就是可以只使用一部分功能而不需要懂其他的模块，也可以vue全家桶一起上。

2、vue.js的两个核心是什么？

----数据驱动（mvvm省去手动操作dom，通过改变数据来渲染模板）和组件化思想（封装，模块化思想）。

3、请问 v-if 和 v-show 有什么区别

----都是动态显示DOM元素。v-if是动态的向DOM树内添加或者删除DOM元素，v-show是通过设置DOM元素的display样式属性控制显隐。v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件，v-show只是简单的基于css切换。v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译，v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留。v-if有更高的切换消耗，v-show有更高的初始渲染消耗，v-if适合运营条件不大可能改变，v-show适合频繁切换。

4、vue常用的修饰符

.number---如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

.trim-----如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符

.stop---事件冒泡（事件不会向上传递）

.prevent-----阻止默认事件（不触发默认事件）

.stop.self.prevent-----指定元素触发（不包括子元素）

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

可以，点击事件、鼠标事件、键盘事件都可以同时绑定在同一个元素上面

6、vue中使用v-for的时候，key值作用？

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确地识别此节点，找到正确的位置插入新的节点

7、vue-cli项目升级vue版本？

在项目目录里运行 npm upgrade vue vue-template-compiler，不出意外的话，可以正常运行和 build。如果有任何问题，删除 node_modules 文件夹然后重新运行 npm i 即可

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

事件中传入$event

9、$nextTick的使用？

在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作并无作用，而在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

10、Vue 组件中 data 为什么必须是函数？

在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue() 实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

11、v-for 与 v-if 的优先级？

v-for比v-if优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候，最好的方法是外层包一层template，上面绑定v-if

12、vue中子组件调用父组件的方法？

父组件自定义事件，子组件使用$emit触发这个事件

13、vue中如何编写可复用的组件？

*.规范化命名：组件的命名应该跟业务无关，而是依据组件的功能命名。

**.数据扁平化：定义组件接口时，尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处：

*** 组件接口清晰。***props 校验方便。***当服务端返回的对象中的 key 名称与组件接口不一样时，不需要重新构造一个对象。

扁平化的 props 能让我们更直观地理解组件的接口。

****可复用组件只实现 UI 相关的功能，即展示、交互、动画，如何获取数据跟它无关，因此不要在组件内部去获取数据。

*****.可复用组件应尽量减少对外部条件的依赖。

******.组件在功能独立的前提下应该尽量简单，越简单的组件可复用性越强。

*******.组件应具有一定的容错性。

14、vue生命周期钩子函数有哪些？

beforeCreate：el 和 data 并未初始化 （此方法不常用）

created：完成了 data 数据的初始化，el的初始化未完成。用来发送ajax

beforeMount：（执行此方法时已经完成了 el 和 data 初始化 （已经赋予了对应的值））

渲染DOM之前先确认下是否有要编译的根元素（有无el属性），有才继续确认是否具有模板属性template,如果有模版属性，则会用template的值替换掉HTML中的结构，template模版中只能有一个根元素（而且不能是文本）；

mounted：（执行此方法时代表已经挂载结束了）

把编译好的数据挂载到DOM元素上，最后渲染成真实的DOM元素；真实DOM已经渲染完成，可以操作DOM了

beforeUpdate：当页面依赖的数据更改之后触发（此时DOM结构还没有重新加载）

updated：DOM结构重新加载之后触发

调用vm.$destroy()之后触发下面两个事件：

beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。（可在此处清除定时器，清除事件绑定）

destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

15、vue更新数组时触发视图更新的方法？

push(), pop(), shift(), unshift(), splice(), sort(), reverse()

pop() 方法用于删除最后一个元素，把数组长度减 1，并且返回它删除的元素的值。

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 该方法会改变原始数组。

sort() 方法用于对数组的元素进行排序。

reverse() 方法用于颠倒数组中元素的顺序

Vue.set() 响应式新增与修改数据