Vue3中的computed,watch,watchEffect如何使用

這篇文章主要介紹“Vue3中的computed,watch,watchEffect如何使用”，在日常操作中，相信很多人在Vue3中的computed,watch,watchEffect如何使用問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Vue3中的computed,watch,watchEffect如何使用”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、computed

<template>
  姓：<input v-model="person.firstName"><br/><br/>
  名：<input  v-model="person.lastName"><br/><br/>
  <span>全名：{{person.fullname}}</span><br/><br/>
  <span>全名：<input v-model="person.fullname"></span>
</template>

<script>
import {reactive,computed} from 'vue'
export default {
  name: 'HelloWorld',
  setup(){
    let person = reactive({
      firstName:"張",
      lastName:"三"
    })
    //computed簡(jiǎn)寫形式，沒考慮修改
    /*person.fullname = computed(()=>{
      return person.firstName+"-"+person.lastName;
    })*/
    person.fullname = computed({
      get(){
        return person.firstName+"-"+person.lastName;
      },
      set(value){
        const nameArr = value.split('-');
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      }
    })
    return{
      person,
    }
  }
}
</script>

二、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 的寫法

<template>
  <h3>當(dāng)前求和為：{{ sum }}</h3>
  <button @click="sum++">點(diǎn)我sum++</button>
</template>

<script>
import {ref} from 'vue'

export default {
  name: 'Demo',
  watch: {
    /*sum(oldValue,newValue){
      console.log("sum發(fā)生了變化",oldValue,newValue);
    }*/
    sum: {
      immediate: true,
      deep:true,
      handler(newValue,oldValue) {
        console.log("sum發(fā)生了變化", newValue, oldValue);
      }
    }
  },
  setup() {
    let sum = ref(0);

    return {
      sum,
    }
  }
}
</script>

Vue3 中這樣寫

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

<template>
  <h3>當(dāng)前求和為：{{ sum }}</h3>
  <button @click="sum++">點(diǎn)我sum++</button>>
</template>
<script>
import {ref, watch} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");
    //情況一：監(jiān)視r(shí)ef所定義的一個(gè)響應(yīng)式數(shù)據(jù)
    watch(sum, (newValue, oldValue) => {
      console.log("sum發(fā)生了變化", newValue, oldValue);
    })

    return {
      sum
    }
  }
}
</script>

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í)

<template>
  <h3>當(dāng)前求和為：{{ sum }}</h3>
  <button @click="sum++">點(diǎn)我sum++</button>
  <hr/>
  <h3>信息為：{{ msg }}</h3>
  <button @click="msg+='!'">點(diǎn)我sum++</button>
</template>
<script>
import {ref, watch} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    //情況二：監(jiān)視r(shí)ef所定義的多個(gè)響應(yīng)式數(shù)據(jù)
    watch([sum,msg],(newValue, oldValue) => {
      console.log("sum發(fā)生了變化", newValue, oldValue);
    })

    return {
      sum,
      msg
    }
  }
}
</script>

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

<template>
  <h3>姓名：{{ person.name }}</h3>
  <h3>年齡：{{ person.age }}</h3>
  <h3>薪資：{{ person.job.j1.salary }}K</h3>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">修改年齡</button>
  <button @click="person.job.j1.salary++">漲薪</button>
</template>
<script>
import {reactive, watch} from 'vue'

export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      name: "張三",
      age: 18,
      job:{
        j1:{
          salary:20
        }
      }
    })
    //情況三：監(jiān)視r(shí)eactive所定義的一個(gè)響應(yīng)式數(shù)據(jù)全部屬性
    // 1\注意：無法正確獲取oldvalue
    // 2\注意：強(qiáng)制開啟了深度監(jiān)視（deep配置無效）
    watch(person, (newValue, oldValue) => {
      console.log("person發(fā)生了變化", newValue, oldValue);
    })

    return {
      person
    }
  }
}
</script>

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
    }
  }
}
</script>

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

<template>
  姓：<input v-model="person.firstName">
  名：<input  v-model="person.lastName">
  <span>全名：{{fullName}}</span>
  <span>全名：<input v-model="fullName"></span>
</template>
<script lang="ts">
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
    }
  }
});
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

到此，關(guān)于“Vue3中的computed,watch,watchEffect如何使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！