vue源码中computed和watch的解读

computed

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

watch

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

watchEffect

在 composition API中 watchEffect会在它所依赖的数据发生改变时立即执行，并且执行结果会返回一个函数，我们称它为stop函数

，可以用于停止监听数据变化，下面是示例代码演示：

const count = ref(0)

// -> log 0
const stop = watchEffect(() => {
	console.log(count.value)
})

setTimeout(()=>{
	// -> log 1
	count.value++
},100)

// -> later
stop()

下面我们来实现以上介绍的几个composition API

  1. computed -> let x = computed(()=> count.value + 3);
  2. watch -> watch(()=> count.value, (curVal, preVal) => {}, { deep, immediate })
  3. watchEffect -> let stop = watchEffect(()=> count.value + 3)

computed 

核心思路是

// 简单定义

let computed = (fn) => {
    let value;
    return {
      get value() {
        return value
      }
    }
  }

// 调用

 let computedValue = computed(() => count.value + 3)
 
 // 监听
 watchEffect(() => {
    document.getElementById('computed').innerText = computedValue.value
  });

下面我们在此基础之上实现依赖更新的操作

let computed = (fn) => {
  let value;
  return {
    get value() {
      // 5手动执行一次依赖
      value = fn()
      return value
    }
  }
}
let count = ref(1);
let computedValue = computed(() => count.value + 3)

function add() {
  document.getElementById('add').addEventListener('click',()=>{
    count.value++
  })
}

add()

watchEffect(() => {
  document.getElementById('text').innerText = count.value
  document.getElementById('computed').innerText = computedValue.value
});

依赖缓存计算

 呈上页面 -html



  
    
    
    
    Vue3 - computed
  
  
    

      result:
      0
      

      computed:
      0

包含了computed的实现的完整js代码。

;(function () {
  let active
  /*
       * @params fn -> 要执行的函数
       * @params option -> 可选参数
       * @return effect -> 执行watchEffect
       */
  let effect = (fn, options = {}) => {
    let effect = (...args) => {
      try {
        active = effect
        // 避免了死循环
        return fn(...args)
      } finally {
        active = null
      }
    }

    // 更新数据时也需要让schedular执行
    effect.options = options

    return effect
  }

  let watchEffect = function (cb) {
    let runner = effect(cb)
    runner()
  }
  // 需要有个队列来存储各项任务
  let queue = []
  // 通过微任务方式去执行队列中的任务
  let nextTick = (cb) => Promise.resolve().then(cb)
  // 将任务添加到队列
  let queueJob = (job) => {
    if (!queue.includes(job)) {
      queue.push(job)
      nextTick(flushJobs)
    }
  }

  // 执行队列中的任务
  let flushJobs = () => {
    let job
    while ((job = queue.shift()) !== undefined) {
      job()
    }
  }

  // 收集更多依赖
  class Dep {
    // 依赖收集，将响应依赖添加到deps中
    constructor() {
      this.deps = new Set()
    }

    depend() {
      if (active) {
        this.deps.add(active)
      }
    }
    // 通知所有依赖更新
    notify() {
      // 将任务加到队列中
      this.deps.forEach((dep) => {
        dep.options && dep.options.schedular && dep.options.schedular()
        queueJob(dep)
      })
    }
  }

  let ref = (initValue) => {
    let value = initValue
    let dep = new Dep()

    return Object.defineProperty({}, 'value', {
      get() {
        dep.depend()
        return value
      },
      set(newValue) {
        value = newValue
        dep.notify()
      }
    })
  }

  let computed = (fn) => {
    let value
    let dirty = true

    let runner = effect(fn, {
      // 通过钩子函数处理dirty参数
      schedular: () => {
        if (!dirty) {
          dirty = true
        }
      }
    })
    return {
      get value() {
        if (dirty) {
          value = runner()
          // 缓存标识
          dirty = false
          // 这里在dirty改变为false之后需要在依赖发生变化时候重置为true,
        }
        return value
      }
    }
  }

  let count = ref(1)
  // 同93 数据发生更新时让dirty 重置
  let computedValue = computed(() => count.value + 3)

  function add() {
    document.getElementById('add').addEventListener('click', () => {
      count.value++
    })
  }

  add()

  watchEffect(() => {
    document.getElementById('text').innerText = count.value
    document.getElementById('computed').innerText = computedValue.value
  })
})()

watch

// watch(()=> count.value, (curVal, preVal) => {}, { deep, immediate })

