欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3中其他的Composition?API詳解

 更新時(shí)間:2023年03月24日 14:49:10   作者:名之以父  
這篇文章主要介紹了Vue3中其他的Composition?API,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.shallowReactive 與 shallowRef

  • shallowReactive:只處理對象最外層屬性的響應(yīng)式(淺響應(yīng)式)。
  • shallowRef:只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進(jìn)行對象的響應(yīng)式處理。
  • 什么時(shí)候使用?
    • 如果有一個(gè)對象數(shù)據(jù),結(jié)構(gòu)比較深, 但變化時(shí)只是外層屬性變化 ===> shallowReactive。
    • 如果有一個(gè)對象數(shù)據(jù),后續(xù)功能不會修改該對象中的屬性,而是生新的對象來替換 ===> shallowRef。

2.readonly 與 shallowReadonly

  • readonly: 讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的(深只讀)。
  • shallowReadonly:讓一個(gè)響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x的(淺只讀)。
  • 應(yīng)用場景: 不希望數(shù)據(jù)被修改時(shí)。

3.toRaw 與 markRaw

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

4.customRef

  • 作用:創(chuàng)建一個(gè)自定義的 ref,并對其依賴項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯式控制。
  • 實(shí)現(xiàn)防抖效果:
<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue準(zhǔn)備好的內(nèi)置ref
			//自定義一個(gè)myRef
			function myRef(value,delay){
				let timer
				//通過customRef去實(shí)現(xiàn)自定義
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告訴Vue這個(gè)value值是需要被“追蹤”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告訴Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序員自定義的ref
			return {
				keyword
			}
		}
	}
</script>

到此這篇關(guān)于Vue3中其他的Composition API的文章就介紹到這了,更多相關(guān)Vue3 Composition API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • LogicFlow內(nèi)置插件使用實(shí)例

    LogicFlow內(nèi)置插件使用實(shí)例

    這篇文章主要為大家介紹了LogicFlow內(nèi)置插件使用實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例

    vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法示例

    這篇文章主要介紹了vue基礎(chǔ)之data存儲數(shù)據(jù)及v-for循環(huán)用法,結(jié)合實(shí)例形式分析了vue.js使用data存儲數(shù)據(jù)、讀取數(shù)據(jù)及v-for遍歷數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
    2019-03-03
  • 詳解Nuxt.js部署及踩過的坑

    詳解Nuxt.js部署及踩過的坑

    這篇文章主要介紹了詳解Nuxt.js部署及踩過的坑,Nuxt.js 提供了兩種發(fā)布部署應(yīng)用的方式:服務(wù)端渲染應(yīng)用部署 和 靜態(tài)應(yīng)用部署。本文主要說說服務(wù)端渲染應(yīng)用部署,感興趣的小伙伴們可以參考一下
    2018-08-08
  • vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能(完整代碼)

    vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能(完整代碼)

    本文通過實(shí)例代碼給大家介紹vue3 elementPlus 表格實(shí)現(xiàn)行列拖拽及列檢索功能,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-10-10
  • Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能

    Jeeplus-vue?實(shí)現(xiàn)文件的上傳功能

    這篇文章主要介紹了Jeeplus-vue?實(shí)現(xiàn)文件的上傳,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-09-09
  • Vue3使用mitt進(jìn)行組件通信的步驟

    Vue3使用mitt進(jìn)行組件通信的步驟

    這篇文章主要介紹了Vue3使用mitt進(jìn)行組件通信的步驟,幫助大家更好的理解和學(xué)習(xí)使用vue,感興趣的朋友可以了解下
    2021-05-05
  • Vue.js實(shí)現(xiàn)九宮格圖片展示模塊

    Vue.js實(shí)現(xiàn)九宮格圖片展示模塊

    這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)九宮格圖片展示模塊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法

    Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法

    這篇文章主要介紹了Vue-CLI 3 scp2自動部署項(xiàng)目至服務(wù)器的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • vue2.0 keep-alive最佳實(shí)踐

    vue2.0 keep-alive最佳實(shí)踐

    這篇文章主要為大家詳細(xì)介紹了vue2.0 keep-alive的最佳實(shí)踐,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • vue插件v-touch的坑及解決(不能上下滑動)

    vue插件v-touch的坑及解決(不能上下滑動)

    這篇文章主要介紹了vue插件v-touch的坑及解決(不能上下滑動),具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-03-03

最新評論