Vue3中的computed,watch,watchEffect如何使用

一、computed

  姓:

  名:

  全名:{{person.fullname}}

  全名:import {reactive,computed} from 'vue'export default { name: 'HelloWorld', setup(){ let person = reactive({ firstName:"张", lastName:"三" }) //computed简写形式,没考虑修改 /*person.fullname = computed(()=>{ return person.firstName+"-"+person.lastName; })*/ person.fullname = computed({ get(){ return person.firstName+"-"+person.lastName; }, set(value){ const nameArr = value.split('-'); person.firstName = nameArr[0]; person.lastName = nameArr[1]; } }) return{ person, } }}

登录后复制

二、watch

1、与 vue2.x 中 watch 配置功能一致

2、两个小”坑”:

监视 reactive 定义的响应式数据时: oldValue 无法正确获取、强制开启了深度监视(deep配置失效)

监视 reactive 定义的响应式数据中某个属性时:deep 配置有效

vu2 的写法

  

当前求和为:{{ sum }}

  import {ref} from 'vue'export default { name: 'Demo', watch: { /*sum(oldValue,newValue){ console.log("sum发生了变化",oldValue,newValue); }*/ sum: { immediate: true, deep:true, handler(newValue,oldValue) { console.log("sum发生了变化", newValue, oldValue); } } }, setup() { let sum = ref(0); return { sum, } }}

登录后复制

Vue3 中这样写

1、情况一:监视ref所定义的一个响应式数据

立即学习“前端免费学习笔记(深入)”;

  

当前求和为:{{ sum }}

  >import {ref, watch} from 'vue'export default { name: 'Demo', setup() { let sum = ref(0); let msg = ref("你好啊"); //情况一:监视ref所定义的一个响应式数据 watch(sum, (newValue, oldValue) => { console.log("sum发生了变化", newValue, oldValue); }) return { sum } }}

登录后复制

Vue3中的computed,watch,watchEffect如何使用

watch 还可以传一个配置项,把 immediate 等配置传进去:

watch(sum, (newValue, oldValue) => {      console.log("sum发生了变化", newValue, oldValue);    },{immediate:true})

登录后复制

2、情况二:当有多个信息需要同时监视时

  

当前求和为:{{ sum }}

    
  

信息为:{{ msg }}

  import {ref, watch} from 'vue'export default { name: 'Demo', setup() { let sum = ref(0); let msg = ref("你好啊"); //情况二:监视ref所定义的多个响应式数据 watch([sum,msg],(newValue, oldValue) => { console.log("sum发生了变化", newValue, oldValue); }) return { sum, msg } }}

登录后复制

3、情况三:监视reactive所定义的一个响应式数据

  

姓名:{{ person.name }}

  

年龄:{{ person.age }}

  

薪资:{{ person.job.j1.salary }}K

      import {reactive, watch} from 'vue'export default { name: 'Demo', setup() { let person = reactive({ name: "张三", age: 18, job:{ j1:{ salary:20 } } }) //情况三:监视reactive所定义的一个响应式数据全部属性 // 1\注意:无法正确获取oldvalue // 2\注意:强制开启了深度监视(deep配置无效) watch(person, (newValue, oldValue) => { console.log("person发生了变化", newValue, oldValue); }) return { person } }}

登录后复制

4、情况四:监视reactive所定义的一个响应式数据某个属性

//情况四:监视reactive所定义的一个响应式数据某个属性    watch(()=>person.name, (newValue, oldValue) => {      console.log("person的name发生了变化", newValue, oldValue);    })

登录后复制

Vue3中的computed,watch,watchEffect如何使用

5、情况五:监视 reactive 所定义的一个响应式数据某些属性

//情况五:监视reactive所定义的一个响应式数据某个属性    watch([()=>person.name,()=>person.age], (newValue, oldValue) => {      console.log("person的name或age发生了变化", newValue, oldValue);    })

登录后复制

Vue3中的computed,watch,watchEffect如何使用

 6、特殊情况,监视对象中的某个对象属性,要开始deep:true

watch(()=>person.job, (newValue, oldValue) => {console.log("person的job发生了变化", newValue, oldValue);},{deep:true})//由于监视的是reactive对象中的某个属性,deep奏效

登录后复制

7、监视 ref 定义的对象响应数据,需要.value或deep:true

let person = ref({      name: "张三",      age: 18,      job:{        j1:{          salary:20        }      }    })    watch(person.value, (newValue, oldValue) => {      console.log("person的value发生了变化", newValue, oldValue);    })    或    watch(person, (newValue, oldValue) => {      console.log("person的value发生了变化", newValue, oldValue);    },{deep:true})

登录后复制

三、watchEffect

watch 的套路是:既要指明监视的属性,也要指明监视的回调

watchEffect 的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性

watchEffect有点像computed:

。但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值

。而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值

//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调watchEffect(()=>{const xl = sum.valueconst x2 = person.ageconsole.log( "watchEffect配置的回调执行了")})

登录后复制

例如还用上边的例子:

import {reactive,watchEffect} from 'vue'export default {  name: 'Demo',  setup() {    let person = reactive({      name: "张三",      age: 18,      job:{        j1:{          salary:20        }      }    })    watchEffect(()=>{      const x1 = person.name;      console.log("watchEffect所指定的回调执行了"+x1);    })    return {      person    }  }}

登录后复制

最后,我们使用 watch 和 watchEffect 实现姓名的例子

  姓:  名:  全名:{{fullName}}  全名:import {defineComponent, reactive, ref,watch,watchEffect} from 'vue';export default defineComponent({  setup(){    let person = reactive({      firstName:"张",      lastName:"三"    });    const fullName = ref('');    watch(person,({firstName,lastName})=>{      fullName.value = firstName+"-"+lastName    },{immediate:true})    //不用使用immediate,默认执行一次    /*watchEffect(()=>{      fullName.value = person.firstName+"-"+person.lastName    })*/    watchEffect(()=>{      const name = fullName.value.split('-');      person.firstName = name[0];      person.lastName = name[1];    })    return{      person,      fullName    }  }});#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}

登录后复制

以上就是Vue3中的computed,watch,watchEffect如何使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3230207.html

(0)
上一篇 2025年4月1日 16:30:26
下一篇 2025年4月1日 16:30:36

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论