vue中computed和watch的区别是什么?
- 计算属性(computed): 通过其他元素构造新的元素,当其他元素变化时触发computed;当进入页面时加载dom时自动执行
- 使用场景(多对一)
- 当其它任意元素(a,b,c)发生变化时都可以触发computed重新构造给changewords
<body>
<div id="app">
{{ changewords }}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data:{
a:'1',
b:'2',
c:'3'
},
computed:{
changewords(){
return this.a+this.b+this.c
}
}
})
</script>
- 变量不在 data中定义,而是定义在computed中,写法跟写方法一样,有返回值。函数名直接在页面模板中渲染,不加小括号
- 根据传入的变量的变化 进行结果的更新。
- 计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化,它调用的就是上一次 计算缓存的数据,因此提高了程序的性能。而methods中每调用一次就会重新计算 一次,为了进行不必要的资源消耗,选择用计算属性。
- 监听属性(watch):就是观察本身,当本身值变化时触发watch;
- 使用场景(一对多)
- watch元素发生变化时,我们可以在函数里分别重新定义其它元素
body>
<div id="app">
<p>单价:<input type="text" v-model="price"></p>
<p>数量:<input type="text" v-model="number"></p>
<p>计算金额:{{sum}}</p>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
price:100,
number:1,
sum:0
},
watch:{
price(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
},
number(){
console.log(this.price)
if(this.price*this.number < 1000 && this.price*this.number > 0){
this.sum = this.price*this.number + 100
}else{
this.sum = this.price*this.number
}
}
}
})
</script>
- 上面说到计算属性的时候 初始化的时候就可以被监听到并且计算 但是watch是发生改变的时候才会触发。
- 当你有一些数据需要随着其它数据变动而变动时,或者当需要在数据变化时执行异步或开销较大的操作时,你可以使用 watch
- 计算属性 和属性监听的区别:
- 计算属性变量在computed中定义,属性监听在data中定义。
- 计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。属性监听的是定义的变量,当定义的值发生变化时,执行相对应的函数。