;(function () {
      let active
      /*
       * @params fn -> 要执行的函数
       * @params option -> 可选参数
       * @return effect -> 执行watchEffect
       */
      let effect = (fn, options = {}) => {
        let effect = (...args) => {
          try {
            active = effect
            // 避免了死循环
            return fn(...args)
          } finally {
            active = null
          }
        }

        // 更新数据时也需要让schedular执行
        effect.options = options

        return effect
      }

      let watchEffect = function (cb) {
        let runner = effect(cb)
        runner()
      }
      // 需要有个队列来存储各项任务
      let queue = []
      // 通过微任务方式去执行队列中的任务
      let nextTick = (cb) => Promise.resolve().then(cb)
      // 将任务添加到队列
      let queueJob = (job) => {
        if (!queue.includes(job)) {
          queue.push(job)
          nextTick(flushJobs)
        }
      }

      // 执行队列中的任务
      let flushJobs = () => {
        let job
        while ((job = queue.shift()) !== undefined) {
          job()
        }
      }

      // 收集更多依赖
      class Dep {
        // 依赖收集，将响应依赖添加到deps中
        constructor() {
          this.deps = new Set()
        }

        depend() {
          if (active) {
            this.deps.add(active)
          }
        }
        // 通知所有依赖更新
        notify() {
          // 将任务加到队列中
          this.deps.forEach((dep) => {
            dep.options && dep.options.schedular && dep.options.schedular()
            queueJob(dep)
          })
        }
      }

      let ref = (initValue) => {
        let value = initValue
        let dep = new Dep()

        return Object.defineProperty({}, 'value', {
          get() {
            dep.depend()
            return value
          },
          set(newValue) {
            value = newValue
            dep.notify()
          }
        })
      }

      let watch = (source, cb, options = {}) => {
        const { immediate } = options
        const getter = () => {
          return source()
        }
        let oldValue
        const runner = effect(getter, {
          schedular: () => applyCbk()
        })

        const applyCbk = () => {
          let newValue = runner()
          if (newValue !== oldValue) {
            cb(newValue, oldValue)
            oldValue = newValue
          }
        }

        // 有默认值时执行回调
        if (immediate) {
          applyCbk()
        } else {
          oldValue = runner()
        }
      }

      let count = ref(1)

      function add() {
        document.getElementById('add').addEventListener('click', () => {
          count.value++
        })
      }

      add()

      watch(
        () => count.value,
        (newValue, oldValue) => {
          console.log(newValue, oldValue)
        },
        { immediate: true }
      )
    })()

参数1响应式更新，参数2使用schedular执行回调，参数3 如果存在时就默认执行回调2

watchEffect

  • stop方法的实现
  • 数组API响应式执行依赖更新
  • Vue.set的实现，数组索引加入代理中
// let stop = watchEffect(()=> count.value + 3)

;(function () {
  let active
  /*
       * @params fn -> 要执行的函数
       * @params option -> 可选参数
       * @return effect -> 执行watchEffect
       */
  let effect = (fn, options = {}) => {
    // 包裹一次effect 避免对fn的污染，保证fn纯净
    let effect = (...args) => {
      try {
        active = effect
        // 避免了死循环
        return fn(...args)
      } finally {
        active = null
      }
    }

    // 更新数据时也需要让schedular执行
    effect.options = options
    // 用于反向查找
    effect.deps = [];

    return effect
  }

  let cleanUpEffect = (effect) => {
    const { deps } = effect;
    deps.forEach(dep => dep.delete(effect))
  }

  let watchEffect = function (cb) {
    let runner = effect(cb)
    runner()
    // 返回一个stop函数，清楚当前的监听
    return () => {
      cleanUpEffect(runner)
    }
  }
  // 需要有个队列来存储各项任务
  let queue = []
  // 通过微任务方式去执行队列中的任务
  let nextTick = (cb) => Promise.resolve().then(cb)
  // 将任务添加到队列
  let queueJob = (job) => {
    if (!queue.includes(job)) {
      queue.push(job)
      nextTick(flushJobs)
    }
  }

  // 执行队列中的任务
  let flushJobs = () => {
    let job
    while ((job = queue.shift()) !== undefined) {
      job()
    }
  }

  // 收集更多依赖
  class Dep {
    // 依赖收集，将响应依赖添加到deps中
    constructor() {
      this.deps = new Set()
    }

    depend() {
      if (active) {
        this.deps.add(active)
        // 添加依赖时追加当前的deps, 实现双向互通。双向索引
        active.deps.push(this.deps)
      }
    }
    // 通知所有依赖更新
    notify() {
      // 将任务加到队列中
      this.deps.forEach((dep) => {
        dep.options && dep.options.schedular && dep.options.schedular()
        queueJob(dep)
      })
    }
  }

  let ref = (initValue) => {
    let value = initValue
    let dep = new Dep()

    return Object.defineProperty({}, 'value', {
      get() {
        dep.depend()
        return value
      },
      set(newValue) {
        value = newValue
        dep.notify()
      }
    })
  }

  let count = ref(1)

  function add() {
    document.getElementById('add').addEventListener('click', () => {
      count.value++
    })
  }

  add()

  let stop = watchEffect(() => {
    document.getElementById('text').innerText = count.value
  })

  setTimeout(() => {
    stop();
  }, 3000);

})()

免责声明

本文是通过对vue响应式computed计算属性，watch, watchEffect源码学习的一些笔记分享，会涉及到一些引用，出处不详，如商业用途谨慎转载。

vue

相关

创建vue项目的第一步——之安装vue 命令更新了

vue打包报错

vue登录页面后台返回验证码图片

Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）

vue axios 1 创建项目及简单配置axios

vue两层list循环后，内层循环页面选择类型

HMVue1.5【Source Map】

vue代理服务器proxy详情配置信息

[转]Vue-cli3.x引入本地json报404 解决方案

[转]Vue CLI 3搭建vue+vuex 最全分析

AntDesign vue学习笔记（三）嵌套路由使用

vue 多项目部署---二级目录

标签