Vue的数据响应式

Posted 2020-12-19 justcho

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.Vue

new 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‘)

数组

因为数组本身的特殊性：数组的长度无法预测（比如所有用户的用户名，存在数组中），你无法使用 undefined 去为每一项占位，或一直使用 Vue.set( )方法。

• 你可以使用 push 方法 this.array.push(‘value‘)，但其实数组已经被 Vue 包装了新的 push 方法。
• 原理就是声明一个新的类来继承数组。
• 各种在 Vue 实例 中使用的特例方法， 详见数组变异方法，一共有7个API。
• 这些方法 (API) 会自动处理对数组该项的监听和代理，并触发视图更新。