Vue3的watch属性
vue3的watch属性的个人总结,分析与vue2的区别
·
watch属性
与计算属性相同的是,watch也可以使用vue2的老写法,但不推荐这么做
watch监视ref所定义的一个或多个响应式数据
watch(监视的数据,(newvalue,oldvalue)=>{},监视配置)
- watch函数里面可以写三个参数,分别是监视的数据,回调函数,监视属性的配置
- 监视属性可以传递多个,每次更改属性时newvalue和oldvalue都是一个数组,只有监视的对象发生改变的对应的数组的数据才会变化
- 我们的第三个参数,用于监视配置,比如{immediate:true}
watch 监视reactive定义的响应式数据
watch(监视的数据,(newvalue,oldvalue)=>{},监视配置)
- watch在监视reactive定义的响应式数据时,newvalue和oldvalue是一个值,会出现oldvalue丢失的问题
- watch在监视reactive定义的响应式数据时,强制开启深度监视
- 监视reactive的对象的某个属性时,监视的数据要写成函数形式,oldvalue不会出现问题
- 监视reactive的对象的某些属性时,监视的数据要写成函数形式,oldvalue不会出现问题
小总结
-
watch监视对象为某个值
-
watch监视的目标是一个普通的值,比如ref定义的非对象类型的数据,watch配置项(监视的数据,回调函数,监视配置),回调函数的oldvalue可以正常使用
-
watch监视的目标为对象的某个值,比如reactive定义的对象的某个属性xxx,watch配置项(监视的数据,回调函数,监视配置),监视的数据要写成函数形式,()=>对象.xxx,回调函数的oldvalue可以正常使用
-
watch(()=>person.name,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值",newvalue,oldvalue);})
-
-
watch监视对象为多个值
-
watch监视的目标为多个普通的值,要写成数组的形式,回调函数的value也会是数组形式,oldvalue可以正常使用
-
watch监视的目标为对象的多个值,要写成数组的形式,同时每个数据也要写成函数形式,oldvalue可以正常使用
-
watch([()=>person.name,()=>person.address],(newvalue,oldvalue)=>{console.log("这是对象的某些属性的值",newvalue,oldvalue);})
-
-
watch监视对象为对象
-
watch监视的目标为reactive定义的响应式对象,newvalue和oldvalue是一个值,会出现oldvalue丢失的问题,而且强制开启深度监视
-
watch监视的目标为ref定义的响应式对象,要使用对象.value或者配置深度监视才能监测的到,oldvalue也会丢失
-
watch监视的目标为对象的属性(此属性也是个对象),此时也会出现oldvalue丢失的问题,但 是 ! 要开启深度监视才能监测的到该属性 !
-
watch(person,(newvalue,oldvalue)=>{console.log("这是对象",newvalue,oldvalue);}) watch(()=>person.job,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值也是个对象并且开启了深度监视",newvalue,oldvalue);},{deep:true})
-
-
<template> <div class="hello"> <h1>姓名:<input type="text" v-model="person.name"></h1> <h1>地址:<input type="text" v-model="person.address"></h1> <h1>{{person.message}}</h1> <button @click="person.name+=`~`">姓名按钮</button> <button @click="person.address+=`$`">地址按钮</button> <button @click="person.job.j1.salary++">加工资</button> </div> </template> <script> import { reactive } from '@vue/reactivity' import { watch } from '@vue/runtime-core' export default { name: 'HelloWorld', setup() { let person=reactive({ name:"魈" ,address:"璃月",job:{j1:{salary:2000}} }) watch(()=>person.name,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值",newvalue,oldvalue);}) watch([()=>person.name,()=>person.address],(newvalue,oldvalue)=>{console.log("这是对象的某些属性的值",newvalue,oldvalue);}) watch(person,(newvalue,oldvalue)=>{console.log("这是对象",newvalue,oldvalue);}) watch(()=>person.job,(newvalue,oldvalue)=>{console.log("这是对象的某个属性的值也是个对象并且开启了深度监视",newvalue,oldvalue);},{deep:true}) return {person} } } </script>
watchEffect函数
- watchEffect函数会自动配置immediate属性,即自动调用一次
- watchEffect函数不用说明监视哪个属性,回调中用到那个属性,属性发生变化了会自动调用watchEffect函数回调函数
watchEffect(()=>{
const a=person.name
console.log("watchEffect被调用了",a);
})
- 第一次发,有些图片传不上去,自己写的笔记,可能比较简陋
更多推荐
已为社区贡献1条内容
所有评论(0)