Vue数据响应式

数据响应式定义

Vue数据响应式是Vue最独特的特性之一。Vue数据模型仅为普通的JavaScript对象，当数据模型内容被修改时，视图会进行更新。

相关概念

get/set

• get：在一个对象中，get关键字后可以跟一个方法fn()，此时get fn()可视为对象的一个属性，可使用get fn来调用fn()方法的返回值。
• set：在一个对象中，set关键字后可以跟一个方法fn()，可通过set fn()方法设置计算属性，从而修改对象中的原始属性内容。

defineProperty()

当定义完毕data数据内容后，希望添加数据，则需要使用defineProperty()方法，代码实例如下：

var _x = 0
Object.defineProperty(obj3, 'x', {
    get() {
        return x
    },
    set(value) {
    _x = value
    }
})

使用function proxy({data})()代理函数实现数据响应式

使用proxy函数作为data的代理，在函数中使用defineProperty()函数，函数形参为匿名对象以使得函数外无法操作对象值；同时在defineProperty()函数中使用get(),set()方法，使得在js文件中对obj对象做的任何操作都会实时响应在data中。代码实例如下：

let data = proxy({ data: {n:0} })  //括号中为匿名对象
function proxy({data}) {
    const obj = {}
    Object.defineProperty(obj, 'n', {
        get() {
        return data.n
        }.
        set(value) {
            if (value < 0) return data.n = value
        }
    })
    return obj
}

Vue数据响应式实现方式总结

1. 使用函数function proxy(){}作为data的代理，data使用匿名对象形式
2. 在代理函数中使用方法Object.defineProperty()实现数据响应
3. 在Object.defineProperty方法中使用getter和setter实现匿名对象的读写监控

vm = new Vue({data:myData})

依据上述基本原理，vue让vm成为myData的代理（proxy）以实现对myData所有属性的监控。监控的目的是让vm实时掌握myData的属性变化，在获取myData属性变化时即可以调用render(data)以将data改变实时渲染到页面中。