- 什么是响应式?
修改 data 后,页面自动改变/刷新。这就是响应式。就像我们在使用 excel 的时候,修改一个单元格中的数据, 其它单元格的数据会联动更新,这也是响应式。
2. Vue 的响应式是如何实现的?
数据劫持:Vue 底层使用了 Object.defineProperty,配置了 setter 方法,当去修改属性值时 setter 方法则被自动调用,setter 方法中不仅修改了属性值,而且还做了其他的事情,例如:重新渲染页面。setter 方法就像半路劫持一样,所以称为数据劫持。
3. Vue 会给 data 中所有的属性,以及属性中的属性,都会添加响应式。
4. 后期添加的属性,不会有响应式,怎么处理?
① Vue.set(目标对象, ‘属性名’, 值)
② vm.$set(目标对象, ‘属性名’, 值)
5. Vue 没有给数组下标 0,1,2,3….添加响应式,怎么处理?
①调用 Vue 提供的 7 个 API:
push()
pop()
reverse()
splice()
shift()
unshift()
sort()
或者使用:
Vue.set(数组对象, ‘index’, 值)
vm.$set(数组对象, ‘index’, 值)