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的结合体
这三个属性并无孰优孰劣 根据不同的业务场合选择使用
