vue3 computed、watch和watchEffect的特性区别

watch的特性

  • 具有一定的惰性, 第一次页面展示的时候不会执行,只有数据变化的时候才会执行
  • 需要手动传入依赖
  • 既要指明监视的属性,也要指明监视的回调
  • 可以同时监听多个数据的变化
  • 参数可以拿到当前值和原始值

watchEffect有点像commputed:
1.computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值
2.watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值

watchEffect的特性

  • 首次加载就会监听
  • 不需要指定监听的数据,组件初始化的时候就会执行一次用以收集依赖,而后收集到的依赖发生变化,这个回调才会再次执行
  • 不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性
  • 不需要手动传入依赖
  • 页面的首次加载就会执行一次回调函数,来自动获取依赖
  • 无法获取到原值,只能得到最新值

三者区别:

computed函数:
与computed配置功能一致
内部只有一个方法的时候是getter
有getter和setter
watch函数

与watch配置功能一致
监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调
默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次
通过配置deep为true, 来指定深度监视

watchEffect函数
不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据
默认初始时就会执行第一次, 从而可以收集需要监视的数据
监视数据发生变化时回调

你可能感兴趣的:(vue3,vue.js,前端)