亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3常用響應(yīng)式對(duì)象的api,你全用過(guò)了嗎

 更新時(shí)間:2023年02月01日 11:49:14   作者:前端不禿頭  
這篇文章主要給大家介紹了關(guān)于vue3常用響應(yīng)式對(duì)象api的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

Ⅰ. ref、reactive ( 遞歸監(jiān)聽(tīng) )

import {ref,reactive} from 'vue';
setup() {
    const num =  ref(123);
    num.value = 456;
     
    const obj = reactive({num:123});
    obj.value = 456;
}
  • ref 對(duì)象 在 html 模板中會(huì) 自動(dòng)添加 value ( ref 對(duì)象中__v_isRef:true 進(jìn)行判斷的 )
  • ref 對(duì)象 => reactive( { value:0 } ) 底層自動(dòng)轉(zhuǎn)換為 reactive
  • 最終 基本數(shù)據(jù) 類(lèi)型采用 => (Object.defineProperty) ,引用數(shù)據(jù) 類(lèi)型采用 => ( proxy 代理 )

Ⅱ. isRef、isReactive ( 判斷 )

import {isRef,isReactive} from 'vue';
setup() {
	const num = ref(123)
    console.log(isRef(num))  // => true
}
  • 用于判斷是否是 Ref 和 Reactive 創(chuàng)建的響應(yīng)對(duì)象
  • 使用場(chǎng)景較少

Ⅲ. toRef 和 toRefs ( 解構(gòu) )

toRef (一個(gè)屬性)

import { toRef , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
    const width = toRef(obj,'width')
	
	return {
		width
	}
}
  • 將一個(gè)響應(yīng)對(duì)象的屬性,當(dāng)作 響應(yīng)對(duì)象 單獨(dú)拿出來(lái) 。

toRefs ( 所有 )

import { toRefs , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
    const { width, height }= toRefs(obj)
	
	return {
		width, height
	}
}
  • 將多個(gè)或所有屬性,拿出來(lái) 且還是響應(yīng)對(duì)象,
  • 一般在返回的時(shí)候一次性全部導(dǎo)出 ??
import { toRefs , reactive } from 'vue';
setup() {
	const obj = reactive({ width:10, height:20 })
	
	return {
		...toRefs(obj)
	}
}

Ⅳ. toRaw 、 markRaw ( 解除代理)

toRaw ( 不影響本身 )

import {toRaw} from 'vue';
setup(){
    const num1 =  ref(123)
    const num2 = toRaw(num1)
    console.log(num2 === 123)  //=>true
}
  • 不影響原數(shù)據(jù) ,相當(dāng)于拷貝當(dāng)前的值
  • 拷貝的值,不在是響應(yīng)式對(duì)象

markRaw ( 添加 非響應(yīng)對(duì)象 屬性 )

import { markRaw, reactive } from "vue";
setup(){
	const obj = reactive({ num:1 }); //讓數(shù)據(jù)無(wú)法被追蹤
	      obj.noUpdate = markRaw({num:1});

	function add() {
  		obj.num++;      // 頁(yè)面數(shù)據(jù) 會(huì)更新
  	
  		obj.noUpdate.num++; //頁(yè)面數(shù)據(jù) 不會(huì)更新
	}
	return { obj , add }
}
  • 通過(guò) markRaw 添加的值 => 其中的屬性變化,頁(yè)面不會(huì)監(jiān)聽(tīng)的到
  • 用于添加搞定的參數(shù),不會(huì)發(fā)生不會(huì)的 ( 從而節(jié)約資源 )

Ⅴ. unref ( 拷貝 )

const aaa = ref('abc');
const bbb = unref(aaa); 
  • 相當(dāng)于 bbb = isRef(aaa) ? aaa.value : aaa 的語(yǔ)法糖
  • 可以用于拷貝

Ⅵ. shallowRef 、shallowReactive( 非遞歸監(jiān)聽(tīng) )

shallowRef 、shallowReactive(非遞歸監(jiān)聽(tīng))

