watch监视与watchEffect监视

已于 2024-09-08 23:23:49 修改
阅读量535 收藏 8
点赞数 10
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2024-09-08 23:02:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46515691/article/details/141942403
版权

Watch

什么是watch

watch 的作用是用于监测响应式属性的变化，并在属性发生改变时执行特定的操作，它是 Vue 中的一种响应式机制，允许你在数据发生变化时做出相应的响应，执行自定义的逻辑。

watch 使得在响应式属性变化时能够有更多的控制权和灵活性，让你的组件能够更好地响应数据的变化并执行相应的逻辑。
watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。

监听数据类型

1.一个 ref() 定义的响应式数据
2. 一个 reactive() 定义的响应式数据
3. 一个getter 函数，返回一个值
4. 以上三种组成的数组。

1. ref定义的基本数据类型

<script lang="ts" setup name="Car">
import { ref, watch } from 'vue';

    let sum = ref(0);
    function addSum() {
        sum.value++;
    }

    // 监听sum变化,当sum大于10时停止监听
    // 这里watch中的sum不要加value,因为watch监视的是一个ref响应式对象，加了value就成了监视属性
    // watch()返回一个停止函数,调用该函数可以停止监听
    let stopWatch = watch(sum, (newVal, oldVal) => {
      console.log('sum变化了', newVal, oldVal);
      if (newVal > 10) {
        stopWatch(); // 停止监听
      }
    })
</script>

<template>
  <div class="class">
    <h2>当前计数：{{ sum }}</h2>
    <br/>
    <button @click="addSum">sum+1</button>
  </div>
</template>

<style scoped>
  .class {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%; /* 使内容占满整个高度 */
      color: rgb(214, 12, 12);
      font-size: 20px;
  }

  button {
      background-color: blue;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      margin-top: 10px;
  }
</style>

在这里插入图片描述

2.ref定义的对象数据类型

<script lang="ts" setup name="Watch02">
import { ref, watch } from 'vue';
  let person = ref({ name: '张三', age: 20 });

  function changeName() { // 改变姓名
    person.value.name = '李四'
  }


  function changeAge() { // 改变年龄
    person.value.age ++;
  }

  function changePerson() { // 改变整个人
    person.value = { name: '王五', age:  90}
  }

  // 监听person的变化,只有执行changePerson函数时才会触发，
  // 因为changeName和changeAge函数不会改变person的地址，只改变了内部属性的值，所以不会触发
  // watch(person, (newVal, oldVal) => { // 监听person的变化
  //   console.log('person 变化了', newVal, oldVal);
  // });
  
  // 深度监听person的变化，会监听到内部属性的变化
  // changeName和changeAge函数也会触发
  watch(person, (newVal, oldVal) => { // 监听person的变化
    console.log('person 变化了', newVal, oldVal);
  }, { deep: true });

</script>

<template>
  <div class="class">
    <h2>姓名：{{ person.name }}</h2>
    <br/>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<style scoped>
  .class {
    background-color: #f8f9fa; /* 背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    text-align: center; /* 文本居中 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
  }

  button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 10px 0 10px; /* 外边距 */
    transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */
  }
</style>

3.reactivate 定义对象类型数据

监听reactive定义的 对象类型 数据，默认是开启深度监视的，且无法取消深度监视。

<script lang="ts" setup name="Watch03">
import { reactive, watch } from 'vue';
  let person = reactive({ name: '张三', age: 20 });

  function changeName() { // 改变姓名
    person.name = '李四'
  }

  function changeAge() { // 改变年龄
    person.age ++;
  }

  function changePerson() { // 改变整个人
    Object.assign(person, { name: '王五', age:  90})
  }

  // 监听reactive定义的 对象类型 数据，默认是开启深度监视的，就算person变化了一点，都会触发回调函数
  watch(person, (newVal, oldVal) => { // 监听person的变化
    console.log('person 变化了', newVal, oldVal);
  });

</script>

