深入Vue源码分析-computed & watch 源码分析

Vue3.0

Object.defineProperty => Proxy

Proxy - JavaScript | MDN

Composition API

Composition API FAQ | Vue.js

Vue3.0 Reactivity APIs

• reactive
• ref
• readonly【只读，没有set功能，会报警告】
• computed
• watchEffect
• watch

Composition API FAQ | Vue.js

Vue2.0

computed

• 会基于其内部的 响应式依赖 进行缓存。
• 只在相关 响应式依赖发生改变 时它们才会重新求值。
• 可以将模板中使用的常量放在计算属性中。

watch:有3个参数

watch

watch(
  () => count.value, // 'obj'
  (currentValue, preValue) => {}, // func
  { deep, immediate } // deep 会遍历obj，immediate：true，函数会立刻执行一次
)

• 监听数据变化，并在监听回调函数中返回数据变更前后的两个值
• 用于在数据变化后执行 异步操作 或者 开销较大的操作

watchEffect

会返回一个停止监听函数

const count = ref(0)
const stop = watchEffect(() => console.log(count.value))
// -> logs 0
setTimeout(() => {
    count.value++
    // -> logs 1
}, 100)
// later 停止监听数据变化
stop()

 实现一下Computed、watch、watchEffect

  
    
    
  
  
    add