import {shallowRef,shallowReactive} from 'vue';
setup(){
	const  obj1 = shallowRef({a:1,b:{c:2})
	const  obj2 = shallowReactive({a:1,b:{c:2})

	obj1.value.a = 2  //頁(yè)面未更新

	obj2.b.c = 3  //頁(yè)面未更新
}
  • obj1 (shallowRef)=> 只監(jiān)聽(tīng)第一層( value 的值,不監(jiān)聽(tīng)a、b、c、d 的值)
  • obj2 (shallowReactive)=> 只監(jiān)聽(tīng)第一層( a、b 的值,不監(jiān)聽(tīng) c 的值)

Ⅶ. triggerRef (強(qiáng)制更新)

import {triggerRef, shallowRef} from 'vue';
setup(){
	const  obj1 = shallowRef({a:1,b:{c:2})
    obj1.value.a = 2 //頁(yè)面沒(méi)有發(fā)生更新,因?yàn)橹槐O(jiān)聽(tīng)value第一層

	triggerRef(obj1);   // 強(qiáng)制更新
  • 非遞歸監(jiān)聽(tīng),只監(jiān)聽(tīng)首層 ,消耗的資源小;
  • 配合 triggerRef 強(qiáng)制更新 => 性能要大于 > 直接使用 (ref 和 reactive)

總結(jié)

到此這篇關(guān)于vue3常用響應(yīng)式對(duì)象的api的文章就介紹到這了,更多相關(guān)vue3響應(yīng)式對(duì)象api內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue框架搭建之a(chǎn)xios使用教程

    vue框架搭建之a(chǎn)xios使用教程

    本文重點(diǎn)介紹axios如何配合vue搭建項(xiàng)目框架,文章給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2018-07-07
  • vue表單驗(yàn)證你真的會(huì)了嗎?vue表單驗(yàn)證(form)validate

    vue表單驗(yàn)證你真的會(huì)了嗎?vue表單驗(yàn)證(form)validate

    這篇文章主要介紹了vue表單驗(yàn)證你真的會(huì)了嗎?vue表單驗(yàn)證(form)validate,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue3在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用

    vue3在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用

    這篇文章主要為大家詳細(xì)介紹了vue3如何在單個(gè)組件中實(shí)現(xiàn)類(lèi)似mixin的事件調(diào)用,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • vue實(shí)現(xiàn)背景圖片鋪滿整個(gè)屏幕(適配所有機(jī)型)

    vue實(shí)現(xiàn)背景圖片鋪滿整個(gè)屏幕(適配所有機(jī)型)

    在網(wǎng)頁(yè)設(shè)計(jì)中,背景全屏是一種常見(jiàn)的視覺(jué)效果,通過(guò)正確的CSS樣式設(shè)置,可以實(shí)現(xiàn)背景全屏且內(nèi)容在固定一屏大小內(nèi)完全顯示,如果內(nèi)容超出一屏,則可以通過(guò)滾動(dòng)條查看剩余內(nèi)容,這種設(shè)計(jì)可以提升用戶(hù)的瀏覽體驗(yàn),使網(wǎng)頁(yè)看起來(lái)更加整潔和專(zhuān)業(yè)
    2024-10-10
  • 深入了解Vue3組件傳值方式

    深入了解Vue3組件傳值方式

    學(xué)習(xí)過(guò)?vue2?的寶子們肯定知道,組件傳值是?vue?項(xiàng)目開(kāi)發(fā)過(guò)程中必不可少的功能場(chǎng)景,在?vue2?里面有很多傳值的方式。今天就來(lái)和大家講講Vue3的組件傳值方式,需要的可以參考一下
    2022-07-07
  • vue項(xiàng)目main.js配置及使用方法

    vue項(xiàng)目main.js配置及使用方法

    main.js是項(xiàng)目的入口文件,項(xiàng)目中所有的頁(yè)面都會(huì)加載main.js,本文主要介紹了vue項(xiàng)目main.js配置及使用方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2023-05-05
  • vue在自定義組件上使用v-model和.sync的方法實(shí)例

    vue在自定義組件上使用v-model和.sync的方法實(shí)例

    自定義組件的v-model和.sync修飾符其實(shí)本質(zhì)上都是vue的語(yǔ)法糖,用于實(shí)現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下
    2022-07-07
  • vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)

    vue 實(shí)現(xiàn)滾動(dòng)到底部翻頁(yè)效果(pc端)

    這篇文章主要介紹了pc端vue 滾動(dòng)到底部翻頁(yè)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
    2019-07-07
  • Vue3獲取元素DOM的兩種方法

    Vue3獲取元素DOM的兩種方法

    Vue3 DOM是Vue.js框架的一部分,用于處理與瀏覽器DOM相關(guān)的操作,它提供了一組API和工具,使開(kāi)發(fā)者能夠輕松地操作和管理DOM元素,本文給大家介紹了Vue3獲取元素DOM的兩種方法:ref模板引用和傳統(tǒng)方法,并有詳細(xì)的代碼示例,需要的朋友可以參考下
    2024-04-04
  • vue3中el-table實(shí)現(xiàn)表格合計(jì)行的示例代碼

    vue3中el-table實(shí)現(xiàn)表格合計(jì)行的示例代碼

    這篇文章主要介紹了vue3中el-table實(shí)現(xiàn)表格合計(jì)行,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-01-01

最新評(píng)論