<template>
  <div class="class">
    <h2>姓名：{{ person.name }}</h2>
    <br/>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<style scoped>
  .class {
    background-color: #f8f9fa; /* 背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    text-align: center; /* 文本居中 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
  }

  button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 10px 0 10px; /* 外边距 */
    transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */
  }
</style>

在这里插入图片描述

4. 监视ref或reactive定义的对象数据类型中的某个属性

<script lang="ts" setup name="Watch04">
import { reactive, watch } from 'vue';
    let person = reactive({
        name: '张三',
        age: 20,
        Car: {
            name: '宝马',
            color: '红色'
        }
    });

    function changeName() {
        person.name= '李四'
    }

    function changeAge() {
        person.age += 1;
    }

    function changeCarName() {
        person.Car.name = '奔驰';
    }

    function changeCarColor() {
        person.Car.color = '蓝色';
    }

    function changeCar() {
        person.Car= { name: '兰博基尼', color: '黑色' }
    }

    // 监听person中某个基本类型的值的变化，这里只监视person.name，
    // 要写成一个getter函数，() => { return person.name }，这里简写了
    watch(() => person.name, (newVal, oldVal) => {
        console.log('person changed', newVal, oldVal);
    });

    // 监听person中某个对象的值的变化，这里监视person.Car，
    // 加上deep:true选项，可以监视对象内部值的变化(car.name, car.color)
    // 不加deep:true选项，只监视car对象本身的变化
    watch(() => person.Car, (newVal, oldVal) => {
        console.log('person changed', newVal, oldVal);
    }, { deep: true });
</script>

<template>
  <div class="class">
    <h2>姓名：{{ person.name }}</h2>
    <br/>
    <h2>年龄：{{ person.age }}</h2>
    <br/>
    <h2>车品牌：{{ person.Car.name }}</h2>
    <br/>
    <h2>车颜色：{{ person.Car.color }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCarName">修改车品牌</button>
    <button @click="changeCarColor">修改车颜色</button>
    <button @click="changeCar">修改整辆车</button>
  </div>
</template>

<style scoped>
  .class {
    background-color: #f8f9fa; /* 背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    text-align: center; /* 文本居中 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
  }

  button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 10px 0 10px; /* 外边距 */
    transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */
  }
</style>

5.上述类型数组

<script lang="ts" setup name="Watch05">
import { reactive, watch } from 'vue';
    let person = reactive({
        name: '张三',
        age: 20,
        Car: {
            name: '宝马',
            color: '红色'
        }
    });

    function changeName() {
        person.name= '李四'
    }

    function changeAge() {
        person.age += 1;
    }

    function changeCarName() {
        person.Car.name = '奔驰';
    }

    function changeCarColor() {
        person.Car.color = '蓝色';
    }

    function changeCar() {
        person.Car= { name: '兰博基尼', color: '黑色' }
    }
	// 监听person的name和Car属性
    watch([() => person.name, () => person.Car], (newVal, oldVal) => {
        console.log('person changed', newVal, oldVal);
    }, { deep: true });

</script>

<template>
  <div class="class">
    <h2>姓名：{{ person.name }}</h2>
    <br/>
    <h2>年龄：{{ person.age }}</h2>
    <br/>
    <h2>车品牌：{{ person.Car.name }}</h2>
    <br/>
    <h2>车颜色：{{ person.Car.color }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCarName">修改车品牌</button>
    <button @click="changeCarColor">修改车颜色</button>
    <button @click="changeCar">修改整辆车</button>
  </div>
</template>

<style scoped>
  .class {
    background-color: #f8f9fa; /* 背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    text-align: center; /* 文本居中 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
  }

  button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 10px 0 10px; /* 外边距 */
    transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */
  }
</style>

WatchEffect

使用watch监视时需要传入需要监视的对象，当需要监视多个对象时就要先把这些对象先告诉watch，然后才能监视。但是当需要监视的对象太多时，需要将他们全部告诉watch，些许麻烦。watchEffect可以省略这一步，直接写对象变化后的处理。

