Vue高频面试题

1.为何组件的data必须是一个函数

组件的实例必须是一个函数,目的时为了防止多个组件实例对象之间共有一个data,产生数据污染.采用函数的形式,initData时会将其作为工厂函数都会返回一个全新的data对象

2.vue常用的指令

1.v-model:用于表单的元素实现双向数据绑定
2.v-for:遍历循环数组或json
3.v-show：显示内容,通过display=block/none来控制元素隐藏出现
4.v-hide：隐藏内容,与v-show一样
5.v-if:显示与隐藏 dom 元素的删除添加同angular中的ng-ig默认值为false
6.v-else-if:必须和v-if连用,单独使用报错
7.v-else:必须和v-if调用,单独使用报错
8.v-bind:动态绑定属性,及时对页面的数据进行更改
9.v-on:click:给标签绑定函数,可以缩写为@
10.v-text:解析文本
11.v-bing:绑定属性
12.v-once:进入页面,只渲染一次

3.v-if和v-show的区别

相同点:都可以动态的控制dom元素显示隐藏
区别:v-if控制着元素的显示隐藏是将Dom元素整个添加或删除
v-show:控制着Dom元素的显示或隐藏是为Dom元素添加css的样式display设置none或者是block,Dom元素还存在
性能对比:v-if有更高的切换消耗,v-show有更高的初始渲染消耗

4.vue生命周期执行过程

总共分为8个阶段
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。

载入前/后： 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

更新前/后： 当data变化时，会触发beforeUpdate和updated方法。

销毁前/后： 在destroy阶段，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。destroyed阶段，组件销毁

5.vue的双向数据绑定原理

vue.js是采用数据劫持结合发布者订阅者模式的方式,通过object.definedpropty()来劫持各个属性的,都加上setter,getter,
在数据变动时发布消息给订阅者触发相应的监听回调来渲染视图
具体步骤:
第一步:需要observer的数据对象进行递归包括子属性,都加上setter和getter,
在数据变动时发布消息给触发setter,就能监听到数据变法
第二步:compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新
函数,添加监听数据订阅者,一旦数据有变动收到通知,更新视图
第三步:watch订阅者是observer和compile之间的通信的桥梁,主要做的事情是
1.在自身实例化,属性的订阅器(dep)里面添加自己
2.自身必须有一个update方法
3,待属性变得dep.notice()通知时,能调用自身的update()方法,并触发compile中绑定回调,则功成身退

6.vue中的虚拟dom

虚拟dom是利用js描述元素与元素之间的关系,创建虚拟dom就是为了更好的虚拟节点,渲染到页面视图中,所有虚拟dom
对象的节点与真实的dom属性一一照应

7.vue中的diff算法

diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局更新Dom
其中两个特点
1.比较只会在同层级进行,不会跨层级比较
2.在diff比较的过程中,循环从两边向中间比较