reativo vs. ref em vue3
Do ponto de vista da definição de dados:
- ref é usado para definir: tipos básicos de dados
- Reativo é usado para definir: dados do tipo objeto (ou array)
Observações: ref também pode ser usado para definir dados do tipo objeto (ou array), que serão convertidos automaticamente em um objeto proxy internamente por meio de reativo
Da perspectiva do princípio:
3. ref implementa capacidade de resposta (seqüestro de dados) por meio de get e set de Object.defineProperty()
4. reativo implementa capacidade de resposta (seqüestro de dados) por meio de Proxy e manipula os dados dentro do objeto de origem por meio de Reflect
Do ponto de vista do uso:
6. Ref define dados: .value é necessário para manipulação de dados e .value não é necessário para leitura direta no modelo ao ler dados
7. Dados definidos por reativo: .value não é necessário para ambos manipulação e leitura de dados
assistir em vue3
1. Ao monitorar os dados reativos definidos por reativo: oldValue não pode obter o valor correto e o monitoramento profundo é forçado a ser ativado (a configuração profunda é inválida) 2. Ao
monitorar um determinado atributo nos dados reativos definidos por reativo: o a configuração profunda é válida
e específica Por favor, veja o código e os comentários abaixo
watch([sum,msg], (newValue,oldValue)=>{ console.log('new value',newValue); //['sum's newValue', 'msg's newValue'] console.log('old value', oldValue); //['sum's oldValue', 'msg's oldValue'] } , { imediato: true, deep:true }) Aqui, o deep de vue3 é um pouco problemático, você não pode usar deep, (implícito forçado deep)
<template>
<h1>当前求和为： {
{
sum}}</h1>
<button @click="sum++">点我+1</button>
<hr>
<h1>当前信息为： {
{
msg}}</h1>
<button @click="msg+='!' ">修改信息</button>
<hr>
<h2>姓名： {
{
person.name}}</h2>
<h2>年龄： {
{
person.age}}</h2>
<button @click="person.name += '~' ">修改姓名</button> <button @click="person.age++">增长年龄</button>
</template>
<script>
//使用setup的注意事项
import {
watch,ref,reactive } from 'vue'
export default {
name: 'test5',
props: ['msg'],
emits:['hello'],
setup(){
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
name: '张三',
age: 18,
job:{
salary: '15k'
},
})
//由于这里的this是指的是undefined，所以使用箭头函数
//情况一：监视ref所定义的一个响应式数据
// watch(sum, (newValue,oldValue)=>{
// console.log('新的值',newValue);
// console.log('旧的值',oldValue);
// })
//情况二：监视ref所定义的多个响应式数据
watch([sum,msg], (newValue,oldValue)=>{
console.log('新的值',newValue); //['sum的newValue', 'msg的newValue']
console.log('旧的值',oldValue); //['sum的oldValue', 'msg的oldValue']
},{
immediate: true,deep:true}) //这里vue3的deep是有点小问题的，可以不用deep，（隐式强制deep）
//情况三：监视reactive定义的所有响应式数据,
//1.此处无法获取正确的oldValue（newValue与oldValue是一致值）,且目前无法解决
//2.强制开启了深度监视（deep配置无效）
/**
* 受到码友热心评论解释： 此处附上码友的解释供大家参考：
* 1. 当你监听一个响应式对象的时候，这里的newVal和oldVal是一样的，因为他们是同一个对象【引用地址一样】，
* 即使里面的属性值会发生变化，但主体对象引用地址不变。这不是一个bug。要想不一样除非这里把对象都换了
*
* 2. 当你监听一个响应式对象的时候，vue3会隐式的创建一个深层监听，即对象里只要有变化就会被调用。
* 这也解释了你说的deep配置无效，这里是强制的。
*/
watch(person, (newValue,oldValue)=>{
console.log('新的值',newValue);
console.log('旧的值',oldValue);
})
//情况四：监视reactive对象中某一个属性的值，
//注意： 这里监视某一个属性的时候可以监听到oldValue
watch(()=>person.name, (newValue,oldValue)=>{
console.log('新的值',newValue);
console.log('旧的值',oldValue);
})
//情况五：监视reactive对象中某一些属性的值
watch([()=>person.name,()=>person.age], (newValue,oldValue)=>{
console.log('新的值',newValue);
console.log('旧的值',oldValue);
})
//特殊情况: 监视reactive响应式数据中深层次的对象，此时deep的配置奏效了
watch(()=>person.job, (newValue,oldValue)=>{
console.log('新的值',newValue);
console.log('旧的值',oldValue);
},{
deep:true}) //此时deep有用
return {
sum,
msg,
person,
}
},
}
</script>
função watchEffect
watchEffect( ()=>{Quem você usar aqui monitorará quem você usar, e um retorno de chamada ocorrerá dentro} return { } )
- A rotina do watch é: não apenas especificar o atributo de monitoramento, mas também especificar o retorno de chamada do monitoramento
- A rotina de watchEffect é: não há necessidade de especificar qual atributo monitorar, qual atributo é usado no callback de monitoramento e qual atributo monitorar
- watchEffect é um pouco como computed: mas computered presta atenção ao valor calculado (o valor de retorno da função de retorno de chamada), então o valor de retorno deve ser escrito, enquanto watchEffect presta mais atenção ao processo (o corpo da função de retorno de chamada) , então não há necessidade de escrever o valor de retorno
<script>
//使用setup的注意事项
import {
ref,reactive,watchEffect } from 'vue'
export default {
name: 'test5',
props: ['msg'],
emits:['hello'],
setup(){
let sum = ref(0)
let msg = ref('你好啊')
let person = reactive({
name: '张三',
age: 18,
job:{
salary: '15k'
},
})
//用处： 如果是比较复杂的业务，发票报销等，那就不许需要去监听其他依赖，只要发生变化，立马重新回调
//注重逻辑过程，你发生改变了我就重新执行回调，不用就不执行，只执行一次
watchEffect(()=>{
//这里面你用到了谁就监视谁，里面就发生回调
const x1 = sum.value
console.log('我调用了');
})
return {
sum,
msg,
person,
}
},
}
</script>