一、reactive
注意:reactive通常是用来定义复杂数据类型的数据,如果用来定义基本数据,那么定义的变量将不具备响应式效果
let people = reactive({
name:'李雷',
age:18,
})
console.log(people); // Proxy {name: '李雷', age: '18'}
console.log(people.name); // 李雷
(1)、错误用法:使用reactive定义基本数据类型的数据
let name = reactive('李雷') ;
// 控制台提示 不能设置为响应式
value cannot be made reactive: 李雷
function changeName(){
name += '~'; //值会改变,但是不会响应到页面上
}
(2)、正确用法
let people = reactive({
name:'李雷',
age:18,
happy:['抽烟','喝酒','烫头']
})
// 使用 reactive 定义的对象不需要通过 .value 调用
// 无论有几层,都是响应式内容
// 数组同理
function changeProp(){
people.name += '~'
people.age ++
people.happy[0] = '学习'
}
与 ref 的区别:
二、shallowReactive
定义: reactvie 的浅层作用形式。
简单来说就是:通过 shallowReactive 定义的对象,只监听第一级属性,不监听深层次属性
例如:
shallowReactive({
name:'于成龙',
job:{
j1:{
salary:30
}
}
})
在这个对象中,name 和 job 属于对象的第一级属性,发生改变时能够响应到页面上,实时改变
而 j1 和 salary就属于深层次的属性,在发生改变时,数据变动,但是无法响应到页面上。
let shallowObj = shallowReactive({
name:'于成龙',
job:{
j1:{
salary:30
}
}
})
function changeName(){
// name属于 shallowObj的第一级属性,能被监听到,具有响应式
shallowObj.name += '↑'
}
function changeSalary(){
// 深层次的数据改变,不会响应到页面上
shallowObj.job.j1.salary ++
}