Vue计算属性computed与监听器watch

诞生原因：在模板中放入太多的逻辑会让模板过重且难以维护，比如

  1. 对后台插入地数据进行切割重组

 <div id="example">
   {{ message.split('').reverse().join('') }}
 </div>

  1. 对后台时间数据，格式化后显示

此时应该使用计算属性，

  • 关键词computed，与methods、methods平级

  • 计算属性可以按属性来调用，因为它必须有返回值，形式上是带返回值的function，始终有return

  • 在属性内用到data参数的要使用this作为声明

  • 计算属性是基于它们的响应式依赖进行缓存的，只有在相关响应式依赖发生改变时才会重新计算求值（类似缓存，除非值更新，否则只计算一次，后续返回不再计算），下面例子里除非message的值发生改变，reverseMessage会重新计算,负责一直返回”谁是花花“

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script type="text/javascript"  src="vue.js"></script>
     </head>
     <body>
         <div id="example">
           <p>Original message: "{{ message }}"</p>
           <p>Computed reversed message: "{{ reverseMessage }}"</p>
         </div>
         <script type="text/javascript"> 
         var vm = new Vue({
             el:"#example",
             data:{
                 message:"花花是谁"
             },
             computed:{
                 reverseMessage:function(){
                     return this.message.split('').reverse().join('');
                 }
             }
         });
         </script>
     </body>
 </html>

输出：

Original message: "花花是谁"

Computed reversed message: "谁是花花"

与定义在Methods里的区别：

定义在Methods每次都会计算，不会存在缓存属性

计算属性的 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 也会相应地被更新。

侦听器

适用场景：

  1. 用于数据变化的监听事件，类似change

  2. 比较新值、旧值的操作

如果只是获取一个拼接或者计算结果，推荐使用计算属性。官网有一个比较介绍

计算属性和侦听器 — Vue.js (vuejs.org)

监听器

所有代码：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <script type="text/javascript"  src="vue.js"></script>
     </head>
     <body>
         <div id="example">
             <!-- 计算属性 -->
           <p>Original message: "{{ message }}"</p>
           <p>Computed reversed message: "{{ reverseMessage }}"</p>
           
           <!-- 监听器 -->
           <button type="button" @click="num++">数字自增</button>
           <p>当前num: {{ num }}</p>
         </div>
         <script type="text/javascript"> 
         var vm = new Vue({
             el:"#example",
             data:{
                 message:"花花是谁",
                 num:0
             },
             watch:{
                 num:function(newVal,oldVal){
                     console.log(newVal+"  "+ oldVal);
                 }
             },
             computed:{
                 reverseMessage:function(){
                     return this.message.split('').reverse().join('');
                 }
             }
             
         });
         </script>
     </body>
 </html>
 ​