reactivo vs ref en vue3
Desde la perspectiva de la definición de datos:
- ref se utiliza para definir: tipos de datos básicos
- Reactivo se usa para definir: datos de tipo objeto (o matriz)
Observaciones: ref también se puede usar para definir datos de tipo objeto (o matriz), que se convertirán automáticamente en un objeto proxy internamente a través de reactivo
Desde la perspectiva del principio:
3. ref implementa la capacidad de respuesta (secuestro de datos) a través de get y set de Object.defineProperty()
4. reactive implementa la capacidad de respuesta (secuestro de datos) a través de Proxy y manipula los datos dentro del objeto de origen a través de Reflect
Desde la perspectiva del uso:
6. Ref define datos: .value es necesario para la manipulación de datos y .value no es necesario para lectura directa en la plantilla al leer datos
7. Datos definidos por reactivo: .value no es necesario para ambos manipulacion y lectura de datos
ver en vue3
1. Al monitorear los datos reactivos definidos por reactivo: oldValue no puede obtener el valor correcto, y se obliga a habilitar el monitoreo profundo (la configuración profunda no es válida) 2. Al
monitorear un determinado atributo en los datos reactivos definidos por reactivo: el la configuración profunda es válida
y específica. Consulte el código y los comentarios a continuación.
watch([sum,msg], (newValue,oldValue)=>{ console.log('nuevo valor',newValue); //['suma's newValue', 'msg's newValue'] console.log('old value', oldValue); //['sum's oldValue', 'msg's oldValue'] } , { inmediate: true, deep:true }) Aquí, el deep de vue3 es un poco problemático, no puedes usar deep, (profundidad implícita forzada)
<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>
función de efecto de reloj
watchEffect( ()=>{Quienquiera que use aquí monitoreará a quienquiera que use, y se producirá una devolución de llamada en el interior} return { } )
- La rutina de vigilancia es: no solo especificar el atributo de monitoreo, sino también especificar la devolución de llamada de monitoreo
- La rutina de watchEffect es: no es necesario especificar qué atributo monitorear, qué atributo se usa en la devolución de llamada de monitoreo, luego qué atributo monitorear
- watchEffect es un poco como computado: pero computado presta atención al valor calculado (el valor de retorno de la función de devolución de llamada), por lo que el valor de retorno debe escribirse, mientras que watchEffect presta más atención al proceso (el cuerpo de la función de devolución de llamada) , por lo que no es necesario escribir el 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>