老生常谈的前端面试问题：

computed

根据响应式数据的变化派生或者计算出新的属性，当属性没有变化时，使用缓存结果；当属性有变化时，计算属性会重新计算。

• 例如，根据路由，对是否显示的属性、是否禁用的属性进行更改：

const dialogShow = computed(() => route.path === xxxx)
const btnDisabled = computed(() => !!route.query.id)

watch

观察一个或者多个数据的变化，执行相应的回调函数，做出具体反映。

• 例如，当父组件传过来的数据发生改变时，重新渲染表格数据：

watch(() => props.data, () => {
      generateTableData()
    })

在watch中，还可以对多个数据变化进行监听，处理方式是将其转化成一个数组，监听数组的变化。例如：

watch(() => [obj.a, obj.b], ([newA, newB]) => { 
    if(newA?.length && newB?.length) {
        getApprover() 
    }
})

watch中还有deep:true和immediate来设置是否监听更深层次变化，或者一开始时执行回调函数。