1、Vue3的响应式原理和Vue2有什么不同呢?
答:数据是可以进行观测的,也就是说在读取和设置的时候可以劫持它来做其他操作;
注意:数据响应式和视图更新是没有关系的!!!响应式只是一种机制,一种数据变化的侦测机制,实现这种机制的方法也不是唯一的,就例如vue2和vue3实现响应式的方法是不同的
遍历属性,对每一个属性的值用Object.defineProperty进行getter和setter的改造;
//get
function track(data, key){
console.log('get data:', key)
}
// set
function trigger(data, key, value){
console.log('set data:', key,'-', value)
}
function observe(data){
if(!data || typeof data !== 'object') return
for(let key in data){
let value = data[key]
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get(){
track(data, key)
return value
},
set(newVal){
trigger(data, key, newVal)
value = newVal
}
})
if(typeof value === 'object'){
observe(value)
}
}
}
var obj = {
name: 'win',
family: [2,5,8]
}
observe(obj)
obj.name = 'ten'
obj.family[3] = 6 //不是响应式,没有被Object.defineProperty包装一下
obj.age = 18 //不是响应式,没有被Object.defineProperty包装一下
console.log(obj, 'obj')
const obj = {
name: 'win'
}
const handler = {
get: function(target, key){
console.log('get--', key)
return Reflect.get(...arguments)
},
set: function(target, key, value){
console.log('set--', key, '=', value)
return Reflect.set(...arguments)
}
}
const data = new Proxy(obj, handler)
data.name = 'ten'
console.log(data.name,'data.name22')
reactive是一个返回Proxy对象的函数;
function track(target, key){
console.log('get--', key)
}
function trigger(target, key, value){
console.log('set--', key, '=', value)
}
function reactive(obj){
const handler = {
get(target, key, receiver){
track(target, key)
const value = Reflect.get(...arguments)
if(typeof value === 'object'){
return reactive(value)
}else{
return value
}
},
set(target, key, val, receiver){
trigger(target, key, val)
return Reflect.set(...arguments)
}
}
return new Proxy(obj, handler)
}
const obj = {
name: 'win'
}
const data = reactive(obj)
data.list = [5] //响应式 这两句话是执行Reflect.set()
data.age = 18 //响应式
console.log(data, 'data111')