vue3 markRaw的使用
时间: 2023-12-03 12:52:50 浏览: 27
Vue3 的 markRaw 函数用于将一个对象标记为“非响应式”,即使这个对象被包含在响应式数据中,也不会触发视图的更新。
使用方式:
1.导入 markRaw 函数
```javascript
import { markRaw } from 'vue'
```
2.使用 markRaw 函数标记一个对象为“非响应式”
```javascript
const obj = markRaw({ name: 'Tom', age: 18 })
```
3.将标记为“非响应式”的对象包含在响应式数据中
```javascript
const state = reactive({
name: 'Jerry',
age: 20,
info: obj // 将 obj 包含在响应式数据中
})
```
4.在模板中使用响应式数据 state,不会触发视图更新
```html
<template>
<div>
<p>name: {{ state.name }}</p>
<p>age: {{ state.age }}</p>
<p>info: {{ state.info }}</p> <!-- 不会触发视图更新 -->
</div>
</template>
```
注意事项:
1. markRaw 函数只能用于标记对象,不能用于标记基本数据类型(如字符串、数字等)。
2. 在模板中使用标记为“非响应式”的对象时,需要注意不要直接修改对象的属性,否则可能会导致意外的视图更新。如果需要修改对象的属性,应该先使用 toRaw 函数将对象转换为“响应式”对象,再进行操作。