VUE双向数据绑定

最新推荐文章于 2024-05-08 18:08:25 发布

前端小生一枚

最新推荐文章于 2024-05-08 18:08:25 发布

阅读量176

点赞数

分类专栏：基础知识复习巩固文章标签： vue

本文链接：https://blog.csdn.net/qq_33699819/article/details/88926509

版权

本文介绍了Vue的响应式原理，当修改data属性时，Vue会立即监听并更新视图。Vue通过Object.defineProperty实现响应式，将data属性代理到vm实例上，并利用get和set来实现数据的双向绑定。

摘要由CSDN通过智能技术生成

什么是响应式

修改 data 属性之后，vue 立刻监听到
data 属性被代理到 vm 上

vue 中如何实现响应式

关键是理解 Object.defineProperty
将 data 的属性代理到 vm 上

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

var obj = {
            name: 'zhangsan',
            age: 25
        }
        console.log(obj)

        var obj = {}
        var _name = 'shangsan'
        Object.defineProperty(obj, 'name', {
            get: function () {
                console.log('get', _name) // 监听
                return _name
            },
            set: function (newVal) {
                console.log('set', newVal)  // 监听
                _name = newVa