VUE3学习记录二：reactive和shallowReactive

一、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 的区别：

1. ref 常用来定义基本数据类型。reactive 常用来定义复杂数据类型
2. 通过 reactive 定义基本数据类型控制台会警告，并且不具备响应式
3. 通过 ref 定义的数据 在 js 中使用的时候需要加上 .value，在 html 中不需要加 .value 通过 reactive 定义的数据 均不需要加上 .value

 二、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 ++
}

 

原文地址：https://www.jb51.cc/wenti/3283003.html