vue学习笔记（一）

• computed(计算属性) vs methods

计算属性与方法的对比
两者可以相互替代，最终结果都是一样的，不同的是计算属性基于它的依赖缓存，计算属性只有它的依赖发生改变时才会从新取值，即时num不放生改变，即直接取值，多次访问则直接从缓存取值，不会重新计算。相比之下methods在每次重新渲染时，总会重新执行函数

//js
var vm2 = new Vue({
  el:'#exa2',
  data:{
    num:3
  },
//方法
  methods:{
    m_counter:function(){
      //多次渲染会重新执行
      return this.num+1;
    }
  },
//计算属性
  computed:{
    c_counter:function(){
      //多次渲染是否重新执行取决于num值是否改变
      return this.num+1;
    }
  }
});
//html
<!-- vue示例2 -->
<div id="exa2">
    <span>{{m_counter()}}</span>
    <span>{{c_counter}}</span>
</div>

• computed(计算属性) vs watch

vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人。但通常计算属性是更好的选择。那什么时候用watch呢，答案是当你想要在数据变化响应时，执行异步操作或昂贵操作时这很有用

//js
var vm2 = new Vue({
  el:'#exa2',
  data:{
    num:3,
    ret:0
  },
  watch:{
    //此函数是被动的，当num发生改变时此才会函数执行,也就是说默认ret的值为0，
    num:function(val){
      this.ret= val + ' watch';
    }
  },
  computed:{
    //主动执行 需要在页面显示调用
    c_ret:function(){
      return this.num +' watch';
    }
  }
});
//html
<!-- vue示例2 -->
<div id="exa2">
    <input v-model='num'>
<-- 初次为ret为0 -->
    watch:<span>{{ret}}</span></br>
<-- 初次为ret为‘3 watch’ -->
    cumputed:<span>{{c_ret}}</span>
</div>