Vue的computed(计算属性)和watch(侦听属性)的介绍、使用及区别

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是一个对象 键是需要观察的表达式 值是对应的回调函数
    主要用来监听某些特定数据的变化 从而进行某些具体的业务逻辑操作
    可以看作是computedmethods结合体

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


上一篇:5.7computed 计算属性


下一篇:Vue watch、computed 数据监听