vue3 setup新增watchEffect属性

最新推荐文章于 2024-06-18 13:40:40 发布

万事胜意sy

最新推荐文章于 2024-06-18 13:40:40 发布

阅读量552

点赞数

分类专栏：笔记文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_50736511/article/details/121856144

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

本文通过一个Vue组件实例展示了watchEffect的使用，当组件内的`sum`或`person.habbits`变化时，watchEffect会重新运行。详细介绍了如何在Vue中设置响应式属性并监听其变化，包括对象属性的深度监听。同时，提供了修改不同属性并触发相应更新的函数，深入理解Vue的响应式原理。

摘要由CSDN通过智能技术生成

在这里插入图片描述

只要watchEffect(()=>{ }）内部无论哪一个值发生变化都会重新执行 watchEffect函数

<template >
 姓名:{{person.name}}
 <br>
年龄:{{person.age}}
<br>
新爱好:{{person.habbits.new_hits}}
<br>
旧爱好:{{person.habbits.old_hits}}
<br>
sum:{{sum}}
<br>
meg:{{meg}}
<br>
<br>
<button @click="change_sum">改变sum</button><button @click="change_meg">改变meg</button>
<br>
<br>
<button @click="change_name">修改姓名
</button>   &nbsp; <button @click="change_age">修改年龄</button>&nbsp;<button @click="change_newhits">修改新爱好</button>&nbsp;<button @click="change_oldhits">修改旧爱好</button>
</template>
<script>
import {  reactive, ref } from '@vue/reactivity';
import { watch, watchEffect } from '@vue/runtime-core';
// 引入自定义hooks
export default {
   person:{
     immediate:true,
     deep:true,
     handler(newvalue,oldvalue){
       console.log(newvalue,oldvalue);
     }
   },
  
  setup() {
    let person=reactive({
      name:"李四",
      age:12,
      habbits:{
        new_hits:["吃","喝","玩"],
        old_hits:["打代码","打代码","打代码"]
      }
    })
    let sum=ref(0)
    let meg=ref("你好")
    function change_sum(){
      sum.value++
    }
    function change_meg(){
      meg.value="世界"
    }
    function change_name(){
      person.name="张三"
    }
    function change_age(){
           person.age++
    }
    function change_newhits(){
            person.habbits.new_hits=["臭美","玩"]
    }
    function change_oldhits(){
      person.habbits.old_hits=["吃吃吃","谈恋爱"]
    }
   watchEffect(()=>{
     let a=sum.value
     let b=person.habbits.new_hits
     console.log("sum或者person.habbits改变了");
   })
    return{
     person,
     sum,
     meg,
   change_name,
   change_sum,
   change_age,
   change_newhits,
   change_oldhits,
      change_meg
    }
  }
};
</script>

<style>
</style>