zoukankan      html  css  js  c++  java
  • Vue.js 计算属性是什么

    Vue.js 计算属性是什么

    一、总结

    一句话总结:

    模板 表达式 维护

    在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性

    1、为什么会有计算属性?

    模板 表达式 维护

    在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式如果需要多于一个表达式的逻辑,应当使用计算属性

    2、计算属性的特点?

    依赖 改变

    依赖的值改变,计算属性也改变

    比如:下列代码中,b的值依赖于a的值,a的值由1变成2时,b的值由2变成了3

    14   <script>
    15     var vm = new Vue({
    16       el: '#example',
    17       data: {
    18         a: 1
    19       },
    20       computed: {
    21         // 一个计算属性的 getter
    22         b: function () {
    23           // `this` 指向 vm 实例
    24           return this.a + 1
    25         }
    26       }
    27     })
    28 
    29     setTimeout(function(){
    30       vm.a=2;
    31     },3000);
    32 
    33   </script>

    当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能可以让你的代码更加声明式、数据驱动并且易于维护。

    3、vue对象如何调用?

    对象 变量 调用

    将对象赋值给一个变量,然后调用这个变量即可

    14   <script>
    15     var vm = new Vue({
    16       el: '#example',
    17       data: {
    18         a: 1
    19       },
    20       computed: {
    21         // 一个计算属性的 getter
    22         b: function () {
    23           // `this` 指向 vm 实例
    24           return this.a + 1
    25         }
    26       }
    27     })
    28 
    29     setTimeout(function(){
    30       vm.a=2;
    31     },3000);
    32 
    33   </script>

    4、vue对象中的数据如何调用?

    直接 点

    vue对象直接.(点)的方式

    14   <script>
    15     var vm = new Vue({
    16       el: '#example',
    17       data: {
    18         a: 1
    19       },
    20       computed: {
    21         // 一个计算属性的 getter
    22         b: function () {
    23           // `this` 指向 vm 实例
    24           return this.a + 1
    25         }
    26       }
    27     })
    28 
    29     setTimeout(function(){
    30       vm.a=2;
    31     },3000);
    32 
    33   </script>

    5、vue和其它js代码的关系是怎样的?

    对象 互不干扰

    vue只是js的一个对象,和其它js代码完全是互不干扰的

    14   <script>
    15     var vm = new Vue({
    16       el: '#example',
    17       data: {
    18         a: 1
    19       },
    20       computed: {
    21         // 一个计算属性的 getter
    22         b: function () {
    23           // `this` 指向 vm 实例
    24           return this.a + 1
    25         }
    26       }
    27     })
    28 
    29     setTimeout(function(){
    30       vm.a=2;
    31     },3000);
    32 
    33   </script>

    6、什么时候适合用计算属性,什么时候适合用$watch?

    计算属性 对象中 多属性
    $watch 对象外 单属性

    场景描述:

    一个人的全名(fullname)由firstName和lastName组成,比如现在有一个需求,firstName和lastName改变的时候,全名也跟着改变,如何实现?

    解决方法:

    $watch解决:

    <div id="demo">{{fullName}}</div>
    var vm = new Vue({
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      }
    })
    
    vm.$watch('firstName', function (val) {
      this.fullName = val + ' ' + this.lastName
    })
    
    vm.$watch('lastName', function (val) {
      this.fullName = this.firstName + ' ' + val
    })

    计算属性解决:

    var vm = new Vue({
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })

    显然这里计算属性解决更优,不过计算属性是在Vue对象里面解决的,$watch是在对象外面解决的,计算属性更加简洁,但是$watch感觉灵活一点

    7、vue中的$watch函数的运行机制是怎样的?

    监控 属性

    看下面的代码可以知道,$watch是监控属性的,$watch监控的属性改变,$watch也跟着改变,代码中的示例是$watch一次监控一个属性

    场景描述:

    一个人的全名(fullname)由firstName和lastName组成,比如现在有一个需求,firstName和lastName改变的时候,全名也跟着改变,如何实现?

    解决方法:

    $watch解决:

    <div id="demo">{{fullName}}</div>
    var vm = new Vue({
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      }
    })
    
    vm.$watch('firstName', function (val) {
      this.fullName = val + ' ' + this.lastName
    })
    
    vm.$watch('lastName', function (val) {
      this.fullName = this.firstName + ' ' + val
    })

    8、一个人的全名(fullname)由firstName和lastName组成,比如现在有一个需求,firstName和lastName改变的时候,全名也跟着改变,并且,全名变了的话,firstName和lastName也自动跟着改变,如何实现?

    计算属性 get set

    用计算属性的getter和setter实现

    get方法用于firstName和lastName改变的时候,全名也跟着改变

    set方法用于全名变了的话,firstName和lastName也自动跟着改变

    具体调用的话可以用vue对象调用fullname、firstName、lastName进行验证

     1 // ...
     2 computed: {
     3   fullName: {
     4     // getter
     5     get: function () {
     6       return this.firstName + ' ' + this.lastName
     7     },
     8     // setter
     9     set: function (newValue) {
    10       var names = newValue.split(' ')
    11       this.firstName = names[0]
    12       this.lastName = names[names.length - 1]
    13     }
    14   }
    15 }
    16 // ...

    现在在调用 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会有相应更新。

    二、Vue.js 计算属性

    1、效果动图

    2、代码

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <meta charset="utf-8">
     5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     6     <title>wue01</title>
     7     <script src="vue.min.js"></script>
     8   </head>
     9   <body>
    10     <div id="example">
    11       a={{ a }}, b={{ b }}
    12     </div>
    13   </body>
    14   <script>
    15     var vm = new Vue({
    16       el: '#example',
    17       data: {
    18         a: 1
    19       },
    20       computed: {
    21         // 一个计算属性的 getter
    22         b: function () {
    23           // `this` 指向 vm 实例
    24           return this.a + 1
    25         }
    26       }
    27     })
    28 
    29     setTimeout(function(){
    30       vm.a=2;
    31     },3000);
    32 
    33   </script>
    34 </html>

    计算属性

    在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性

    当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能可以让你的代码更加声明式、数据驱动并且易于维护。

    基础例子

    <div id="example">
      a={{ a }}, b={{ b }}
    </div>
    var vm = new Vue({
      el: '#example',
      data: {
        a: 1
      },
      computed: {
        // 一个计算属性的 getter
        b: function () {
          // `this` 指向 vm 实例
          return this.a + 1
        }
      }
    })

    结果:

    {% raw %}
    <div id="example" class="demo">
      a={{ a }}, b={{ b }}
    </div>
    <script>
    var vm = new Vue({
      el: '#example',
      data: {
        a: 1
      },
      computed: {
        b: function () {
          return this.a + 1
        }
      }
    })
    </script>
    {% endraw %}

    这里我们声明了一个计算属性 b。我们提供的函数将用作属性 vm.b的 getter。

    console.log(vm.b) // -> 2
    vm.a = 2
    console.log(vm.b) // -> 3

    你可以打开浏览器的控制台,修改例子的 vm。vm.b 的值始终取决于 vm.a 的值。

    你可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.b 依赖于 vm.a,因此当 vm.a 发生改变时,依赖于 vm.b 的绑定也会更新。而且最妙的是我们是声明式地创建这种依赖关系:计算属性的 getter 是干净无副作用的,因此也是易于测试和理解的。

    计算属性 vs. $watch

    Vue.js 提供了一个方法 $watch,它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时, $watch 很诱人 —— 特别是如果你来自 AngularJS。不过,通常更好的办法是使用计算属性而不是一个命令式的 $watch 回调。考虑下面例子:

    <div id="demo">{{fullName}}</div>
    var vm = new Vue({
      data: {
        firstName: 'Foo',
        lastName: 'Bar',
        fullName: 'Foo Bar'
      }
    })
    
    vm.$watch('firstName', function (val) {
      this.fullName = val + ' ' + this.lastName
    })
    
    vm.$watch('lastName', function (val) {
      this.fullName = this.firstName + ' ' + val
    })

    上面代码是命令式的重复的。跟计算属性对比:

    var vm = new Vue({
      data: {
        firstName: 'Foo',
        lastName: 'Bar'
      },
      computed: {
        fullName: function () {
          return this.firstName + ' ' + this.lastName
        }
      }
    })

    更好,不是吗?

    计算 setter

    计算属性默认只是 getter,不过在需要时你也可以提供一个 setter:

    // ...
    computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }
    // ...

    现在在调用 vm.fullName = 'John Doe' 时,setter 会被调用,vm.firstName 和 vm.lastName 也会有相应更新。

    参考:Vue.js 计算属性_w3cschool
    https://www.w3cschool.cn/vuejs/srfd1js2.html

     
  • 相关阅读:
    2019自我剖析
    jzoj4640. 【GDOI2017模拟7.15】妖怪
    jzoj4649. 【NOIP2016提高A组模拟7.17】项链
    jzoj3171. 【GDOI2013模拟4】重心
    jzoj4673. 【NOIP2016提高A组模拟7.20】LCS again
    学习计算几何基础知识小结
    学习第一类斯特林数小记
    jzoj4213. 对你的爱深不见底
    jzoj4212. 【五校联考1day2】我想大声告诉你
    jzoj3085. 图的计数
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/10001967.html
Copyright © 2011-2022 走看看