vue3的watch、watchEffect、computed

最新推荐文章于 2024-07-05 14:00:21 发布
最新推荐文章于 2024-07-05 14:00:21 发布
阅读量141 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58118986/article/details/133907558
版权
本文对比了Vue2和Vue3中如何使用computed属性，以及ref和reactive的不同。讲解了如何创建计算属性，ref的两种使用方法，watch的侦听机制，watchEffect的自动依赖收集和副作用清除。还讨论了watch和watchEffect的主要区别。
摘要由CSDN通过智能技术生成

区别

Vue2

使用的是computed属性

Vue3

需要在setup函数中使用computed方法来编写一个计算属性

computed

方法1.接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象

<template>
<div>
{{ fullname }}
</div>
</template>
  
<script>
import { reactive,ref,toRef,toRefs ,computed} from 'vue';
export default {
 setup(){
  const name=ref("dls")
  const age=ref(17)
   
  const fullname=computed(()=>{
    return name.value+age.value
  })
  return{
   fullname
  }
 }

}
</script>
<style>
</style>

方法2.接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象

<template>
  {{ fullName }}
  <button @click="changeName">change</button>
</template>
 
<script>
import { computed, reactive } from 'vue';
export default {
  name: 'App',
  setup() {
    const names = reactive({
      firstName: '冲啊',
      lastName: '迪迦奥特曼'
    });
    // 会返回一个ref对象
    const fullName = computed({
      set(newValue) {
        const tempNames = newValue.split(' ');
        names.firstName = tempNames[0];
        names.lastName = tempNames[1];
      },
      get() {
        return names.firstName + names.lastName;
      }
    });
    // 设置值
    const changeName = () => {
      fullName.value = fullName.value === '冲啊迪迦奥特曼' ? '神秘的 宇宙人' : '冲啊 迪迦奥特曼';
    };
 
    return {
      fullName,
      changeName
    };
  }
};
</script>

Watch

  • watch需要侦听特定的数据源，并在回调函数中执行副作用
  • 默认情况下它是惰性的，只有当被侦听的源发生变化时才会执行回调
  • 与watchEffect的比较，watch允许我们懒执行副作用（第一次不会直接执行）
  • 更具体的说明当哪些状态发生变化时，触发侦听器的执行
  • 访问侦听状态变化前后的值

侦听单个数据源

watch侦听函数的数据源有两种类型：

  • 一个getter函数：但是该getter函数必须引用可响应式的对象（比如reactive或者ref）
  • 直接写入一个可响应式的对象，reactive或者ref（比较常用的是ref）

解构
 () => ({ ...star })
   //其实也就等同于,因为将star解构后还是需要让他包裹在对象中
   //箭头函数无法识别这个{}是函数体还是对象
 () =>{
   return {...star}
 }

同理内部包裹的是数组时：

是ref对象时：
<template>
  <div>
  <h1>
  {{ star }}
  </h1>
  <button @click="change">change</button>
  </div>
  </template>
  <script>
  import { ref, reactive, watch } from 'vue';
export default {
  setup() {
/**
* 一、如果ref响应式对象中的是基本数据类型
*/
const star = ref('123');
// const star = ref('123');
// 改变
const change = () => (star.value = star.value === 'coder' ? '123' : 'coder');
// 那么直接这样传入即可,拿到的是value值本身
watch(star, (newValue, oldValue) => {
  console.log('newValue:', newValue, 'oldValue:', oldValue);
});
--------------------------------------------------------------------------------------
/**
* 二、如果ref对象中的是对象数据，那么也需要结构 () => ({...star.value})
如果不结构，拿到的是ref对象
*/
const star = ref({ name: '123', age: 14 });
// 改变
const change = () => (star.value.name = star.value.name === 'coder' ? 'pppp' : 'coder');
// 那么需要结构,如果不结构，拿到的是ref对象
watch(
  () => ({ ...star.value }),
  (newValue, oldValue) => {
    console.log('newValue:', newValue, 'oldValue:', oldValue);
  }
);

    return {
      star,
      change
    };
  }
};
</script>

  <style lang="scss" scoped></style>
是reactive对象时
<template>
  <div>
    <h1>
      {{ star.name }}
    </h1>
    <button @click="change">change</button>
  </div>
