vue3.0中的toRaw和markRaw-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_52518047/article/details/125952076

本文通过一个Vue模板示例，详细介绍了`toRaw`和`markRaw`在Vue响应式系统中的作用。`toRaw`会将整个对象转换为非响应式，而`markRaw`则可以防止指定属性被代理，允许其数据变化。在示例中，`updateToRaw`展示了使用`toRaw`后，对象数据改变但视图不更新的情况，而`updateMarkRaw`利用`markRaw`让数组元素在定时器中可变但不影响响应式。文章深入探讨了这两个函数在实际开发中的应用场景和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toRaw将代理对象变成普通对象，数据发生变化，不会更新
markRaw标记的对象数据，从此以后再也不能成为代理对象了
两者区别：toRaw会将整个对象变成非响应式的，markRaw可以指定哪些属性值可以变化，

<template>
  <div>
    <h2>toRaw与markRaw</h2>
    <h3>state:{{state}}</h3>
    <button @click="updateToRaw">测试toRaw</button>
    <button @click="updateMarkRaw">测试markRaw</button>
  </div>
</template>


<script lang="ts">
import { computed, defineComponent,reactive,ref,toRaw,markRaw } from 'vue'
interface UserInfo {
  name:string,
  age:number,
  likes?:string[]
}
// 引入子集组件
import Child from './components/child.vue';
export default defineComponent({
    components:{
        Child
    },
    setup(){
      const state = reactive<UserInfo>({
        name:'小明',
        age:12,
      })
      const updateToRaw = () => {
        const user = toRaw(state)
        user.name += '-----'
        console.log('测试')
      }
      const updateMarkRaw = () => {
        // state.likes = ['吃','喝']
        // state.likes[0] += '-----'
        const likes = ['吃','喝']
        state.likes = markRaw(likes)

       setInterval(() => {
           console.log('定时器走起来')
           if (state.likes) {
             state.likes[0] += '----'
           }
         },1000)
        console.log('测试')
      }
      
      return {
        updateToRaw,
        updateMarkRaw,
        state
      }
    }
})
</script>



<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>