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>
是不是讓你很失望,怎麼會這樣
其實:其實我...我...我...也不知道為啥。
遇見問題,這是你成長的機會,如果你能夠解決,這就是收獲。
作者:晚來南風晚相識