這篇“Vue3中的computed,watch,watchEffect怎么使用”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue3中的computed,watch,watchEffect怎么使用”文章吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供祥云企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、成都h5網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為祥云眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

一、computed

二、watch

• 1、與 Vue2.x 中 watch 配置功能一致

• 2、兩個(gè)小"坑"：

• 監(jiān)視 reactive 定義的響應(yīng)式數(shù)據(jù)時(shí)： oldValue 無法正確獲取、強(qiáng)制開啟了深度監(jiān)視(deep配置失效)

• 監(jiān)視 reactive 定義的響應(yīng)式數(shù)據(jù)中某個(gè)屬性時(shí)：deep 配置有效

vu2 的寫法

Vue3 中這樣寫

1、情況一：監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)

watch 還可以傳一個(gè)配置項(xiàng)，把 immediate 等配置傳進(jìn)去：

watch(sum, (newValue, oldValue) => {
      console.log("sum發(fā)生了變化", newValue, oldValue);
    },{immediate:true})

2、情況二：當(dāng)有多個(gè)信息需要同時(shí)監(jiān)視時(shí)

3、情況三：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)

4、情況四：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)某個(gè)屬性

//情況四：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)某個(gè)屬性
    watch(()=>person.name, (newValue, oldValue) => {
      console.log("person的name發(fā)生了變化", newValue, oldValue);
    })

5、情況五：監(jiān)視 reactive 所定義的一個(gè)響應(yīng)式數(shù)據(jù)某些屬性

//情況五：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)某個(gè)屬性
    watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
      console.log("person的name或age發(fā)生了變化", newValue, oldValue);
    })

6、特殊情況，監(jiān)視對(duì)象中的某個(gè)對(duì)象屬性，要開始deep:true

watch(()=>person.job, (newValue, oldValue) => {
	console.log("person的job發(fā)生了變化", newValue, oldValue);
},{deep:true})//由于監(jiān)視的是reactive對(duì)象中的某個(gè)屬性，deep奏效

7、監(jiān)視 ref 定義的對(duì)象響應(yīng)數(shù)據(jù)，需要.value或deep:true

	let person = ref({
      name: "張三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watch(person.value, (newValue, oldValue) => {
      console.log("person的value發(fā)生了變化", newValue, oldValue);
    })
    或
    watch(person, (newValue, oldValue) => {
      console.log("person的value發(fā)生了變化", newValue, oldValue);
    },{deep:true})

三、watchEffect

watch 的套路是：既要指明監(jiān)視的屬性，也要指明監(jiān)視的回調(diào)

watchEffect 的套路是：不用指明監(jiān)視哪個(gè)屬性，監(jiān)視的回調(diào)中用到哪個(gè)屬性，那就監(jiān)視哪個(gè)屬性

watchEffect有點(diǎn)像computed：

。但computed注重的計(jì)算出來的值（回調(diào)函數(shù)的返回值)，所以必須要寫返回值

。而watchEffect更注重的是過程（回調(diào)函數(shù)的函數(shù)體)，所以不用寫返回值

//watchEffect所指定的回調(diào)中用到的數(shù)據(jù)只要發(fā)生變化,則直接重新執(zhí)行回調(diào)
watchEffect(()=>{
	const xl = sum.value
	const x2 = person.age
	console.log( "watchEffect配置的回調(diào)執(zhí)行了")
})

例如還用上邊的例子：

import {reactive,watchEffect} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "張三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    watchEffect(()=>{
      const x1 = person.name;
      console.log("watchEffect所指定的回調(diào)執(zhí)行了"+x1);
    })
    return {
      person
    }
  }
}

最后，我們使用 watch 和 watchEffect 實(shí)現(xiàn)姓名的例子

import {defineComponent, reactive, ref,watch,watchEffect} from 'vue';
export default defineComponent({
  setup(){
    let person = reactive({
      firstName:"張",
      lastName:"三"
    });

    const fullName = ref('');

    watch(person,({firstName,lastName})=>{
      fullName.value = firstName+"-"+lastName
    },{immediate:true})

    //不用使用immediate，默認(rèn)執(zhí)行一次
    /*watchEffect(()=>{
      fullName.value = person.firstName+"-"+person.lastName
    })*/

    watchEffect(()=>{
      const name = fullName.value.split('-');
      person.firstName = name[0];
      person.lastName = name[1];
    })
    return{
      person,
      fullName
    }
  }
});

以上就是關(guān)于“Vue3中的computed,watch,watchEffect怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。