Vue2响应式原理

🍀vue2响应式原理

vue的特性：数据驱动视图和双向数据绑定。vue官方文档也提供了响应式原理的解释：

Object.defineProperty()

Object.defineProperty()的作用是直接在一个对象上定义一个新属性，或者修改一个属性

使用方式：Object.defineProperty(对象名,属性名,配置项)

<script>	
	let person = {
		name: '张三',
		sex: '男',
	}
	Object.defineProperty(person,'age',{
		value: 18
	}) //不能参与遍历
</script>

上述写法是给person对象添加一个age属性，属性的值是18

但是这种写法：

不能进行枚举，即无法在遍历的时候获取到age属性的值
不能被修改
不能删除

所以Object.defineProperty()还有其他配置项

Object.defineProperty(person,'age',{
    value: 18
    enumerable: true //控制属性是否可以枚举，默认值是false
    writeable: true //控制属性是否可以被修改，默认值是false
    configurable: true //控制属性是否可以被删除，默认值是false
})

现在有一个需求：定义一个新的变量number，当number的值修改后，person中age的值也相应被修改；而person中age的值被修改后，number的值也相应被修改。

这个时候需要借助新的配置项get和set

<script>	
	let number = 18
	let person = {
		name: '张三',
		sex: '男',
	}
	//能够实现number的值修改后，person中age的值也相应被修改
    Object.defineProperty(person,'age',{
        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get:function(){
            return number
        },
        //当有人修改person的age属性时，set函数(setter)就会被调用，且接收到修改的具体值
        set(value){
            number = value
        }
    })
</script>

数据代理

数据代理就是通过一个对象代理另一个对象中属性的操作

vue就是通过vm对象来代理data对象中属性的操作

<body>
    <div id="app">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
    </div>

</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            name: '张三',
            age: 18
        }
    })
</script>

控制台输出vm,我们可以看到name和age这两个属性

这两个属性都是通过Object.defineProperty()添加到vm上,所以可以发现他们都有对应的getter/setter

也就是说：当读取vm中的name时，会调用getter，把data.name给name；当修改vm中的name时，会调用setter，修改data.name中的值（这里跟第一个例子是同一个道理）

但是我们会发现vm上没有data（疑惑:明明在创建vue实例对象的时候，设置了data，为什么取不到）

其实我们以为的这个data其实是_data，可以验证一下：

let data = {
    name: '张三',
    age: 18
}
const vm = new Vue({
    el: '#app',
    data
})

控制台进行一下判断：

所以我们获取数据的时候，也可以通过vm._data.age来获取

vue为了编码更方便，进行了数据代理，遍历data中的所有属性，把每个属性都添加到vm中，指定getter/setter。

所以可以直接通过vm.age来获取数据

基本原理：

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

实现双向绑定

双向绑定就是数据发生变化时，视图也跟着变。核心是数据劫持和发布者-订阅者模式

数据劫持实质就是使用defineProperty重写getter/setter。当数据改变时，set就会劫持这个数据的变化，更新视图(view)

但是由于defineProperty无法检测到对象和数组内部的变化，所以遇到属性为对象时，会递归观察该属性；遇到数组时，会重写push、pop、shift等方法。

监测对象中的数据

最开始会想认为利用getter/setter，但是这样会造成死循环。只要有人获取name的值，就会调用get，然后又会获取一次person.name，造成死循环。set同理。

//错误的代码！！！！！！！！！
let person = {
    name: '张三',
}
Object.defineProperty(person, 'name', {
    get: function() {
    	return person.name
    },
    set(value) {
    	person.age = name
    }
})

正确的做法是：监听数据的每一个属性，当监听到属性值发生变化时，通知订阅者去更新视图，重新进行模板解析。

<script>
    let data = {
        name: '张三',
    }

    //创建一个观察者实例对象，用于监视data中属性的变化
    const obs = new Observer(data)

    //准备一个vm实例对象
    let vm = {}
    vm._data = data = obs

    function Observer(obj) {
        //汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj)

        //遍历
        keys.forEach((k) => {
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },
                set(val) {
                    obj[k] = val
                }
            })
        })
    }
</script>

上述代码只是一个例子，只会对一层对象进行处理，vue的操作是递归，直到数据类型是简单数据类型。

如需给后添加的属性做响应式，可以使用

Vue.set(object,propertyName,value)或
vm.$set(object,propertyName,value)

data: {
	student:{
		name: '张三',
		age: 18,
		friends:[
			{name:'小明',age:20},
			{name:'李四',age:15}
		]
	}
}
Vue.set(this.student, 'sex', '男')
this.$set(this.student, 'sex', '男')

监测数组中的数据

这里可以去看一下vue的官方文档：

通过包裹数组更新元素的方法实现，本质就是做了两件事

（1）调用原生对应的方法对数组进行更新

（2）重新解析模板，进而更新页面

所以在vue修改数组中的某个元素一定要用如下方法：

使用API：push(),pop(),shift(),splice(),sort(),reverse()等
Vue.set(),vm.$set()

posted @ 2022-04-10 16:33 豆豆打丑小鸭阅读(631) 评论(0) 收藏举报

刷新页面返回顶部

wxiaonan

Vue2响应式原理