vue3中watch与watchEffect的区别

目录

• vue3中watch与watchEffect的区别
• watch ref
• watch reactive
• watchEffect
• 对比
• 扩展：vue3中的 watchEffect 和 watch 有什么区别以及如何使用

vue3中watch与watchEffect的区别

watch ref

const x = ref(0)const y = ref(0)// 单个 refwatch(x, (newX) =>
 {
  console.LOG(`x is ${
newX}
`)}
    )// getter 函数watch(  () =>
     x.value + y.value,  (sum) =>
 {
    console.log(`sum of x + y is: ${
sum}
`)  }
    )// 多个来源组成的数组watch([x, () =>
     y.value], ([newX, newY]) =>
 {
  console.log(`x is ${
newX}
 and y is ${
newY}
`)}
    )

watch reactive

// 提供一个 getter 函数watch(  () =>
     obj.count,  (count) =>
 {
    console.log(`count is: ${
count}
`)  }
,  // 立即执行  {
 immediate: true }
    )

注意，不要使用如下方式：

const obj = reactive({
 count: 0 }
    )// 错误，因为 watch() 得到的参数是一个 numberwatch(obj.count, (count) =>
 {
  console.log(`count is: ${
count}
`)}
    )

watchEffect

不用显式的定义要 watch 的参数

const todoId = ref(0)watchEffect(async () =>
 {
  const response = await fetch(    `https://jsonplaceholder.typicode.COM/toDOS/${
todoId.value}
`  )  data.value = awaIT response.json()}
    )

todoId 的值改变了才触发

对比

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

一般的副作用就是说这个函数做了不属于它应该做的事，比如console.log，或者它修改了其他的外部变量之类的。
react中的函数组件要求必须是纯函数也就是没有副作用的函数，就是因为这个函数会被很多次调用，如果有副作用比如修改了全局变量，那么将无法控制该变量的准确性。（react hooks 函数组件中的生命周期函数就是副作用）
vue里面一般就是说，一些当状态改变时需要执行的行为，比如在每次msg变量改变时我需要重新打印它，那么这个打印行为就可以说是一个副作用(effect)

扩展：vue3中的 watchEffect 和 watch 有什么区别以及如何使用

vue3 新增的 Composition API中的 watchEffect 和 watch
都可在 SETUP() 函数中使用

watchEffect：
1.它是立即执行的，在页面加载时会主动执行一次，来收集依赖
2.不需要传递需要侦听的内容，它可以自动感知代码依赖，只需要传递一个回调函数
3.它不能获取之前数据的值
4.它的返回值用来停止此监听

例：

setup() {
  const {
 reactive, watchEffect }
     = vue;
  const data = reactive({
 name:'lei' }
    )  const stop = watchEffect( () =>
 {
      // 返回值 stop 用来停止监听    console.log( data.name )  // 页面加载时执行一次之后，当 data.name 改变时，将会再次执行log    setTimeout( () =>
 {
          stop();
  //5秒之后停止此监听    }
, 5000 )  }
)}
    

watch : （watch也可以在setup中使用）
1.具备一定的惰性 lazy （ 但可配置 immediate , 使其主动）
2.参数可拿到更改之前的值和更改之后的值
3.可以侦听多个数据的变化，用一个侦听器承载

例：

const {
 reactive, watch, ref }
     = vue;
    const name = ref('yang')// ref包装过的可直接通过watch的第一个参数传入watch( name, (newValue,oldValue) =>
 {
 //  第一个参数 需要监听的数据  console.log(newValue)  // 新值  console.log(newValue)  // 旧值}
，{
 immediate: true }
) //  第三个参数可接受配置项const data = reactive({
 name:'lei', age:18 }
    )// 但是 reactive 包装过的值不可以直接传入，可使用箭头函数 return 出需要监听的数据watch( () =>
     data.name, (newValue,oldValue) =>
 {
 //  第一个参数 需要监听的数据  console.log(newValue)  // 新值  console.log(newValue)  // 旧值}
，{
 immediate: true }
    ) //  第三个参数可接受配置项

上边说到可以侦听多个数据的变化，用一个侦听器承载，接着看

例：

const data = reactive({
 name:'lei', age:18 }
    )// 可用数组接收参数watch( [() =>
     data.name, () =>
     data.age], ([newName, newAge], [oldName, oldAge]) =>
 {
   console.log(newName, newAge)  // 新值  console.log(oldName, oldAge)  // 旧值}
    ) 

具体需要用 watch 还是 watchEffect 就看业务需求啦

到此这篇关于vue3中watch与watchEffect的区别的文章就介绍到这了,更多相关vue3 watch与watchEffect的区别内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 一文搞懂Vue3中watchEffect侦听器的使用
• Vue3中的 computed,watch,watchEffect的使用方法
• Vue3 中 watch 与 watchEffect 区别及用法小结
• vue3中的watch和watchEffect实例详解
• 浅谈Vue3中watchEffect的具体用法
• VUE3中watch和watchEffect的用法详解
• vue3 watch和watchEffect的使用以及有哪些区别

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！