1、computed计算属性

对于复杂逻辑 Vue提供了计算属性
在Vue实例的computed属性中 可定义一些计算属性 其本质就是一个方法
只不过在使用这些计算属性的时候 是将它们的名称直接当作属性使用 而不是当作方法去调用

注：

• 1、计算属性在引用的时候是不加小括号的
  直接当作普通的属性去使用即可
  如 例子中的<input type="text" v-model="result">
  是v-model=“result” 而不是v-model=“result()”
• 2、只要计算属性的function内部使用到的任何data中的数据发生了变化 就会立刻重新计算该计算属性的值
• 3、计算属性的求值结果会被缓存起来 以便于下次直接使用
  即 在页面中若多个地方使用该结果 那么只会调用一次 不会每次用的时候都调用计算方法 此举提高了运行的效率
  若计算属性方法所依赖的所有数据都没发生变化 则不会重新计算求值

例子：

<div id="app">
	<input type="text" v-model="arg1">
	+
	<input type="text" v-model="arg2">
	=
	<input type="text" v-model="result">
</div>

计算属性其本质就是一个方法：

<script>
    var vm=new Vue({
       el:'#app',
       data:{
           arg1:"",
           arg2:""
       },
       methods:{},
       computed:{
           "result":function()
           {
               return parseInt(this.arg1)+parseInt(this.arg2) 
           }
       }
    });
</script>

---

2、watch侦听属性

使用watch侦听属性可以监视data数据的变化
当指定的数据发生变化 会立即触发watch中对应的处理函数：

<div id="app">
	<input type="text" v-model="myinput">
</div>

<script>
    var vm=new Vue({
       el:'#app',
       data:{
           myinput:""
       },
       methods:{},
       // 使用watch属性可以监视data中指定数据的变化并触发watch中对应的处理函数
       watch:{
           "myinput":function()
           {
               console.log("change!")
           }
       }
    });
</script>

watch侦听属性不仅能监视数据的改变 还能获取到改变前后的数据的值
往方法里定义两个参数即可 第一个参数是修改后的数据的值 第二个参数是修改前的数据的值

<script>
    var vm=new Vue({
       el:'#app',
       data:{
           myinput:""
       },
       methods:{},
       // 使用watch属性可以监视data中指定数据的变化并触发watch中对应的处理函数
       watch:{
           "myinput":function(newVal,oldVal)
           {
               console.log(newVal+"   "+oldVal)
           }
       }
    });
</script>

而且 watch不仅能监视数据的改变 还能监视路由地址的变化：
由于路由地址是存放在$route的path属性里的 因此只要监视$route的path值是否变动即可

<script>
    var vm=new Vue({
       el:'#app',
       data:{},
       methods:{},
       // 挂载路由对象
       router,
       // 监视路由地址的变化
       watch:{
           "$route.path":function(newVal,oldVal)
           {
               console.log(newVal+" "+oldVal)
           }
       }
    });
</script>

---

watch 和 computed 和 methods的对比：

这三者虽都是function 但在computed的内部 无论如何都要return出一个值
methods更加侧重于业务逻辑的处理 而computed适合做一些简单的数据操作

• 1、computed属性的结果会被缓存 除非所依赖的响应式属性发生变化 才会重新计算
  主要作为复杂逻辑的属性来使用
• 2、methods方法表示一个具体的操作 主要用于书写业务逻辑
• 3、watch是一个对象 键是需要观察的表达式 值是对应的回调函数
  主要用来监听某些特定数据的变化 从而进行某些具体的业务逻辑操作
  可以看作是computed和methods的结合体

这三个属性并无孰优孰劣 根据不同的业务场合选择使用

---