</template>
<script>
import { ref, reactive, watch } from 'vue';
export default {
  setup() {
    const star = reactive({ name: '123', age: 15 });
    // 改变
    const change = () => (star.name = star.name === 'coder' ? '123' : 'coder');
    /**
     * 一、如果直接传入reactive对象，那么打印出的也是两个reactive对象
     */
    watch(star, (newValue, oldValue) => {
      console.log('newValue:', newValue, 'oldValue:', oldValue);
    });
---------------------------------------------------------------------------------------
    /**
     * 二、如果希望获得普通对象，结构一下
     */
    watch(
      () => ({ ...star }),
      (newValue, oldValue) => {
        console.log('newValue:', newValue, 'oldValue:', oldValue);
      }
    );
    return {
      star,
      change
    };
  }
};
</script>
 
<style lang="scss" scoped></style>

因为在源码中，reactive对象和ref对象的处理方法不一样（ref中已经带有了.value后缀）

侦听多个数据源

<template>
  <div>
    <h1>
      {{ star.name }}
    </h1>
    <button @click="change">change</button>
  </div>
</template>
<script>
import { ref, reactive, watch } from 'vue';
export default {
  setup() {
    // ref对象
    const coder = ref('know');
    // reactive对象
    const star = reactive({ name: '123', age: 15 });
    // 改变
    const change = () => {
      star.name = 'coder';
      coder.value = 'unKnow';
    };
    // 传入数组即可                      // 对应结构
    watch([coder, () => ({ ...star })], ([newCoder, newStar], [oldCoder, oldStar]) => {
      console.log(newCoder, newStar, '----', oldCoder, oldStar);
    });
 
    return {
      star,
      change
    };
  }
};
</script>
 
<style lang="scss" scoped></style>

watch的选项

配置第三个参数 :

  • deep : 是否深度监听
  • immediate ： 是否立即执行
<template>
  <div>
    <h1>
      {{ info.name }}
    </h1>
  </div>
</template>
<script>
import { ref, reactive, watch } from 'vue'
export default {
  setup() {
    // reactive对象
    const info = reactive({
      name: '123',
      age: 15,
      friend: { name: '456' }
    })
    watch(
      () => {
        const obj = { ...info }
        // 因为有两层，需要自己结构下，否则返回的是proxy
        obj.friend = { ...obj.friend }
        return obj
      },
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
      },
      {
        // 如果有多层，需要加上deep
        deep: true,
        // 立即执行
        immediate: true
      }
    )
 
    return {
      info
    }
  }
}
</script>
 
<style lang="scss" scoped></style>

WatchEffect

  • 自动收集响应式数据的依赖
  • watchEffect传入的函数会被立即执行一次，并且在执行的过程中会收集依赖
  • 只有收集的依赖发生变化时，watchEffect传入的函数才会再次执行

区别

与 watch 不同，watchEffect 不需要明确地监视特定的数据，它会自动追踪在执行过程中访问的所有响应式数据，并在其中任何一个数据发生变化时触发。

用法

在最开始就会执行一次watcheffect,本质是要执行回调的函数，因此可以回调函数设置自己命名的函数（推荐用箭头函数）

<template>

<div>
{{ age }}-{{ name }}
<button @click="click">1</button>
<button @click="click2">2</button>
</div>
</template>

<script>

import { reactive,ref,watchEffect} from 'vue';
export default {
 setup(){
  const name=ref("dls")
  const age=ref(17)
   //如果里面没有写入name的话，执行name的变化不会触发监听
  watchEffect(()=>{
    console.log(age.value,name.value)
  })
  const click=()=>{
    age.value++
  }
  const click2=()=>{
   name.value="hhh"
  }
  return{
    name,
    age,
    click,
    click2
  }
 }
}
</script>

<style>

</style>

watchEffect的停止监听

假如，某些情况想要停止监听，那么可以获取watchEffect的返回值函数，调用该函数即可，这是因为 watchEffect 返回的函数是用于取消副作用的。

停止监听的方法通常与命名没有直接关系：它通常是由函数或对象的方法提供的。在 Vue 3 中，watchEffect 返回一个停止函数，这个函数通常被命名为你选择的变量名（例如，stop 或 unwatch），但实际的名称可以根据你的代码风格和偏好来选择。

<template>

<div>
{{ age }}-{{ name }}
<button @click="click">1</button>
<button @click="click2">2</button>
</div>
</template>

<script>

import { reactive,ref,watchEffect} from 'vue';
export default {
 setup(){
  const name=ref("dls")
  const age=ref(17)
   //要先声明一个值来获取它返回的函数
  const xx=watchEffect(()=>{
    console.log(age.value,name.value)
  })
  const click=()=>{
    age.value++
    if (age.value > 22) {
        // 停止监听
        xx();
      }
  }
  const click2=()=>{
   name.value="hhh"
  }
  return{
    name,
    age,
    click,
    click2
  }
 }
}
</script>

<style>

