vue3中markRaw的使用

来源:https://www.cnblogs.com/IwishIcould/archive/2022/05/11/16257095.html
-Advertisement-
Play Games

markRaw 作用:標記一個對象,使其永遠不會再成為響應式對象 應用場景: 1.有些值不應被設置成響應式時,例如複雜的第三方類庫等 2.當渲染具有不可變數據源的大列表時,跳過響應式轉換可以提高性能 3.在動態渲染組件的時候我們就可以使用 markRaw 包裹。 markRaw 的使用場景 很多時候 ...


markRaw

作用:標記一個對象,使其永遠不會再成為響應式對象
應用場景:
1.有些值不應被設置成響應式時,例如複雜的第三方類庫等
2.當渲染具有不可變數據源的大列表時,跳過響應式轉換可以提高性能
3.在動態渲染組件的時候我們就可以使用 markRaw 包裹。

markRaw 的使用場景

很多時候,我們會遇見這樣的場景。
有一個響應式對象person。
這個響應式對象有很多的屬性。
但是呢?個別屬性是不需要響應式的。比如愛好

markRaw的使用

<template>
    <div>
        <p> 姓名: {{person.name}}</p> 
        <p> 性別: {{person.sex}}</p> 
        <p> 愛好: {{person.likes}}</p> 
        <el-button @click="change">按鈕</el-button>
    </div>
</template>

<script lang="ts" setup>
import { reactive,markRaw } from 'vue'
let person:any = reactive({
    name: "楊光",
    sex:'男',
});
 var likes = ['吃飯','睡覺'];
// 往響應式對象中新增一個likes屬性,該屬性是響應式
// 但是我們使用markRaw包裹後這個likes屬性值是不具有響應式的
    person.likes = markRaw(likes);
// 因此試圖是不會更新的
var change = () => {
    person.likes[0]= '我要吃飯';
    person.likes[1]= '我要睡覺';
    console.log(person.likes);
};
</script>

看了上面的例子你知道了什麼?

看了上面這個例子。
有的小伙伴會說,只要用markRaw包裹的對象。
結論:那麼這個對象就不是響應式對象。則試圖就不會發生更改。

驗證

<template>
    <div>
        <p> 姓名: {{person.name}}</p> 
        <p> 性別: {{person.sex}}</p> 
        <p> 愛好: {{person.likes}}</p> 
        <el-button @click="canChange">按鈕</el-button>
        <!-- <el-button @click="onchange">按鈕</el-button> -->

    </div>
</template>

<script lang="ts" setup>
import { reactive,markRaw } from 'vue'
let person:any = reactive({
    name: "楊光",
    sex:'男',
    likes:['吃飯','睡覺']
});
 
let likes = ['吃飯','睡覺'];
person.likes = markRaw(likes);
let canChange = () => {
    person.name='發生改變了'
    person.likes[0]= '我要吃飯';
    person.likes[1]= '我要睡覺';
    console.log(person.likes);
};
</script>

是不是讓你很失望,怎麼會這樣

其實:其實我...我...我...也不知道為啥。

遇見問題,這是你成長的機會,如果你能夠解決,這就是收穫。

作者:明月人倚樓
出處:https://www.cnblogs.com/IwishIcould/

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

如果覺得這篇文章對你有小小的幫助的話,記得在右下角點個“推薦”哦,或者關註博主,在此感謝!

萬水千山總是情,打賞5毛買辣條行不行,所以如果你心情還比較高興,也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾!

想問問題,打賞了卑微的博主,求求你備註一下的扣扣或者微信;這樣我好聯繫你;(っ•̀ω•́)っ✎⁾⁾!

支付寶 微信 本文版權歸作者所有,歡迎轉載,未經作者同意須保留此段聲明,在文章頁面明顯位置給出原文連接
如果文中有什麼錯誤,歡迎指出。以免更多的人被誤導。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 信息爆發時代,有效率有質量地整理視頻、音頻、文字等信息變得尤為重要。會議、講座、採訪、客服電話等場景均需要形成完整的文字記錄材料,音視頻文件也要配有字幕。語音轉文字的智能化,讓信息錄入即時高效。 在直播類、會議類、筆記類的應用中都具備實時語音轉寫功能。例如,在音視頻會議中,可以將發言內容可視化,即時 ...
  • 本期 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)開發者故事,我們特別採訪了 2 月代碼最佳貢獻者、一位接觸 OpenHarmony 1 年左右,2022 年初便完成高難度開發項目的開發者——潤和軟體資深軟體開發工程師趙海鵬。 ...
  • 前言 【內容】 jQuery菜鳥編程學習筆記 具體詳情看目錄 【目的】 記錄本人在jQuery學習中的筆記 方便日後的工作與學習。 【學習資料】 jQuery教程-菜鳥教程 【溫馨提示】 筆記中有些個人理解後整理的筆記,可能有所偏差,也懇請讀者幫忙指出,謝謝。 jQuery快速瞭解 啥是jQuery ...
  • 至此基本上vue2.0的內容全部結束,後面還有點elementUI和vue3.0的內容過幾天再來更新。 這幾天要回學校去參加畢業答辯,斷更幾天 一.相關理解 是vue的一個插件庫,專門用來實現spa(單頁面應用)的,也就是一直都是一個index.html頁面,他有他的導航區和展示區,雖然只有一個頁面 ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...