vue 双向绑定的原理

最新推荐文章于 2024-07-31 23:47:49 发布

潇潇雨歇~

最新推荐文章于 2024-07-31 23:47:49 发布

阅读量266

点赞数

本文链接：https://blog.youkuaiyun.com/lan128lan/article/details/103992870

版权

本文详细探讨了Vue实现双向数据绑定的原理，主要利用Object.defineProperty()方法设置getter和setter，通过监听数据变化来通知订阅者。还介绍了属性描述符的类型，包括数据描述符和存取描述符，以及相关属性如writable、configurable和enumerable的作用。通过实例解析了get和set的用法，并进一步讨论了如何通过配置属性来实现对象常量、禁止扩展、密封和冻结等不变性特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前天面试被面试官问到了 "vue 实现双向数据绑定的原理是什么？"，除了知道v-modle可以实现数据双向绑定，我哪里知道其中的原理。面试已凉，回来之后查阅了资料，写下这篇博客，加深自己学习理解，也希望能帮到大家。

VUE是采用数据劫持结合发布者-订阅者模式的方式实现数据双向绑定，通过Object.defineProperty() 来劫持各个属性的setter, getter, 在数据变动时发布消息给订阅者，触发相应的监听回调。

实现原理：利用了 Object.defineProperty() 方法 重新定义了对象获取属性值(get) 和设置属性值 (set) 的操作来实现的（对Object.defineProperty()方法不是很了解的我在文章底部也做了补充说明）。它接受3个参数，要操作的对象、要定义或修改的属性名、属性描述符。重点在属性描述符，属性描述符有两种形式：数据描述符和存取描述符。前面说的 get 和 set 就是属于存取描述符的属性

底层就是Object.defineProperty()，get 就是读取之前的旧数据，set 中如果发现数据没改，直接return 原始值；如果改了就直接修改为NewValue。

下面是一个简单的数据双向绑定的实现：

<body>
    <div id="app">
        <input type="text" id="model"><br />
        <div id="modelText"></div>
    </div>
    <script>
        var model = document.getElementById('model')
        var text = document.getElementById('modelText')

        var content = ''
        model.value = content
        var obj = {}

        Object.defineProperty(obj, 'msg', {
            get: function () {
                console.log('get')
                return content
            },
            set: function (value) {
                content = value
                model.value = value
                console.log(value)
                text.innerHTML = value
            }
        })

        obj.msg  = 'please input...'
        var isEnd = true

        model.addEventListener('keyup', function () {
            if (isEnd) {
                obj.msg = this.value
            }
        }, false)

    </script>
</body>

你也可以在后面加上中文监听输入和结束：

model.addEventListener('compositionstart', function () {
     console.log('start to input Chinese...')
     isEnd = false
})

model.addEventListener('compositionend', function () {
     isEnd = true
     console.log('input Chinese end...')
})

对Object.defineProperty() 的补充说明

Object.defineProperty()

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

语法：

Object.defineProperty(obj, prop, descriptor)

它接收三个参数：要操作的对象，要定义或修改的对象属性名，将被定义或修改的属性描述符

该方法允许精确添加或修改对象的属性。在默认情况下，使用 Object.defineProperty() 添加的属性是不可修改的。

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'Jack',
})

Person.name = 'Tony'
console.log(Person.name)  //Jack

let Person = {}
Object.defineProperty(Person, 'name', {
   value: 'Jack',
   writable: true // 是否可以改变
})

Person.name = 'Tony'
console.log(Person.name)  //Tony

默认情况下，writable 为 false。writable 是什么呢？那就要说一下属性描述符的两种形式了。

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。（两种形式不能混用）

数据描述符 --特有的两个属性（value,writable）

数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。

存取描述符 --是由一对 getter、setter 函数功能来描述的属性

存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

configurable 和 enumerable 是两者都有的属性：

configurable：是否可配置，或是否可删除。当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。

enumerable: 是否会出现在 for...in，或Object.keys()的遍历中。当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

上例题，方便理解：

1. get 与 set

var Person = {}
var pValue = "Tony"
Object.defineProperty(Person, 'name', {
    get: function () {
        return pValue
    },
    set: function (val) {
        bValue = val
    }
})
console.log(Person.name)  //Tony


// Person.name的值与pValue 保持一致，除非后面手动修改Person.name的值