</style>

watchEffect清除副作用

什么是清除副作用
  • 比如在开发中可能需要在侦听函数中执行网络请求，但是在网络请求还没有达到的时候，停止了侦听器，或者侦听器侦听函数被再次执行了
  • 那么上一次的网络请求应该被取消掉，这个时候就可以清除上一次的副作用

在Vue 3中，"副作用" 指的是与组件生命周期之外的操作相关的行为。这通常包括对 DOM 的操作、数据请求、订阅外部事件或资源等。副作用通常在组件的生命周期钩子函数之外执行，比如在 created、mounted 或 updated 钩子函数内。

Vue 3 提供了 watch、watchEffect 和 onMounted 等函数来处理副作用。这些函数使你能够监视响应式数据的变化或执行特定的操作，而无需直接在模板中进行 DOM 操作或数据请求。

使用方法
  • 在给watchEffect传入的函数被回调时，其实可以获取到一个参数：onInvalidate（自己命名的，和上面的stop方法类似）
  • 当副作用即将重新执行 或者 侦听器被停止 时会执行该函数传入的回调函数
  • 可以在传入的回调函数中，执行一些清除工作

例如：此时获取的参数就命名为了test

<template>

<div>
{{ age }}-{{ name }}
<button @click="click">1</button>
<button @click="click2">2</button>
</div>
</template>

<script>

import { reactive,ref,watchEffect} from 'vue';
export default {
 setup(){
  const name=ref("dls")
  const age=ref(17)
  const xx=watchEffect((res)=>{
    console.log(age.value,name.value)
    res(()=>{ 
      console.log("去除副作用")
    })
  })
  const click=()=>{
    age.value++
    if (age.value > 22) {
        // 停止监听
        xx();
      }
  }
  const click2=()=>{
   name.value="hhh"
  }
  return{
    name,
    age,
    click,
    click2
  }
 }
}
</script>

<style>

</style>

watchEffect的时机

  • pre : 默认值,它会在元素 挂载 或者 更新 之前执行
  • post : 元素 挂载 或者 更新 之后执行
  • sync : 强制同步一起执行，效率很低，不推荐

和watch的区别

  • wathc必须指定数据源，watchEffect自动收集依赖
  • watch监听到改变，可以拿到改变前后的值，watchEffect只能拿到最新的值
  • watch第一次默认不执行，watchEffect默认直接执行一次
