开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情
reactive
作用: 定义多个数据的响应式
const proxy = reactive(obj)
接收一个普通对象然后返回该普通对象的响应式代理器对象
响应式转换是"深层的": 会影响对象内部所有嵌套的属性
内部基于ES6的 proxy 实现,通过代理对象操作源对象内部数据都是响应式的
setup() {
const obj: any = {
name: '小明',
age: 20,
wife: {
name: '小红',
age: 18,
cars: ['奔驰', '宝马', '奥迪']
}
}
}
//把数据变成响应式的数据
//返回的是一个proxy的代理对象,被代理的目标对象就是obj对象
//user现在是代理对象, obj是目标对象
//user对象的类型是Proxy
const user = reactive(obj)
//方法
function updateUser() {}
const updateUser = () => {
user.gender = '男' //界面可以更新渲染,而且这个数据最终也添加到了obj对象了
delete user.age //界面更新渲染了, obj中缺失没有了age这个属性
}
return {
user,
updateUser
}
vue3响应式 深层检出
cosnt proxyUser = new Proxy(user, {
//获取目标对象的某个属性值
get(target, prop) {
console.log('get调用了')
return Reflect.get(target, prop)
},
//修改目标对象的属性值/为目标对象添加新的属性
set(target, prop, val) {
return Reflect.set(target, prop, val)
},
//删除目标对象上的某个属性
deleteProperty(target, prop) {
return Reflect.deleteProperty(target, prop)
}
})
//通过代理对象获取目标对象中的某个值
console.log(proxyUser.name);
//通过代理对象更新目标对象上的某个属性值
proxyUser.name = '123'
//通过代理对象向目标对象中添加一个新的属性
proxyUser.gender = '男'
delete proxyUser.name
//更新目标对象中某个属性对象中的属性值
proxyUser.wife.name = '123'
setup执行时机
//setup是在beforeCreate生命周期回调之前就执行一次
//由此可以推断出: setup在执行的时候,当前的组件还未创建出来, 导致this不能使用
//this是undefined,说明, 就不能通过this再去调用data/computed.methods中的相关内容
setup() {
console.log('setup执行了', this)
return {
//setup中一般都是返回一个对象,对象中的属性和方法都可以在html模板中直接使用
}
}
