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>

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

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

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

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

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

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

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