目錄

?一，watchEffect

二，生命周期

三，什么是hooks?

四，toRef

?五，其他組合式API

5.1shallowReactive&shallowRef

5.2readonly&shallowReadonly

5.3.toRaw&markRaw

5.4自定義Ref-customRef

?5.5provide$inject

5.6響應(yīng)式數(shù)據(jù)的判斷

寫在最后

?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-429414.html

?

?一，watchEffect

1.watch: 既要指明監(jiān)視的屬性，也要指明監(jiān)視的回調(diào)。

2.watchEffect: 不用指明監(jiān)視哪個(gè)屬性，監(jiān)視的回調(diào)中用到哪個(gè)屬性，那就監(jiān)視哪個(gè)屬性。

3.watchEffect類似computed但computed注重的計(jì)算出來(lái)的值(回調(diào)函數(shù)的返回值)，所以必須要寫返回值而watchEffect更注重的是過(guò)程(回調(diào)函數(shù)的函數(shù)體)，所以不用寫返回值

4.watchEffect監(jiān)視的是他所使用到的數(shù)據(jù)，當(dāng)它所使用到的數(shù)據(jù)發(fā)生了變化，watchEffect函數(shù)就會(huì)執(zhí)行，有點(diǎn)類似computed計(jì)算屬性，但是computed更注重執(zhí)行后的返回值

 ? ? ? ? ? ?watchEffect(() => {
 ? ? ? ? ? ? ? ?const x = sum.value
 ? ? ? ? ? ? ? ?const y = person.job.work1.gongzi
 ? ? ? ? ? ? ? ?console.log('watchEffect變化了')
 ? ? ? ? ?  })

二，生命周期

Vue3提供的組合式API對(duì)應(yīng)關(guān)系

三，什么是hooks?

其實(shí)hooks的本質(zhì)就是一個(gè)函數(shù)，他負(fù)責(zé)把setup函數(shù)中的組合式API進(jìn)行封裝，以便得到更好的復(fù)用類似于vue2中的mixin

1.首先創(chuàng)建一個(gè)hooks文件

?2.將方法，API封裝起來(lái)并導(dǎo)出

3.引入hooks并使用封裝的方法

?

四，toRef

作用: 創(chuàng)建一個(gè) ref 對(duì)象，其value值指向另一個(gè)對(duì)象中的某個(gè)屬性 語(yǔ)法:.const name = toRef(person,'name') 應(yīng)用:要將響應(yīng)式對(duì)象中的某個(gè)屬性單獨(dú)提供給外部使用時(shí) 擴(kuò)展: toRefs與toRef 功能一致，但可以批量處理多個(gè)ref對(duì)象，語(yǔ)法: toRefs(person)

?

