欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue3中的computed,watch,watchEffect怎么使用

這篇“Vue3中的computed,watch,watchEffect怎么使用”文章的知識點(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

<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簡寫形式，沒考慮修改
    /*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>
  <h4>當(dāng)前求和為：{{ sum }}</h4>
  <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>
  <h4>當(dāng)前求和為：{{ sum }}</h4>
  <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>

Vue3中的computed,watch,watchEffect怎么使用

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>
  <h4>當(dāng)前求和為：{{ sum }}</h4>
  <button @click="sum++">點(diǎn)我sum++</button>
  <hr/>
  <h4>信息為：{{ msg }}</h4>
  <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>
  <h4>姓名：{{ person.name }}</h4>
  <h4>年齡：{{ person.age }}</h4>
  <h4>薪資：{{ person.job.j1.salary }}K</h4>
  <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);
    })

Vue3中的computed,watch,watchEffect怎么使用

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);
    })

Vue3中的computed,watch,watchEffect怎么使用

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

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

7、監(jiān)視 ref 定義的對象響應(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怎么使用”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：Vue3中的computed,watch,watchEffect怎么使用
URL網(wǎng)址：http://chinadenli.net/article18/ihhogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、ChatGPT、面包屑導(dǎo)航、網(wǎng)站設(shè)計(jì)公司、移動網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化