浅谈Vue的属性，computed和watch

语法

是什么？

直接上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;}},// watchwatch: {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是目标值变了，它去执行函数
深层到代码：在数据更新时, 计算属性的dirty状态会立即改变, 而监听属性与组件重新渲染, 至少都会在下一个"tick"执行，故监听属性是异步触发的