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()
