什么是数据响应？
数据响应式是 vue 实现 UI的核心原理，当用户改变数据 data ，UI 自动更新。
如何实现
vue2.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。更新 UI。
Vue 中解释：
当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
优点：
用户不需要操作 DOM 去完成 UI 制作
缺点：
1、vue 用的这个 api 是有缺陷的，导致 vue 对新增的属性/删除属性没有办法做到响应式。没有办法监听
2、深度监听，需要递归到底，一次性计算量大
3、无法原生监听数组，需要特殊处理
解决方法：
vue3 通过 Proxy 解决了 Object.defineProperty 相应的问题。
Object.defineProperty 的问题详述
对象中：
给data中的对象动态新增的属性，不能够有响应式的效果，也就是说不能触发视图更新。
解决方法：
- 在对象中提前把属性声明好。
- 如果确实需要动态的给 person 对象添加 age 属性，那么我们可以用到vue中提供的 $set 方法
- 或者可以使用
Vue.set(object, propertyName, value)方法来实现
两者的作用：
- 新增 key
- 自动创建代理和监听（如果没有创建过）
- 触发 UI 更新（但不会立刻更新）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据响应式</title>
</head>
<body>
<div id="app">
<div>姓名：<span>{{person.name}}</span></div>
<div>性别：<span>{{person.sex}}</span></div>
<div>年龄：<span>{{person.age}}</span></div>
<button @click = addAge></button>
</div>
<script src="./public/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
person: {
name: 'A',
sex: 'man'
}
},
methods: {
addAge() {
// 给data中的对象动态新增的属性，不能够有响应式的效果
// this.person.age = 20
// this.$set(this.person, 'age', 20) // this 指向 vm
// 或
Vue.set(this.person, 'age', 20)
}
}
})
</script>
</body>
</html>
对于数组
数组通过索引直接修改索引对应的内容，或者当你修改数组的长度时，是无法实现响应式的效果
解决方案：
依然可以使用 Vue.set(object, propertyName, value) 和 vm.$set
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set
vm.$set(vm.items, indexOfItem, newValue)
修改数组长度，数组的增加和删除
vm.items.splice(indexOfItem, 1, newValue)
vm.items.splice(newLength)
在 Vue 内部重新定义数组原型，扩展了新的数组方法
Vue 篡改了数组的 API ，参考变更方法
push()pop()shift()unshift()splice()sort()reverse()
代码一：
class VueArray extends Array{
push(...args){
const oldLength = this.length // 记录当前数组长度
super(...args)
for(let i = oldLength; i < this.length; i++){
Vue.set(this, i, this[i]) // 通知 Vue 每个新增的 key
}
}
}
代码二：
// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象，原型指向 oldArrayProperty ，再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty);
['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
arrProto[methodName] = function () {
updateView() // 触发视图更新
oldArrayProperty[methodName].call(this, ...arguments)
// Array.prototype.push.call(this, ...arguments)
}
})
1805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
