Vue 监听属性Watch

介绍

在使用Vue作为前端开发时经常会用到监听属性Watch，下面来看看如何使用的吧

效果

多参数监听

请添加图片描述

代码

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 39title>
  <script src="https://unpkg.com/vue@next">script>
head>
<body>
  <div id="root">div>
body>
<script>
  // watch 侦听器
  // watchEffect 侦听器，偏向于 effect
  const app = Vue.createApp({
    setup() {
      const { reactive, watch, watchEffect, toRefs } = Vue;
      const nameObj = reactive({
        name: 'dell', englishName: 'lee'
      })
      // 具备一定的惰性 lazy
      // 参数可以拿到原始和当前值
      // 可以侦听多个数据的变化，用一个侦听器承载
      watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
        console.log('watch', curName, prevName, '---', curEng, preEng);
      }, { immediate: true })

      // 立即执行，没有惰性 immediate
      // 不需要传递你要侦听的内容，自动会感知代码依赖，不需要传递很多参数，只要传递一个回调函数
      // 不能获取之前数据的值
      // const stop = watchEffect(() => {
      //   console.log(nameObj.name);
      //   console.log(nameObj.englishName);
      //   setTimeout(() => {
      //     stop();
      //   }, 5000)
      // })

      const { name, englishName } = toRefs(nameObj);

      return { name, englishName }
    },
    template: `
      
        
          Name: 
        
        
          Name is {{name}}
        
        
          EnglishName: 
        
        
          EnglishName is {{englishName}}
        
      
    `,
  });

  const vm = app.mount('#root');
script>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

核心

watch函数

第一个参数是数组，里面放监听的属性；
第二个参数是一个回调函数，回调函数的参数是多个数组，如果监听两个参数就是两个数组，每个数组存放监听属性的新老值；
第三个参数是标记是否立即生效还是懒加载

watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, preEng]) => {
        console.log('watch', curName, prevName, '---', curEng, preEng);
      }, { immediate: true })
1
2
3

相关阅读:
事务的四大特性----ACID
互联网Java工程师面试题·Java 面试篇·第三弹
Qt的信号与槽的使用
Lua在计算时出现非法值，开启Debugger之后不再触发
java序列回显学习
用BFS求最短路 - 习题6道
python django 切换生产开发配置（规范常用）
算法分析与设计编程题贪心算法
【C++ Primer Plus学习记录】指针——指针和数字
【Docker项目实战】使用Docker安装Blossom 笔记应用

原文地址：https://blog.csdn.net/weixin_41405524/article/details/126354265