let person = reactive(
 ? ? ? ? ? ? ?  {
 ? ? ? ? ? ? ? ? ? ?name:'小明',
 ? ? ? ? ? ? ? ? ? ?age:11,
 ? ? ? ? ? ? ? ? ? ?sex:'男',
 ? ? ? ? ? ? ? ? ? ?job:{
 ? ? ? ? ? ? ? ? ? ? ? ?j1:{
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?work:"student",
 ? ? ? ? ? ? ? ? ? ? ? ? ? ?salary:1000
 ? ? ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ? ? ?  }
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  ) ? ? ? ? ? ?
return {
 ? ? ? ? ? ? ? ?person,
 ? ? ? ? ? ? ? ?// 逐個(gè)拆分person里面的屬性并且交出去
 ? ? ? ? ? ? ? ?// name:toRef(person,'name'),
 ? ? ? ? ? ? ? ?// age:toRef(person,'age'),
 ? ? ? ? ? ? ? ?// salary:toRef(person.job.j1,'salary')
?
 ? ? ? ? ? ? ? ?// 將person對(duì)象拆分并交出去
 ? ? ? ? ? ? ? ?...toRefs(person)
 ? ? ? ? ?  }

?

?五，其他組合式API

5.1shallowReactive&shallowRef

sharlowReactive: 只處理對(duì)象最外層屬性的響應(yīng)式 (淺響應(yīng)式)

?shallowRef: 只處理基本數(shù)據(jù)類型的響應(yīng)式,不進(jìn)行對(duì)象的響應(yīng)式處理

?1.什么時(shí)候使用? 如果有一個(gè)對(duì)象數(shù)據(jù)，結(jié)構(gòu)比較深,但變化時(shí)只是外層屬性變化 ===> shallowReactive. 如果有一個(gè)對(duì)象數(shù)據(jù)，后續(xù)功能不會(huì)修改該對(duì)象中的屬性，而是生新的對(duì)象來(lái)替換 ===> shallowRef

?

?

5.2readonly&shallowReadonly

1.readonly: 讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的 (深只讀)

2.shallowReadonly: 讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的 (淺只讀)

3.應(yīng)用場(chǎng)景: 不希望數(shù)據(jù)被修改時(shí)

?

5.3.toRaw&markRaw

toRaw 1.作用:將一個(gè)由 reactive 生成的響應(yīng)式對(duì)象轉(zhuǎn)為普通對(duì)象 使用場(chǎng)景:用于讀取響應(yīng)式對(duì)象對(duì)應(yīng)的普通對(duì)象，對(duì)這個(gè)普通對(duì)象的所有操作，不會(huì)引起頁(yè)面更新0 markRaw 1.作用: 標(biāo)記一個(gè)對(duì)象，使其永遠(yuǎn)不會(huì)再成為響應(yīng)式對(duì)象 2.應(yīng)用場(chǎng)景:①有些值不應(yīng)被設(shè)置為響應(yīng)式的，例如復(fù)雜的第三方類庫(kù)等②當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時(shí)，跳過(guò)響應(yīng)式轉(zhuǎn)換可以提高性能。

5.4自定義Ref-customRef

<template>
 ? ?<input type="text" v-model="dataOne">
 ? ?<div>{{dataOne}}</div>
</template>
?
<script>
import {ref,customRef} from 'vue'
export default {
 ? ?name:'App',
 ? ?setup(){
 ? ? ? ?function myRew(value,delay){
 ? ? ? ?return customRef((track, trigger)=>{
 ? ? ? ? ? ?let timer
 ? ? ? ? ? ?return {
 ? ? ? ? ? ? ? ?get(){
 ? ? ? ? ? ? ? ? ? ?console.log('讀取數(shù)據(jù)')
 ? ? ? ? ? ? ? ? ? ?track()
 ? ? ? ? ? ? ? ? ? ?return value
 ? ? ? ? ? ? ?  },
 ? ? ? ? ? ? ? ?set(newValue){
 ? ? ? ? ? ? ? ? ? ?clearTimeout(timer)
 ? ? ? ? ? ? ? ? ? timer = setTimeout(()=>{
 ? ? ? ? ? ? ? ? ? ? ? console.log('修改數(shù)據(jù)')
 ? ? ? ? ? ? ? ? ? ? ? value = newValue
 ? ? ? ? ? ? ? ? ? ? ? trigger()
 ? ? ? ? ? ? ? ? ? },delay)
 ? ? ? ? ? ? ?  }
 ? ? ? ? ?  }
 ? ? ?  })
 ? ? ?  }
 ? ?let dataOne = myRew('hello',666)
 ? ? ? ?return{
 ? ? ? ? ? ?dataOne,
 ? ? ? ? ? ?myRew
 ? ? ?  }
 ?  },
};
</script>
<style>
</style>

?5.5provide$inject

//祖組件

<script>
 ? ?import Child from "@/components/Child";
 ? ?import {toRefs,reactive,provide} from 'vue'
 ? ?export default {
 ? ? ? ?name: 'App',
 ? ? ? ?components: {Child},
 ? ? ? ?setup() {
 ? ? ? ? ? ?let car = reactive({
 ? ? ? ? ? ? ? ?name: '奔馳',
 ? ? ? ? ? ? ? ?price: '100w'
 ? ? ? ? ?  })
 ? ? ? ? ? ?provide('car',car)
 ? ? ? ? ? ?return {...toRefs(car)}
 ? ? ?  }
 ?  };
</script>
//孫組件

<script>
import {inject,toRefs} from 'vue'
 ? ?export default {
 ? ? ? ?name:'Son',
 ? ? ? ?setup() {
?
 ? ? ? ? ? ?let car = inject('car')
 ? ? ? ? ? ?return {...toRefs(car)}
 ? ? ?  }
 ?  };
</script>

5.6響應(yīng)式數(shù)據(jù)的判斷

isRef:檢查一 個(gè)值是否為一個(gè)ref對(duì)象 isReactive:檢查- 個(gè)對(duì)象是否是由rreactive創(chuàng)建的響應(yīng)式代理 isReadonly:檢查一個(gè)對(duì)象是否 是由readonly 創(chuàng)建的只讀代理 isProxy:檢查一個(gè)對(duì)象是否是由reactive 或者readonly 方法創(chuàng)建的代理

寫在最后

博主簡(jiǎn)介?? 某神秘組織成員
前端小白，前端優(yōu)質(zhì)創(chuàng)作者，阿里云博主，一個(gè)開(kāi)朗的網(wǎng)友
有一個(gè)名為山魚社區(qū)的社區(qū)，收錄許多優(yōu)秀博主的創(chuàng)作內(nèi)容
創(chuàng)作不易希望能得到您的支持，您的支持是我創(chuàng)作的動(dòng)力?

?

?

?

?

到了這里，關(guān)于【Vue3】vue3中的watchEffect使用及其他的API的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！