Vue的数据响应式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

getter和setter怎么用

示例代码

getter ，关键词为 get ，用于获取一个值。定义时为函数，但是使用时不用加括号。

setter 用于对数据的改写

Object.defineProperty

示例代码

可以给对象添加属性value
可以给对象添加getter / setter
getter / setter用于对属性的读写进行监控

代理：
对myData对象的属性读写，全权由另一个对象vm负责
那么vm就是myData的代理
用vm.n来操作myData.n

vue 对 data 做了什么

当你创建一个实例时

const vm = new Vue({data: myData})

vue 会让 vm 成为 myData 的代理。
vue 会对 myData 的所有属性进行监控。
目的
你可以使用 this 来访问到 vm。 this.n === myData.n。
之所以要监控，就是防止 vue 无法得知 myData 的属性变化。
vue 得知属性变化才可以使用 render(data) 来更新 UI 和渲染页面。

数据响应式

响应式即对外界的变化做出的反应的一种形式。

const vm = new Vue({data:{n: 0}})

当修改 vm.n 或 data.n 时，render(data...) 中的 n 就会做出响应的响应。
这个联动的过程就是 vue 的数据响应式。
vue 目前通过 Object.defineProperty 来实现数据响应式。

在 data 中添加属性

Vue 虽然对 data 中的属性（或对象中的属性）进行监听和代理，但是它却没有办法进行事先的监听和代理。
如果你在初始化 data 之后再添加属性，该如何实现？

一般对象

对于一般的对象来说，可以在 data 中预先把所有可能用到的属性全部写出来，这样并不需要新增属性，只需要改它。
也可以通过其他方法来添加属性。
在了解以上原理后，我们来了解 Vue 提供的一个 API：

Vue.set(object, key, value)

或

this.$set(object, key, value)

作用

在 data 中添加新的属性。
自动创建为它创建代理和监听（如果没有创建过）。

示例：

const Vue = window.Vuenew Vue({ data: { obj: { a: 0 } }, template: ` <div> {{obj.b}} <button @click='one'>One</button> </div> `, methods: { one() { Vue.set(this.obj, 'b', 1) // 或 this.$set(this.obj, 'b', 1) } } }).$mount('#app')