computed和watch的区别和使用场景

最新推荐文章于 2023-10-11 08:59:39 发布

LiM .YOon A

最新推荐文章于 2023-10-11 08:59:39 发布

阅读量361

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45716607/article/details/124211896

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

先看看列子只能使用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的；