Vue2常见面试题

目录

1、vue 修改数据页面不重新渲染

---

1、vue 修改数据页面不重新渲染

vue2是用过Object.defineProperty实现数据响应式, 组件初始化时，对 data 中的 item 进行递归遍历，对 item 的每一个属性进行劫持，添加 set , get 方法。我们后来 新加的属性 ，并没有通过Object.defineProperty设置成响应式数据，修改后不会视图更新
 

通过数组索引号修改了数组，界面会不会相应更新？为什么？

答：不会。vue 监听不到

vue 为什么没有提供 arr[下标] = val 变成响应式？

尤大：“因为性能问题，性能代价和获得的用户体验收益不成正比”

数组/对象的响应式 ，vue 里面是怎么处理的？
对象：使用了Object.defineProperty中的 get 和 set

如何监测对象中的数据？
通过 setter 实现监视，且要在 new Vue 时就传⼊要监测的数据

对象中后追加的属性，Vue 默认不做响应式处理
如需给后添加的属性做响应式，请使⽤如下 API：
Vue.set(target,propertyName/index,value) vm.$set(target,propertyName/index,value)

数组： Vue重写了数组的原型，更准确的表达是拦截了数组的原型

如何监测数组中的数据？
通过包裹数组更新元素的⽅法实现，本质就是做了两件事：

调⽤原⽣对应的⽅法对数组进⾏更新

重新解析模板，进⽽更新⻚⾯

在 Vue 修改数组中的某个元素⼀定要⽤如下⽅法：

使 ⽤ 这 些 API ：
push() 、pop() 、shift()、 unshift()、 splice()、 sort()、 reverse()
Vue.set() 或 vm.$set()
覆盖整个数组