var Person = {}
var pValue = "Tony"
Object.defineProperty(Person, 'name', {
    get: function () {
        return pValue
    },
    set: function (val) {
        bValue = val
    }
})

Person.name = "Jack"
console.log(Person.name)  //Jack

// Person.name = "Jack",相当于手动修改了 pValue 的值

2. configurable

'use strict'
var Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack'
})
delete Person.name // Uncaught TypeError: Cannot delete property 'name' of #<Object>

'use strict'
var Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack',
    configurable: true
})
delete Person.name
console.log(Person.name) // undefined

3. configure 与 writable

'use strict'
var Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack'
})
Object.defineProperty(Person, 'name', {
    value: 'Tony'
})

// Uncaught TypeError: Cannot redefine property:

'use strict'
var Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack',
    configurable: true
})
Object.defineProperty(Person, 'name', {
    value: 'Tony'
})

console.log(Person.name) // Tony

'use strict'
var Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack',
    writable: true
})
Object.defineProperty(Person, 'name', {
    value: 'Tony'
})

console.log(Person.name) // Tony

let Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack',
    configurable: true,
    writable: false
})
Object.defineProperty(Person, 'name', {
    value: 'Tony'
})
console.log(Person.name)   // Tony
Person.name = "zhangsan"
console.log(Person.name)   // Tony

// 因为 writable 为 false,故不可修改

// 当writable 为true时，可以修改成功(configurable的值为true or false 无影响)

4. enumerable

let Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack',
    enumerable: false
})
Person.gender = 'male'
Object.defineProperty(Person, 'age', {
    value: 18,
    enumerable: true
})
console.log(Person)  // {gender: "male", name: "Jack", age: 18}
console.log(Object.keys(Person)) // ['gender', 'age']



for (let k in Person) {
    console.log(k)
}
// gender
// age

可以看出，只有 enumerable = true 时，属性才可以出现在 for... in 和 Object.keys() 的遍历中

不变性的一些扩展和总结：

1. 对象常量

结合 writable: false 和 configure: false 就可以创建一个真正的常量属性（不可修改、不可重新定义或删除）

let Person = {}
Object.defineProperty(Person, 'name', {
    value: 'Jack',
    writable: false,
    configurable: false
})

delete Person.name  // 不可删除

Person.name = 'zhangsan' // 不可重新赋值，name仍为Jack

Person.gender = 'male'  // 可以通过赋值添加新属性


// Cannot redefine Property: name 不可重新定义
Object.defineProperty(Person, 'name', {
    value: 'Tony'
})

2. 禁止扩展

如果你想禁止一个对象添加新属性并且保留已有属性，就可以使用Object.preventExtensions()

let Person = {
    name: 'Jack'
}
Object.preventExtensions(Person)
Person.gender = 'male'
console.log(Person.gender) // undefined

当使用严格模式的情况下，会抛出异常：‘Uncaught TypeError: Cannot add property gender, object is not extensible’

此时，如果你想修改现有属性值仍然是可以的(eg: Person.name='hi'), 它只是不能新增属性

3. 密封

Object.seal() 会创建一个密封对象。这个方法实际上会在一个现有对象上调用Object.preventExtensions()，并把所有现有的属性标记为 configurable: false.

let Person = {
    name: 'Jack'
}
Object.seal(Person)

Person.gender = 'male'  // 不能扩展属性
console.log(Person.gender)  // undefined 


// 不能重新配置属性
Object.defineProperty(Person, 'name', {
    value: 'Tony',
    configurable: true // Cannot redefined property: name
})

所以，密封之后，不能添加新属性、不能配置或删除现有属性。

但是，如果没有 "configurable: true“ 的话，是可以修改name 值的

4. 冻结

Object.freeze() 会创建一个冻结对象。这个方法实际上会在一个现有对象上调用Object.seal()，并把所有现有属性标记为 writable: false，这样就无法修改他们的值。

let Person = {
    name: 'Jack'
}
Object.freeze(Person)

Person.gender = 'male'  // 不能扩展属性
console.log(Person.gender)  // undefined 

Person.name = 'zhangsan' // 不可修改已有属性的值
console.log(Person.name) // 'Jack'


// 不能再次配置属性
Object.defineProperty(Person, 'name', {  //  Cannot redefine property: name
    name: 'hi',
    configurable: true
})

参考来源：

https://www.jianshu.com/p/8fe1382ba135

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty