vue相关面试题整理（仅供参考！！！）

目录：

• • • 一、vue双向数据绑定原理
    • 二、组建中data为什么是个函数
    • 三、v-if和v-show的区别
    • 四、v-if和v-for的优先级
    • 五、 v-for中的key值的作用
    • 六、 修改数据页面不更新的原因和解决方案
    • 七、$nextTick
    • 八、vue-router钩子函数和执行顺序

一、vue双向数据绑定原理

vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图

二、组建中data为什么是个函数

一般来说实例对象中的data可以是对象也可以是函数，不会造成页面污染，但是组件中为了防止多个组件中的对象公用一个data，所以它（data）必须是个函数，否则会产生数据污染

三、v-if和v-show的区别

当条件为真时没有区别
当条件为假时：

1. v-if通过创建或删除DOM节点来实现元素的显示隐藏
2. v-show 通过css中的display来显示隐藏
3. v-if更适合数据的筛选和初始渲染
4. v-show更适合元素的切换

四、v-if和v-for的优先级

当v-if和v-for处于同一标签中，v-for的优先级是大于v-if的，一般来说v-for遍历之后v-if才会执行的，如果在一个大的vue项目中，这样使用的话会造成没必要的资源浪费。
若想解决这个问题的话就把v-if放在v-for的父级标签上。

五、 v-for中的key值的作用

key值可以提升v-for的渲染效率，vue不会改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去，同时在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识，给key赋值的内容不能是可变的。

六、 修改数据页面不更新的原因和解决方案

正常情况可以用
this.$forceUpdate();

在进行页面强制渲染，如果遇到特殊情况 可以配合this.$nextTick 使用强制渲染
this.$nextTick(function(){
	this.$forceUpdate();
})

如果 在碰到更特殊的情况 ，比如在模板中的数据即使在本页强制渲染了，也无法生效，那就直接在模板页面的 触发函数里面调用

methods: {
    setEventTest(row,index,type){
        this.$emit('TapsetEvent',row,index,type);
        this.$nextTick(function(){
            this.$forceUpdatr()
        })
    }
}

这个函数 就是在模板内部 触发父页面的 函数，触发后父页数据修改成功，但是模板页面 不会重新渲染，直接加上 这段代码 就可以实现强制渲染数据

七、$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM
意思就是说我们在Vue 在更新 DOM时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新，如果没有 nextTick 更新机制，那么 num每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图)，有了nextTick机制，只需要更新一次，所以nextTick本质是一种优化策略。

八、vue-router钩子函数和执行顺序

标签：nextTick,面试题,vue,渲染,更新,key,数据,仅供参考
来源： https://blog.csdn.net/weixin_48009560/article/details/116274971