computed和watch的区别和使用场景

最新推荐文章于 2024-11-06 17:06:00 发布

原创最新推荐文章于 2024-11-06 17:06:00 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

6 篇文章

订阅专栏

本文探讨了Vue中计算属性与watch的使用区别。在数据变化时，如果需要执行异步操作，如搜索Action，必须使用watch，因为computed不支持异步。然而，当仅需简单组合现有数据时，computed更简洁。示例中，当keywords改变时，使用watch监听并调用searchAction函数。相比之下，使用computed处理firstName和lastName的组合则更为简洁。在选择methods、computed或watch时，应根据是否涉及异步和数据依赖来决定。

先看看列子只能使用watch的场景

1 keywords发生变化时，执行searchAction这个函数；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中计算属性和watch的区别</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
           keywords:555
          };
        },
        // computed: {
        //     return this.searchAction();
        // },
        watch: {
           keywords:function(newKeyword) {
              this.searchAction();
           }
        },
        methods:{
            searchAction:function(){
               console.log(通过watch监听keywords的变化);
            }
        },
        template: '<div>{{keywords}}</div>',
      });

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

这里用computed肯定是不行的，第一keywords写在data里面；不好写keywords改变的数据；
第二因为computed不能进行异步操作的；
按照上面的写法，keywords改变了，computed压根没有重新计算；
因为keywords不是computed所依赖的数据变化；
所以只能用watch进行异步操作；
展示的效果：
请添加图片描述

//数据的变化的改变；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中计算属性和watch的区别</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            firstName: '哈',
            lastName: '默',
          };
        },
        watch: {
          firstName(val) {
            this.fullName = val + this.lastName;
          },
          lastName(val) {
            this.fullName = this.firstName + val;
          },
        },
        template: '<div>{{ fullName }}</div>',
      });

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

使用watch是不是很麻烦，代码很多，繁琐

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue中计算属性和watch的区别</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            firstName: '哈',
            lastName: '默',
          };
        },
        computed: {
           fullName() {
             return this.firstName + this.lastName;
           },
        },
 
        template: '<div>{{ fullName }}</div>',
      });

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

这就很简单了，同时能实现相同的效果；
computed相比watch来说，代码简单的多；简洁；
当要进行异步请求时，必须使用watch；
methods computed 选用computed 缓存
watch computed 选用computed 简洁
只需要记住哪几种特殊的情况，采用methods或者computed的；