计算属性computed和侦听属性watch的区别
ue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch
·
区别
-
计算属性是依赖的值改变会重新执行函数,计算属性是取返回值作为最新结果,所以里面不能异步的返回结果。不能写异步逻辑。
-
侦听属性是侦听的值改变会重新执行函数,将一个值重新赋值作为最新结果,所以赋值的时候可以进行一些异步操作。
演示
当一个值改变了需要1s之后显示到页面中,通过watch可以轻松的实现
<div id="app">
<div>
{{msg}}
</div>
<div>
{{newValue}}
</div>
<button @click="handleClick">点击</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello',
newValue: ''
},
methods: {
handleClick () {
this.msg = 'hello1'
}
},
watch: {
msg (newValue) {
setTimeout(() => {
this.newValue = newValue
}, 1000);
}
}
})
</script>
使用计算属性无法在里面写一些异步逻辑
<div id="app">
<div>
{{msg}}
</div>
<div>
{{newValue}}
</div>
<button @click="handleClick">点击</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: 'hello',
temp: ''
},
computed: {
newValue () {
if (this.temp) {
// 不能写异步
// setTimeout(() => {
// return msg
// }, 1000);
return this.msg
} else {
return this.temp
}
}
},
methods: {
handleClick () {
this.msg = 'hello1'
this.temp = 'hello1'
}
}
})
</script>
更多推荐
已为社区贡献21条内容
所有评论(0)