watch(fn, options?)` signature has been moved to a separate API. Use `watchE

 

  • Vue.js 2.x 中,通过 watch 选项,或者$watch API去初始化一个侦听器,称作 watcher
  • Vue.js 3.0 使用Composition API中的watch API可以实现侦听器的效果

watch API 的具体实现

function watch(source, cb, options) { 
  if ((process.env.NODE_ENV !== 'production') && !isFunction(cb)) { 
    warn(`\`watch(fn, options?)\` signature has been moved to a separate API. ` + 
      `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` + 
      `supports \`watch(source, cb, options?) signature.`) 
  } 
  return doWatch(source, cb, options) 
} 
function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) { 
  // 标准化 source 
  // 构造 applyCb 回调函数 
  // 创建 scheduler 时序执行函数 
  // 创建 effect 副作用函数 
  // 返回侦听器销毁函数 
} 
  • watch 函数内部调用了 doWatch 函数
  • 调用前会在非生产环境下判断第二个参数 cb 是不是一个函数
  • 如果不是则会报警告以告诉用户应该使用 watchEffect(fn, options) API
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