VIP30/v3_project/14_toRaw和markRaw/App.vue

<template>
  <h2> toRaw 与 markRaw</h2>
  <h3>state: {{ state }}</h3>
  <hr>
  <button @click="testToRaw">测试toRaw</button>
  <button @click="testMarkRow">测试markRaw</button>
</template>

<script lang="ts">
import { defineComponent, markRaw, reactive, toRaw } from 'vue'
interface userInfo{
  name: string,
  age: number,
  likes?: string[]
}
export default defineComponent({
  setup () {
    const state = reactive<userInfo>({
      name:'zs',
      age: 18
    })
    const testToRaw = ()=>{
      //把代理对象编程普通对象 数据变化 页面不变化
      const user = toRaw(state)
      user.name += '=='
      console.log(111)
    }
    const testMarkRow = ()=>{
      // state.likes = ['吃','喝']
      // state.likes[0] += '='
      // console.log(state)
      const likes = ['吃','喝']
      state.likes = markRaw(likes)
      //markRaw标记独享的数据，从此以后都不能成为代理对象了
      setInterval(()=>{
        if(state.likes){
          state.likes[0] += '='
          console.log('定时器启动')
        }
      },1000)
    }

    return {
      state,
      testToRaw,
      testMarkRow
    }
  }
})
</script>

<style scoped>

</style>