vue计算属性computed

June 6, 2020

2034 views

3308 words

基本用法

先看下面一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{firstName+' '+lastName}}</h2>
        <!--但是这样的拼接有点麻烦,尝试下面的方法-->
        <h2>{{getFullName()}}</h2>
        <!--但是这样还是不太好看，毕竟我们标签一般都是填写变量名，这里搞个方法名我看着有点别扭，这里就要引入 计算属性 了-->
        <!--这样写就看起来很简洁，注意不用加（），因为是一个属性了-->
        <h2>{{fullName}}</h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
        message: 'helloWorld！',
        firstName:'阿尔托莉雅',
        lastName:'潘德拉贡'
       },
       //计算属性（）
       computed: {
           fullName:function(){
            return this.firstName+" "+this.lastName;
           }
       },
       methods: {
           //这个是es6语法，getFullName(){}就等于getFullName:function(){}
           getFullName(){
               return this.firstName+" "+this.lastName;
           }
       }
    });
    </script>
</body>
</html>

我们使用计算属性就可以把我们需要计算处理的数据统一处理好后在返回，这样就使得我们的代码显得更加的简洁。
但是这里思考，为什么我们不使用methods来定义就好了还要专门弄一个计算属性来处理？
因为计算属性有缓存机制，而methods用一次就调用一次，而computed是调用一次后就有缓存，多次调用就会直接使用缓存，这样会使得执行效率更加高效。

计算属性的本质set和get

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2>{{fullName}}</h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
       message: 'helloWorld！',
       firstName:'zhang',
       lastName:'heng'
      },
      computed: {
        /* fullName:function(){
            return this.firstName+" "+this.lastName;
           } *///这个其实是简写方式,下面介绍完整的写法
           fullName:{
               //set方法就是监视fullName的值，当fullName发生改变时会自动回调set方法，当然你也可以在set方法里设置修改fullName的值
               //可以给set方法设置一个参数来引入修改值，从而修改fullName
               //一般set是不设置的所以就不写
              set:function(newValue){
                 //return '123';
                 
                 const names=newValue.split(' ');
                 this.firstName=names[0];
                 this.lastName=names[1];
              },

              //使用fullName这个属性本质上就是调用get这个方法，所以就可以使用上面的简写方式，而且也可以解释为啥fullName不用加（）
              get:function(){
                  //return 'abc';
                  return this.firstName+" "+this.lastName;   
              }
           }
      },
    });
        //这样就是调用set方法来修改并保存新值
    //app.fullName='阿尔托莉雅 潘德拉贡';
    </script>
</body>
</html>

这样解释了为啥调用计算属性中的方法和methods，当然这是让你意识到有些写法可不是理所当然的就是这样的写法，也有其原因的。

计算属性和方法的区别

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <!--第一种，直接拼接  （不采用，语法过于繁琐）-->
        <h2>{{firstName}} {{lastName}}</h2>
        <!--第二种调用方法-->
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{getFullName()}}</h2>
        <!--第三种使用计算属性-->
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
        message: 'helloWorld！',
        firstName:'阿尔托莉雅',
        lastName:'潘德拉贡'
       },
       //计算属性（）
       computed: {
           fullName:function(){
               //这个函数只执行了一次，因为系统为这个函数做了缓存，所以性能比用methods高，只有改变了返回值才会重新调用
               console.log("fullName");
            return this.firstName+" "+this.lastName;
           }
       },
       methods: {
           //这个是es6语法，getFullName(){}就等于getFullName:function(){}
           getFullName(){
               //检测被调用了几次
               console.log("getFullName");
               return this.firstName+" "+this.lastName;
           }
       }
    });
    </script>
</body>
</html>