vue markraw

// 使用 MarkRaw 防止响应式转换
import { markRaw, reactive } from 'vue'

export default {
  setup() {
    // 创建一个响应式对象
    const state = reactive({
      message: 'Hello Vue!',
      // 使用 markRaw 标记的对象将不会被 Vue 的响应式系统处理
      nonReactiveObject: markRaw({ count: 0 })
    })

    // 修改 nonReactiveObject 中的属性不会触发视图更新
    setTimeout(() => {
      state.nonReactiveObject.count++
      console.log(state.nonReactiveObject.count) // 输出 1，但视图不会更新
    }, 1000)

    return {
      state
    }
  }
}

解释说明：

• markRaw 是 Vue 3 提供的一个 API，用于标记一个对象为非响应式的。这意味着该对象不会被 Vue 的响应式系统处理，即使它作为响应式对象的一部分。
• 在上面的示例中，nonReactiveObject 被标记为非响应式对象，因此修改它的属性（如 count）不会触发视图更新。
• 这在某些情况下非常有用，例如当你有一个大型的第三方库或数据结构不想被 Vue 的响应式系统接管时。