vue中计算属性computed的本质和与methods的差别

最新推荐文章于 2024-03-29 15:43:35 发布

向左z

最新推荐文章于 2024-03-29 15:43:35 发布

阅读量458

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42238026/article/details/104211992

一个小例子：

<body>
  <div id="app">
    <h2>{{fullName}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: 'Zhong',
        lastName: 'Qi',
      },
      computed: {
        fullName: function(){
          return this.firstName+' '+this.lastName;
        }
      }
    })
  </script>
</body>

为什么fullName是一个属性而不是一个方法呢？
其实上面那种computed写法是一种简写，它本来是长这样子的：

computed: {
        fullName: {
          set: function(){

          },
          get: function(){
            return this.firstName+' '+this.lastName;
          }
        }
      }

fullName相当于一个key，后面跟了一个value是个对象，这个对象内有一个set方法可以传值对data内原本的值进行修改；还有一个get方法就是返回的值，也就是fullName这个key对应的value。

计算属性的set方法一般是不使用的，所以在很多时候会选择直接删除掉这个set方法，变成了：

computed: {
        fullName: {
          get: function(){
            return this.firstName+' '+this.lastName;
          }
        }
      }

显然每次使用计算属性都要写一个get方法不够优雅，所以最后简化成了与methods属性一样的写法：

computed: {
        fullName: function(){
          return this.firstName+' '+this.lastName;
        }
      }

那set方法如何使用呢？
set方法是可以接收属性的：

computed: {
        fullName: {
          set: function(value){

          },
          get: function(){
            return this.firstName+' '+this.lastName;
          }
        }
      }

如果想要修改我的名字，只需要将传进来的新名字进行截取，分别赋值给data内的属性firstName与lastName就可以改变显示的内容：

<body>
  <div id="app">
    <h2>{{fullName}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: 'Zhong',
        lastName: 'Qi',
      },
      computed: {
        fullName: {
          set: function(value){
            //对浏览器输入的名字进行截取得到一个名字数组
            const names = value.split(' ');
            //将第一个字符串赋值给firstName 
            this.firstName = names[0];
            //将第二个字符串赋值给lastName
            this.lastName = names[1];
          },
          get: function(){
            return this.firstName+' '+this.lastName;
          }
        }
      }
    })
  </script>
</body>

如何传入value值呢，只需要对fullName属性进行赋值即可，执行代码浏览器上显示：
在这里插入图片描述
使用开发者工具对fullName进行赋值，名字中间使用空格隔开：

按下回车键将新名字传入：

浏览器上的名字被改变，set方法修改了原来的属性值。

与methods的差别

使用computed与methods实现一下上面的案例：

<body>
  <div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{getFullName()}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: 'Zhong',
        lastName: 'Qi',
      },
      computed: {
        fullName: function(){
          return this.firstName+' '+this.lastName;
        }
      },
      methods: {
        getFullName: function(){
          return this.firstName+' '+this.lastName;
        }
      }
    })
  </script>
</body>

输出结果：
在这里插入图片描述
结果是一样的，那有什么不同呢，我们把这两种输出方式执行多次，并在两种方式的方法内进行打印：

<body>
  <div id="app">
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    <h2>{{fullName}}</h2>
    
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{getFullName()}}</h2>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        firstName: 'Zhong',
        lastName: 'Qi',
      },
      computed: {
        fullName: function(){
          console.log("fullName");
          return this.firstName+' '+this.lastName;
        }
      },
      methods: {
        getFullName: function(){
          console.log("getFullName");
          return this.firstName+' '+this.lastName;
        }
      }
    })
  </script>
</body>