vue2基本响应式实现方式之让数组也变成响应式
作者：Akimoto Hiroshi
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue2让数组也变成响应式
之前的代码有个问题，就是操作数组数据的时候，不会触发set
let data = {
name: 'dean',
age: 30,
level1: {
level2: {
level3_1: {
level4: {
value: 'anna'
}
},
level3_2: {
level4: {
value: 'jing'
}
}
}
},
languages: ['javascript', 'java', 'c', 'pascal', 'python']
}
observe(data)
function observe(target) {
// 如果不是对象或者数组就直接return 这也是地柜结束的条件
if (typeof target !== 'object' || target === null) return
// 遍历对象每个属性 对每个属性添加响应式
for(let k in target) {
defineReactive(target, k, target[k])
}
}
function defineReactive(target, key, value) {
// value子属性的值 对其observe一下 递归
observe(value)
// 再让这个子属性添加响应式
Object.defineProperty(target, key, {
get() {
return value
},
set(newValue) {
if (newValue === value) return
// 设置新值也要observe一下
observe(newValue)
value = newValue
console.log('更新视图')
}
})
}
console.log(data.level1.level2.level3_1.level4.value)
data.level1.level2.level3_1.level4.value = 'jing'
console.log(data.level1.level2.level3_1.level4.value)
data.languages.push('ruby')
console.log(data.languages)
我们可以这样修改来支持数组响应式操作：
let data = {
name: 'dean',
age: 30,
level1: {
level2: {
level3_1: {
level4: {
value: 'anna'
}
},
level3_2: {
level4: {
value: 'jing'
}
}
}
},
languages: ['javascript', 'java', 'c', 'pascal', 'python']
}
/**
* 数组操作
*/
const oldArrayProto = Array.prototype
let newArrayProto = Object.create(oldArrayProto)
let arr = ['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort']
arr.forEach(methodName => {
newArrayProto[methodName] = function() {
console.log('自定义处理')
// 保留原来的处理结果
return oldArrayProto[methodName].call(this, ...arguments)
}
})
function observe(target) {
// 如果不是对象或者数组就直接按照原值return 这也是地柜结束的条件
if (typeof target !== 'object' || target === null) return target
// 遍历对象每个属性 对每个属性添加响应式
if (Array.isArray(target)) {
Object.setPrototypeOf(target, newArrayProto)
}
for(let k in target) {
defineReactive(target, k, target[k])
}
}
function defineReactive(target, key, value) {
// value子属性的值 对其observe一下 递归
observe(value)
// 再让这个子属性添加响应式
Object.defineProperty(target, key, {
get() {
return value
},
set(newValue) {
if (newValue === value) return
// 设置新值也要observe一下
observe(newValue)
value = newValue
console.log('更新视图')
}
})
}
observe(data)
// console.log(data.level1.level2.level3_1.level4.value)
// data.level1.level2.level3_1.level4.value = 'jing'
// console.log(data.level1.level2.level3_1.level4.value)
data.languages.push('ruby')
console.log(data.languages)
vue2中的响应式原理
响应式原理主要就是通过数据劫持，依赖收集，派发更新的方式来实现的
1.数据劫持，vue2是通过Object。defineProperty来将对象的每一个属性转化成set，get。
其中修改对象的属性时 就会触发set， 使用对象的属性时就会触发get
2.依赖收集。就是在渲染视图时 将watcher和具体的属性，通过发布订阅者模式管理，这样数据改变之后就能更精准的更新视图
3.派发更新：它就是通过dep来执行watcher的notify方法
使用Object.defineProperty做响应式的缺点
有三点
1.深度监听，需要一次性递归到底，计算量比较大
2.描述符只有get和set，无法监听新增属性和删除属性的操作
3.无法原生监听数组
这三个缺点中，第二点是defineProperty本身API的缺陷，而第一点和第三点都是出于性能考虑而做的取舍
解决缺点的方法
当我们通过数组的方法去更改数组时或是直接删除data数据，数据并不能实现响应式，因为Object.defineProperty是没有办法处理属性删除和新增的
因此vue2的响应式，通过数组方法（prop，push），或是删除，vue是不能监听的
vue2中通过vue2中可以通过vue.datele和vue.set这些vue内置api来改变属性，实现响应式。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。