Vue 数据响应式的理解

谈起Vue的数据响应式, 响应式其实就是我打你一下你给我一个反应说有点疼,在Vue中数据的响应式是一个在开发的时候写起来很爽的一个事情, 但是在学习的时候还是需要理解一下 数据响应式到底是个什么, 怎么来处理的

Object.defineProperties 配合 get 和 set

let data = {}
data._n = 1
Object.defineProperty(data, 'n', {value: 1}) {
    get () {
        return this._n
    }
    set(value){
        this._n = value
    }
}

在这里使用 Object.defineProperty 对 data 属性进行劫持, 当需要获取的时候, 就会通过Object.defineProperty 的 get 方法 获取到 data_n 的值, 需要修改的时候就会使用set 方法去修改数据的值, 当然这样也是有缺点的,比如可以随便修改data的数据, 或者我们需要响应式的数据是一个对象, 这些属性在之前没有定义,那还会是响应式的嘛?

代理模式

let data3 = proxy({ data:{n:0} })

 function Proxy({data}) {
     const obj = {}
     data._n = 1
     Object.defineProperty(obj, 'n', {value: 1}) {
        get () {
            return data.n
        }
        set(value){
            this.n = value
        }
    }
 }

在这里使用了一个闭包对变量形成了一个保护, 其实在我们 new Vue({options})的时候, Vue内部就是做了类似一件事情, 在options 中提供的data 进行了劫持, 当然这样是有缺点的, Vue, 其实也给出了解决办法 就是 Vue.set 和 this.$set()

数组的变异方法

对于数组, Vue 内部进行了修改, 有部分数组的API 是可以是响应式的,一起来看看

class VueArray extends Array {
    push(...args){
        consgt oldLength = this.length
        super.Array.push(...args)
        for(let i=oldLength; i< this.length;i++) {}
        Vue.set(this, i, this[i])
    }
}