Vue 监听属性Watch

最新推荐文章于 2024-03-03 07:45:00 发布

BirdMan98

最新推荐文章于 2024-03-03 07:45:00 发布

阅读量320

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41405524/article/details/126354265

版权

Vue 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

介绍

在使用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 39</title>
  <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: `
      <div>
        <div>
          Name: <input v-model="name">
        </div>
        <div>
          Name is {{name}}
        </div>
        <div>
          EnglishName: <input v-model="englishName">
        </div>
        <div>
          EnglishName is {{englishName}}
        </div>
      </div>
    `,
  });

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

核心

watch函数

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

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