语法
是什么?
直接上demo,了解一下语法先~
<template>
<div>
<p>num1为{{ num1 }}</p>
<p>num2为{{ num2 }}</p>
<p>num1+num2={{ result }}</p>
<button @click="incrementNum1">num1+1</button>
<button @click="incrementNum2">num2+2</button>
</div>
</template>
<script>
export default {
data() {
return {
num1: 1,
num2: 2
};
},
// computed对象里面的值,能够根据其依赖发生的变化而变化,形象说,它是y,x发生变化,y自动发生变化
computed: {
result() {
return this.num1 + this.num2;
}
},
// watch
watch: {
num1(newValue, oldValue) {
console.log(`num1 changed from ${oldValue} to ${newValue}`);
},
num2(newValue, oldValue) {
console.log(`num2 changed from ${oldValue} to ${newValue}`);
},
result(newValue, oldValue) {
console.log(`result changed from ${oldValue} to ${newValue}`);
}
},
methods: {
incrementNum1() {
this.num1++;
},
incrementNum2() {
this.num2=this.num2+2;
}
}
};
</script>
<style>
button{
display: block;
margin-top: 20px;
}
</style>
相同点
conputed是计算属性,watch是监听属性,本质上都是同一个watcher实例,它们都是通过响应式系统与数据,页面建立通信。
不同点
-
computed带有"懒计算"功能
-
监听的逻辑有差异:computed是依赖的值变了,它去重新求值,watch是目标值变了,它去执行函数文章来源:https://www.toymoban.com/news/detail-799872.html
-
深层到代码:在数据更新时, 计算属性的dirty状态会立即改变, 而监听属性与组件重新渲染, 至少都会在下一个"tick"执行,故监听属性是异步触发的文章来源地址https://www.toymoban.com/news/detail-799872.html
到了这里,关于浅谈Vue的属性,computed和watch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!