计算属性computed :

基础

支持缓存，根据依赖数据动态计算显示计算结果，且计算结果被缓存。 computed的值在getter执行后会被缓存起来，依赖数据变化，会重新调用getter来计算最新结果。注：其设计初衷是使模版中的逻辑运算更加简单，将复杂的计算逻辑放到computed中计算。官网中有一个demo来理解computed:

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
//根据 `author` 是否已有一些书籍来展示不同的信息
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

在这里我们定义了一个计算属性publishedBooksMessage。computed（）方法期望接受一个getter函数，返回值为一个计算属性ref。通过publishedBooksMessage.value 访问计算结果。Vue 的计算属性会自动追踪响应式依赖。它会检测到publishedBooksMessage依赖于author.books，当author.books变化时，任何依赖于publishedBooksMessage的绑定会同时更新。如果我们在表达式中调用一个函数也会得到相同的结果：

// 组件中
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

计算属性vs方法

我们虽然可以得到相同的计算，但是计算属性会基于响应式依赖被缓存，一个计算属性只会在其响应式依赖更新时才重新计算，这意味着author.books不改变，无论访问多少次都不用重新执行getter，而立即返回先前的计算结果。

可写计算属性

默认只读，特殊情况下可写，需提供getter和setter来创建：

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

我们应该注意的是： 1.计算属性的getter应该只做计算而没有其他副作用（不要在 getter 中做异步请求或者更改 DOM） 2.计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

监听属性watch :

watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。
Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。

普通监听

<!DOCTYPE html>
<html>
<head>
  <title>vue</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://cn.vuejs.org/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>空智个人信息情况: {{ basicMsg }}</p>
    <p>空智今年的年龄: <input type="text" v-model="age" /></p>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        basicMsg: '',
        age: 31,
        single: '单身'
      },
      watch: {
        age(newVal, oldVal) {
          this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
        }
      }
    });
  </script>
</body>
</html>

理解handler方法及immediate属性

watch有一个特点是: 第一次初始化页面的时候, 是不会去执行age这个属性监听的, 只有当age值发生改变的时候才会执行监听计算. 因此我们需要修改下我们的 watch的方法，需要引入handler方法和immediate属性, 代码如下所示:

watch: {
        age: {
          handler(newVal, oldVal) {
            this.basicMsg = '今年' + newVal + '岁' + ' ' + this.single;
          },
          immediate: true
        }
      }

理解deep属性

watch里面有一个属性为deep，含义是：是否深度监听某个对象的值, 该值默认为false。受JS的限制, Vue不能检测到对象属性的添加或删除的。它只能监听到obj这个对象的变化,比如说对obj赋值操作会被监听到。 deep实现机制是: 监听器会一层层的往下遍历, 给对象的所有属性都加上这个监听器。当然性能开销会非常大的。

总结

相同点：他们两者都是观察页面数据变化的。

不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。
watch每次都需要执行函数。watch更适用于数据变化时的异步操作。 (关于源码层面上的理解，后面会有更新...)

面试宝典--computed和watch的区别