watch
watch主要是侦听data里面数据的变化 ,具体是对data里面属性名的监听,因为watch是依赖data的数据的,当数据发生变化的时候就会触发watch里的函数
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
c:{
b:2
}
},
watch: {
firstname(val, oldval) {
if (val == !oldval) {
console.log(111);
}
},
c(val,oldval){
if(this.c.b==2){
console.log('yes')
}
deep:true//监听引用数据类型
}
}
})
})
只有当监听到data里面firstname的变化才会执行的回掉。
注意点
- watch中的函数是不需要调用的,当数据变化就会自动执行回掉函数
- watch只是监听数据的地址是否发生变化,也就是当data中的数据是引用数据类型时,data是监听不到的,watch只是监听到第一层,此时需要添加deep:true
- watch中只要所依赖的数据变化了就会执行回掉,而不像computed会缓存数据
computed
computed计算属性主要用于对复杂逻辑的计算,从而对模板进行简化
<div id="app">
<input type="text" v-model="firstname"><br/>
<input type="text" v-model="lastname">
<div>{{name}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: {
name() {
return `${this.firstname}${this.lastname}`
}
}
})
<script/>
只有当所依赖的数据发生变化的时候才会带哦用函数
注意点
- computed是用来计算复杂逻辑运算的,并且在函数调用的时候不需要加(),直接写函数名即可
- 在computed内部的函数是必须要有返回值的
- 当所依赖的数据没有发生变化的时候,computed内部是不会再去调用函数的,而是会去缓存中查找上次缓存的结果
- 在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了,就是data中的属性发生改变,从而触发computed中的函数,形成死循环了。
总结
- computed是用来对数据进行操作计算处理的,返回的是处理过后的数据,而watch侧重点是对数据的变化侦测,以及执行对应的回掉函数
- watch是不会缓存的,无论数据是否变化,都会触发的函数。而computed当所依赖的数据没有变化,就不会触发函数,会在缓存中查找
- computed是必要有return,而watch不是必须的