vue数据代理原理[双向绑定原理]

my38778570 的个人博客 / 40 / 0 / 创建于 1年前 / 更新于 1年前

来源

数据代理

通过vm对象来代理data对象中属性的操作（读/写）

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加vm上的属性都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性

认识Object.defineProperty

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

  let  person = {
        name:'张三',
        sex:'男',
        //age:18
    }
    //不可枚举（不被遍历）
    Object.defineProperty('person','age',{
        value:18
    })
    console.log(Object.keys(person));

    //配置可以枚举
    Object.defineProperty('person','age',{
        value:18,
        enumerable:true,//控制属性是否可以被枚举，默认false
        writable:true,//控制属性是否可以被修改，默认false(默认不可以修改age的值)
        configurable:true,//控制属性是否可以被删除，默认false(默认不可以删除age的值`delete person.age`)
    })
    console.log(Object.keys(person));

高级用法

    let number = 18
    let  person = {
        name:'张三',
        sex:'男'
    }
    Object.defineProperty('person','age',{
        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get(){
            console.log("有人读取了age属性")
            return number
        },
        //当有人修改person的age属性时，set函数(setter)就会被调用，且收到修改的具体值
        set(value){
            console.log("有人修改了age属性,且值是",value)
            number = value
        },
    })

实例详解

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
</head>

<body>
    <div id="app">
        <div>{{name}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止vue在启动时生成生产提示
        const vm = new Vue({
            el: "#app",
            data: {
                name: "数据绑定",
            },
        })
    </script>
</body>

</html>

console.log(vm)

vue数据绑定原理

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加vm上的属性都指定一个getter/setter

vm._data === options.data # true

{
 el: "#app",
 data: {
     name: "数据绑定",
 },
}

vm.name = "修改数据绑定了"

在getter/setter内部去操作（读/写）data中对应的属性
执行过程 vm.name => setter => data
vm._data.name = "恢复数据绑定了"
{{name}} 等于 {{_data.name}}
{{name}}等于读取（getter）_data.name
_data不是数据代理而是数据劫持