Vue3中markRaw用法

槑孒發表於2024-05-22
Vue

markRaw

https://cn.vuejs.org/api/reactivity-advanced.html#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: "echohye",
    sex: "未知",
});
let likes = ['吃飯','睡覺'];
// 往響應式物件中新增一個likes屬性，該屬性是響應式
// 但是我們使用markRaw包裹後這個likes屬性值是不具有響應式的
person.likes = markRaw(likes);
// 因此試圖是不會更新的
let 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: "echohye",
    sex:'未知',
    likes:['吃飯','睡覺']
});
 
let likes = ['吃飯','睡覺'];
person.likes = markRaw(likes);
let canChange = () => {
    person.name='發生改變了'
    person.likes[0]= '我要吃飯';
    person.likes[1]= '我要睡覺';
    console.log(person.likes);
};
</script>
// 檢視會發生改變！！！

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

我們剛剛說了一個結論:
只要用markRaw包裹的物件。那麼這個物件就不是響應式物件。則試圖就不會發生更改。
這一句話，只說對了一半。
如果你只直接更改被markRaw包裹的物件。試圖是不會發生改變的。
但是如果你下先更改沒有被markRaw包裹的屬性，
然後在更改被markRaw包裹的物件，這個時候試圖就會發生改

轉載至vue3中markRaw的使用
參考
markraw官方文件介紹
vue3中markRaw詳解

相關文章