let data = { // 定义一个对象
name: '张三',
age: 18,
info: {
birth: '江西'
},
color: ['red', 'blue', 'orange']
}
let oldArray = Array.prototype // 拿到数组的原型对象
let newArray = Object.create(oldArray); // 创建一个新的对象,让其原型上的一些方法为数组原型上的方法,简而言之,依据数组原型声明一个对象
['push', 'shift', 'unshift', 'pop', 'splice'].forEach(element => {
newArray[element] = function() {
console.log('更新数组视图')
oldArray[element].call(this, ...arguments)
}
});
observer(data) // 监听对象,让其处于响应式
function observer(data) { // 定义监听的方法
if(typeof !data === 'object' || data === null) { // 判断是否是对象类型的数据
return data
}
if(Array.isArray(data)) { // 判断是否是数组,是数组就改变原型
data.__proto__ = newArray
}
for (let key in data) {
defineReactive(data, key, data[key])
}
}
function defineReactive(data, key, value) {
if(typeof value === 'object'){ // 判断对象的内部数据是不是对象,是就进行递归处理。
observer(value)
}
Object.defineProperty(data, key, { // 通过Object.defineProperty进行数据劫持
get () { // get进行监听读取返回原数据
return value
},
set (newValue) { // set进行修改监听,赋值新数据
if(value !== newValue){
value = newValue
observer(value) // 这里判断赋的新的值是不是对象类型,进行监听
console.log('更新视图')
}
}
})
}
data.color.unshift()
console.log(data)
vue给对象进行增加或者删除某元素可以通过vue.set或vue.$set(通过vue实例),vue.delete方法。