Vue2 和 Vue3 中 Watch 的使用及对比

最新推荐文章于 2024-11-01 14:29:13 发布

阿贾克斯的黎明

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量355

点赞数 10

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

本文链接：https://blog.csdn.net/m0_57836225/article/details/142707854

版权

前端专栏收录该内容

145 篇文章 1 订阅

订阅专栏

Vue2 和 Vue3 中 Watch 的使用及对比

一、Vue2 中的 Watch

二、Vue3 中的 Watch

三、总结

在 Vue.js 中，watch是一个非常有用的选项，用于监听数据的变化。本文将介绍 Vue2 中watch的用法，并结合 Vue3 的情况进行对比，同时给出相应的代码示例。

一、Vue2 中的 Watch

在 Vue2 中，watch主要用于监听数据的变化。以下是一个 Vue2 的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <button @click="changeStr">Change STR</button>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          str: '123',
          obj: {
            a: 1
          }
        };
      },
      methods: {
        changeStr() {
          this.str = 'X';
          this.obj.a = 2;
        }
      },
      watch: {
        str: function (newValue, oldValue) {
          console.log('str changed:', newValue, oldValue);
        },
        'obj.a': function (newValue, oldValue) {
          console.log('obj.a changed:', newValue, oldValue);
        }
      }
    });
  </script>
</body>

</html>

在上述代码中，我们创建了一个 Vue 实例，其中包含一个数据属性str和一个对象属性obj。通过watch选项，我们监听了str和obj.a的变化，并在变化时打印出新旧值。

二、Vue3 中的 Watch

Vue3 对watch进行了一些改进和调整。以下是一个 Vue3 的示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
  <div id="app">
    <button @click="changeStr">Change STR</button>
    <button @click="changeObjA">Change obj.a</button>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          str: '123',
          obj: {
            a: 1
          }
        };
      },
      methods: {
        changeStr() {
          this.str = 'X';
        },
        changeObjA() {
          this.obj.a = 2;
        }
      },
      watch: {
        str(newValue, oldValue) {
          console.log('str changed in Vue3:', newValue, oldValue);
        },
        obj: {
          handler(newValue, oldValue) {
            console.log('obj changed in Vue3:', newValue, oldValue);
          },
          deep: true
        }
      }
    });
    app.mount('#app');
  </script>
</body>

</html>

在 Vue3 中，watch的用法与 Vue2 略有不同。可以直接传入一个函数来监听单个数据属性的变化，也可以传入一个对象来监听对象属性的变化，并通过设置deep选项为true来实现深度监听。