浅谈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;
      }
    },
    // 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实例，它们都是通过响应式系统与数据，页面建立通信。

不同点

1. computed带有"懒计算"功能

2. 监听的逻辑有差异：computed是依赖的值变了，它去重新求值，watch是目标值变了，它去执行函数

3. 深层到代码：在数据更新时, 计算属性的dirty状态会立即改变, 而监听属性与组件重新渲染, 至少都会在下一个"tick"执行，故监听属性是异步触发的