StupidFrontEnd
关注
[vue2/vue3] 详细剖析watch、computed、watchEffect的区别，原理解读
共同学习，共同成长
07-01 1965
watch​适用于需要有条件地监听数据变化的场景，computed​适用于创建派生数据和性能优化，而watchEffect适用于自动追踪依赖的场景。在实际应用中，根据具体需求选择合适的API可以更好地发挥Vue的响应式能力。
vue3学习教程第六节（vue3 中 computed watch watchEffect）
weixin_39593730的博客
03-15 648
vue 项目中 computed() 、watch() 、watchEffect()的使用以及注意事项
五、【Vue3】——计算属性与监视（computed&watch&watchEffect）
yifei1234567的博客
04-02 2132
Vue3中的计算属性computed和监视watch与Vue2中的配置功能一致，但监视watch在用的时候却存在两个小坑，而且Vue3出现了watchEffect函数，能够更智能化去监视一个对象，下面与小编一起学习探讨一下吧。
vue3.x的watch函数
lmyh1111的博客
06-19 250
一、与vue2.x中的watch配置功能一致；二、两个小‘坑’：(1)、监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置无效）；(2)、监视reactive定义的响应式数据中某个属性时：deep配置有效。...
Vue3--Watch、Watcheffect、Computed的使用和区别
前端工作学习中
07-05 942
Vue3--Watch、Watcheffect、Computed的使用和区别
vue3 watch和computed使用
m0_49641709的博客
09-27 186
vue3 watch computed
vue3中的computed、watchEffect、watch
weixin_45304198的博客
10-05 716
一，computed 用法一：传入一个getter函数 setup() { const firstName = ref('李') const lastName = ref('华') // 传入一个getter函数 const fullName = computed(() => firstName.vaule + lastName.value); } 用法二：传入一个对象，对象包含getter/setter setup() { const firstName = ref('李') cons
vue3 setup 里的计算属性（computed）和侦听器（watch/watchEffect）
热门推荐
青蛙king的博客
07-05 2万+
计算属性在vue3中是一个函数【参考】 VUE3（十四）使用计算属性computed和监听属性watch vue3的计算属性与watch Vue 3 响应式侦听与计算 vue3计算属性（computed）与监听（watch） Vue3官网-高级指南（十七）响应式计算和侦听（onTrack、onTrigger、onInvalidate、副作用的刷新时机、 、pre）................................................
Vue3-Watch、Watcheffect、Computed的使用和区别
最新发布
07-05
Vue3--Watch、Watcheffect、Computed的使用和区别
vue3 - watchEffect
weixin_42910765的博客
01-25 2790
watchEffectwatch、watchEffect 不同点停止侦听side effect 副作用watchEffect的执行时机watchEffect、computed 的不同Vue 3 watchVue 3 computed特点： watch、watchEffect 不同点 const count = ref(0) watchEffect(() => console.log(count.value)) // -> logs 0 组件初始化的时候就会执行一次 setTimeout(()
Vue3_2024_5天【vue2（3种）和vue3（5种）中watch的使用场景】watch、computed
qq_41930094的博客
03-05 733
watch概念：允许你在数据变化时执行特定的逻辑（方法），从而实现更复杂的数据处理和业务逻辑。
【Vue3】computed & watch
Superman_H的博客
06-14 906
# computed - 在组合式 API 中，计算属性 computed 是一个函数 1. 完整写法 - 接收一个 [配置对象] 作为参数：`computed( { get(){ return X }, set(val){ } } )` 配置对象有 2 个配置项：getter、setter； getter：获取当前计算属性时触发；返回一个 ref 对象； setter：修改当前计算属性时触发；新值会作为参数传入； computed 会自动追踪响应
Vue3：computed计算属性和watch监视以及watchEffect函数原理和用法（含vue2用法）
weixin_50236973的博客
12-13 534
Vue3：computed计算属性和watch监视以及watchEffect函数原理和用法（含vue2用法）
【VUE基础】VUE3第四节—核心语法之computed、watch、watcheffect
TT小子的博客
07-04 494
结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。watchEffect：不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)。监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。都是新值，因为它们是同一个对象。
【Vue3基础】Vue3中的 computed、watch 和 watchEffect
cannotbecounted的博客
07-07 761
对Vue3中的计算属性、侦听属性进行简要的介绍。
Vue3中computed、watch、watchEffect的区别
JNPF 专注低代码开发
03-12 1186
其实看看源码就好理解了，执行 get 方法时，会把返回值存入 _value ，template 直接从 _value 属性获取数据，在需要更新缓存的时候才会调用 getter，这样就实现了缓存功能。细心的人会发现，开发内部工具的过程中，大量的页面、场景、组件等在不断重复，这种重复造轮子的工作，浪费工程师的大量时间。composition API 的 watch 非常好理解，他是一个函数，第一个参数要指定一个被侦听对象，第二个参数是回调函数，在被侦听的对象发生变化时，执行回调函数。
Vue3中的computed、watch和watchEffect的区别
DM_Cxx的博客
06-25 727
先前已经写过Vue3中watch和的文章，可以看这里，该篇文章主要聊聊computed特性以及这三者之间的区别。computed相信大家都不陌生，只是Vue中出现了watch和等侦听器，这三者大多数情景下相同结果的使用体验，使得我们模糊了这三者之前的作用区别。computed又称作，先给段官方描述 ⬇接受一个 getter 函数，。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。computed。
vue3 setup中watch
weixin_50736511的博客
12-10 7192
vue2使用watch(简写) <template > 姓名:{{name}} <br> <button @click="change">修改姓名 </button> </template> <script> import { computed, reactive, ref } from "@vue/reactivity"; // 引入自定义hooks export default { watch: { na
vue3 watch watcheffect区别
04-29
在 Vue 3 中，watch 和 watchEffect 都是用于监听数据变化的 API，但是它们的实现方式和使用方式略有不同。 watch 选项是一个函数，接收两个参数：新值和旧值，并且可以通过配置选项来控制 watch 的行为。watch 可以监听指定的数据变化，例如一个对象的某个属性或一个数组的某个索引值。当监听的数据变化时，watch 函数就会被调用。 watchEffect 是一个立即执行的函数，它会自动追踪其依赖，并在依赖变化时重新执行。watchEffect 的依赖可以是任何响应式数据，包括 ref、reactive、computed 等，也可以是一个普通的变量或函数。watchEffect 函数中使用的响应式数据会被自动追踪，当这些数据变化时，watchEffect 函数会被重新执行。 总的来说，watch 更适合监听指定的数据变化，而 watchEffect 更适合在函数内部响应式地使用数据。同时，watchEffect 可以更方便地处理异步操作，因为它可以自动追踪异步操作中使用的响应式数据，并在数据变化时重新执行。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值