<script lang="ts" setup name="WatchEffect">
import { ref, watchEffect } from 'vue';
    let temp = ref(30)
    let height = ref(10)

    function changeHeight() {
      height.value += 10
    }

    function changeTemp() {
      temp.value += 10
    }

    // watchEffect 不需要传值，直接写监听对象处理函数
    watchEffect(() => {
      console.log('watchEffect', temp.value)
      if (temp.value > 50) {
        console.log('温度超过50度了，现在是', temp.value, '度')
      }
    })
</script>

<template>
  <div class="class">
    <h2>温度：{{ temp }}</h2>
    <br/>
    <h2>高度：{{ height }}</h2>
    <br/>
    <button @click="changeTemp">修改温度</button>
    <button @click="changeHeight">修改高度</button>
  </div>
</template>

<style scoped>
  .class {
    background-color: #f8f9fa; /* 背景颜色 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影 */
    text-align: center; /* 文本居中 */
    max-width: 500px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
  }

  button {
    background-color: blue;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin: 10px 10px 0 10px; /* 外边距 */
    transition: background-color 0.3s ease; /* 按钮背景颜色过渡效果 */
  }
</style>

在这里插入图片描述

有一个好名字
关注
  • 10
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 监听属性
csbysj2020的博客
07-07 489
Vue.js 是一个流行的前端框架，以其响应式系统和组件化开发而闻名。在 Vue3 中，监听属性（Watchers）是一个核心功能，允许开发者监控和响应数据的变化。本文将详细介绍 Vue3 中监听属性的使用方法、场景和最佳实践。
五、【Vue3】——计算属性与监视（computed&watch&watchEffect）
yifei1234567的博客
04-02 2112
Vue3中的计算属性computed和监视watch与Vue2中的配置功能一致，但监视watch在用的时候却存在两个小坑，而且Vue3出现了watchEffect函数，能够更智能化去监视一个对象，下面与小编一起学习探讨一下吧。
【Vue3】watch 监视对象类型数据中的某个属性
又言又语
07-29 733
本文介绍 Vue3 中如何使用watch函数监视ref或reactive定义的对象类型数据中的某个属性。
Vue3的监听属性watch和计算属性computed
qq_43151592的博客
04-18 1610
Vue3的监听属性watch和计算属性computed
Vue3 watch 监听对象数组中对象的特定属性
忧郁的蛋的专栏
05-06 8309
在 Vue 3 中，可以使用 函数来监听对象数组中对象的特定属性。可以通过在回调函数中遍历数组来检查对象的特定属性是否发生变化，并在变化发生时执行相应的操作。例如，假设有一个名为 的对象数组，其中每个对象都有一个名为 的布尔属性和一个名为 的字符串属性，需要监听 属性的变化，并在变化发生时执行相应的操作，可以使用以下代码： 在上面的例子中，使用 函数创建一个名为 的响应式对象数组，并在其内部嵌套了一个对象，该对象具有两个属性 和 。然后，使用 函数来监听数组中所有对象的 属性的变化
watch与watchEffect属性状态侦听器
传播有益的技术文章，力求精准、专业、专心、专享
06-05 1642
计算属性允许声明性地计算衍生值。然而在有些情况下，需要在状态变化时执行一些Effect（额外的逻辑）
[Vue3] - 5 watch与watchEffect用法
最新发布
weixin_45291798的博客
08-09 721
一全部属性firstName:'张',lastName:'三',job:{name:'前端工程师'}});接收的参数newValue与oldValue，person下的job对象改变，watch也能监视到，在vue2中只有开启了deep深度监视才会生效1 无法获取正确的oldValue2 deep设置无效，强制开启深度监视watch监听的是RefImpl或Proxy结构watchEffect监听回调中用到额度属性。
watch和watchEffect
08-22
watch 和 watchEffect 是 Vue 3 中的两个新特性，用于监视响应式数据的变化并执行相应的逻辑。 watch 用于监视单个响应式数据的变化。它接收两个参数：要监视的数据和回调函数。当监视的数据发生变化时，回调函数会...
Vue3 计算属性computed()和监视watch的使用，watchEffect的使用，代码模板
ChuanyangChen的博客
05-27 207
Vue3 计算属性computed()和监视watch的使用，代码模板 computed() <script> import {reactive,computed} from 'vue' export default { name: 'Person', setup(){ let person = reactive({ name:'Ulrich', age:22, }) // 计算属性 - 简写 - 回调函数的形式 person.n
28 在Vue3中监听对象属性
Python私教
12-20 977
更多的时候，我们可能想要监听的是对象中的某个属性。比如，我们提交用户的登录表单，有username，password和re_password的三个属性，我们监听re_password这个属性，一旦发生改变，我们就要判断其和password是否一致，如果不一致，我们就提示给用户，两次密码不一致，请修改。这节课我们来使用这个案例学习一下在Vue3中监听对象属性的基本用法。
Vue3 监视属性详解
m0_68932924的博客
02-16 1587
监视属性是 Vue 提供的一种机制，用于观察和响应 Vue 实例上的数据变化。当被监视的数据发生变化时，我们可以执行一些特定的操作或逻辑。Vue3 中的监视属性通过watch和函数来实现。Vue3 的监视属性提供了强大的功能，允许我们观察和响应 Vue 实例上的数据变化。通过 watch 和 watchEffect 函数，我们可以轻松地监视单个数据源或自动收集依赖，并在数据变化时执行特定的操作或逻辑。此外，Vue3 还提供了深度监视、立即执行和停止监视等高级用法，以满足更复杂的需求。
Vue3 监听、计算属性
renfeideboke的博客
02-24 1010
Vue3 监听、计算属性
Vue3监听属性值
qq_40616713的博客
10-28 1733
Vue3使用watch 监听属性 遇到父组件传递子组件，父组件属性值改变时子组件数据不更新问题,使用watch监听属性解决。 <!--A组件--> <template> <div class="input-container"> <!--子组件B--> <cominput :inputValue="inputValue" /> </div> </template> <script> import {def
vue监听对象中的某个属性
l1830473688的博客
04-27 372
需求：监听 addForm 对象中 protocolBm 的变化 addForm: { name:'', url:'', protocolBm:''//协议 }, 方案一：（直接监听，推荐） watch:{ 'addForm.protocolBm':{ handler: function(val, oldVal) { //动作 }, }, } 方案二：（巧用计算属性） computed: { getProt
Vue3 计算属性，监听属性
cloki的博客
09-30 3355
Vue3 计算属性，监听属性
vue监听对象的属性
zqyzqy22的博客
10-22 330
vue监听对象的属性监听对象的某个属性值变化监听对象的所有属性值变化 监听对象的某个属性值变化 "obj.name": function(newVal, oldVal) { console.log(newVal); }, 监听对象的所有属性值变化 obj: { handler: function(newVal, oldVal) { console.log...
Vue3中watch监听对象的属性值，监听源必须是一个getter函数
热门推荐
qq_45675616的博客
09-08 1万+
Vue3中watch监听对象的属性值，监听源必须是一个getter函数
vue3 watch监视集合
10-28
在Vue3中，watch监视集合可以通过使用watchEffect函数来实现。watchEffect函数会自动追踪其内部使用的响应式数据，并在数据变化时重新运行其内部的函数。因此，可以在watchEffect函数内部使用集合中的数据，并在数据变化时执行相应的操作。例如，可以使用watchEffect函数来监视一个数组的变化，如下所示： ``` import { watchEffect } from 'vue' const myArray = ['apple', 'banana', 'orange'] watchEffect(() => { console.log('myArray:', myArray) }) ``` 在上面的代码中，watchEffect函数会自动追踪myArray数组的变化，并在数组发生变化时重新运行其内部的函数。因此，当我们向myArray数组中添加或删除元素时，控制台会输出相应的信息。 需要注意的是，watchEffect函数只能监视响应式数据，因此如果要监视一个非响应式数据，需要先将其转换为响应式数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值