一、vue响应式原理

在Vue这种MVVM框架中，最重要的核心就是实现数据层和视图层的连接，通过数据驱动应用，数据变化，视图更新。Vue中的方案是数据劫持+发布订阅模式

• 对象内部通过defineReactive方法，使用 Object.defineProperty() 监听数据属性的 get 来进行数据依赖收集，再通过 set 来完成数据更新的派发
• 数组则通过重写数组方法来实现的。扩展它的 7 个变更⽅法，通过监听这些方法可以做到依赖收集和派发更新；( push/pop/shift/unshift/splice/reverse/sort )

Proxy 与 Object.defineProperty 优劣对比

• Proxy 可以直接监听对象而非属性
• Proxy 可以直接监听数组的变化
• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的
• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法

二、v-if和v-for

• v-for解析的优先级高
• 如果同时出现，回西先执行循环再判断条件，循环不可避免，浪费性能，应避免这种情况出现

三、key的作用

key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使整个patch更加高效，减少DOM操作量，提高性能

四、Vue中的组件的data

Vue中组件的data是一个函数，原因：

• 防止data复用
• data独立性
• 闭包

如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data

Object是引用数据类型，里面保存的是内存地址，单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果

五、Computed和Watch的区别

computed： 计算属性。依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值；

watch： 监听数据的变化。更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

六、Vue性能优化

• 尽量减少data中的数据，data中的数据会增加getter和setter，耗费性能
• spa单页面采用keep-alive缓存组件
• key保证唯一
• 使用路由懒加载、异步组件
• 模块按需引入
• 节流防抖
• 使用缓存
• 骨架屏（简单实现就是通过占位线框元素,渐进式加载数据。）