Vue.js 学习日志——计算属性（四）

Vue.js 计算属性

• 属性关键词: computed，用于处理一些复杂逻辑。

<div id="div">
  <p>原值:{{ msg }}</p>
  <p>计算后:{{ capitalize }}</p>
</div>

<script>
  var vm = new Vue({
    el:"#div",
    data:{
      msg:"abcdef"
    },
    computed:{
      capitalize: function () {
        var value = this.msg.toString();
        return value.charAt(0).toUpperCase() + value.slice(1);
      }
    }
  })
</script>

在上述实例中声明了一个计算属性capitalize，提供的函数将用作属性vm.capitalize的getter。

---

• computed 与 methods

可以使用methods来替代computed，两者实现的效果是一样的。

但computed是有缓存的，只有当基于的依赖发生改变时，才会重新调用执行。

computed的性能会更好些，如果你不希望缓存，你可以使用methods。

---

• computed setter

computed属性默认只有getter，不过有需要时可以提供一个setter。

<div id="div">
  <p>{{ info }}</p>
</div>

<script>
  var vm = new Vue({
    el:"#div",
    data:{
      name:"小王",
      sex:"男"
    },
    computed:{
      info:{
        get:function(){
          return this.name+"  "+this.sex;
        },
        set:function(value){
          this.name=value;
        }
      }
  }
});
vm.info = "小芳";
document.write("name:"+vm.name);
</script>

在运行vm.info = "小芳"时，setter会被调用，vm.name也会被对应更新。