计算属性和侦听器

计算属性

语义解决模板中的负责逻辑计算，以及缓存复用。

  1. //例如两个元素使用相同的数据绑定逻辑，此时可读性差，并且同样的东西需要计算两次。
  2. <li v-pre>{{ todo > 1 ? 10 : 20}}</li>
  3. <li v-pre>{{ todo > 1 ? 10 : 20}}</li>

关键点计算属性只有在其内部逻辑依赖的data发生改变时，才会再次调用。
关键点计算属性会有缓存，如果值没有改变，多次调用只会计算一次。如果你不希望有缓存，请用方法来替代。

  1. <div class="vue">{{ fullName }}</div>
  2. <script>
  3.   var app = new Vue({
  4.     el: ".vue",           
  5.     data: {
  6.       firstName: 'chen',
  7.       lastName: 'qian',              
  8.     },
  9.     computed: {
  10.       fullName: {
  11.         get(){
  12.           return this.firstName + this.lastName;
  13.         },
  14.         set(value){
  15.           this.firstName = value.split(' ')[0];
  16.           this.lastName = value.split(' ')[1];
  17.         }
  18.       }
  19.     }
  20.   });
  21. </script>

侦听器

语义关注点在数据更新：给数据增加侦听器，当数据更新时需要完成什么样的逻辑。

不同点

  • computed是为了抽离模板语法中的复杂逻辑。
  • watch是为了监听data的更新，并执行相应的逻辑，比如：将更改的数据上传到服务器。