vue3——toRaw & markRaw

ref/reactive数据类型的特点:

每次修改都会被追踪, 都会更新UI界面, 但是这样其实是非常消耗性能的 所以如果我们有一些操作不需要追踪, 不需要更新UI界面, 那么这个时候, 我们就可以通过toRaw方法拿到它的原始数据, 对原始数据进行修改 这样就不会被追踪, 这样就不会更新UI界面, 这样性能就好了

toRaw

作用：

  做一些不想被监听的事情(提升性能)

       setup(){       
          let obj = {
            msg: 'hello',
            student: {
              name: 'xiaoliu',
              age: 20
            }
          }
          let reactiveObj = reactive(obj)
          let state = toRaw(reactiveObj)    
          return {state}
        }

上图是进行reactive后的Proxy对象，看看对其toRaw后，

toRaw后，Proxy对象又被转换回去了。
toRaw就通过Proxy把target给提取出来。

reactive中的toRaw

<template>
  <div>
      <p>{{state}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>
<script>
  /*
  1.toRaw
  从Reactive 或 Ref中得到原始数据
  2.toRaw作用
  做一些不想被监听的事情(提升性能)
  * */
  import {reactive, toRaw} from 'vue';
export default {
  name: 'App',
  setup() {
      /*
      ref/reactive数据类型的特点:
      每次修改都会被追踪, 都会更新UI界面, 但是这样其实是非常消耗性能的
      所以如果我们有一些操作不需要追踪, 不需要更新UI界面, 那么这个时候,
      我们就可以通过toRaw方法拿到它的原始数据, 对原始数据进行修改
      这样就不会被追踪, 这样就不会更新UI界面, 这样性能就好了
      * */
      let state = reactive(
        {name:'lnj', age:18}
      );
      // 获取state的源数据
      let obj2 = toRaw(state);
      // console.log({name:'lnj', age:18} === obj2); // true
      // console.log({name:'lnj', age:18} === state); // false
      function myFn() {
        // 获取的源数据更改，不会触发页面更新
          obj2.name = 'zs';
          console.log(obj2); // {name: "zs", age: 18}
          // state.name = 'zs';
          // console.log(state);// {name: "zs", age: 18}
      }
    return {state, myFn}
  }
}
</script>
<style>
</style>

ref中的toRaw

<template>
  <div>
      <p>{{state}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>
<script>
  import { toRaw, ref} from 'vue';
export default {
  name: 'App',
  setup() {
      /*
      1.ref本质: reactive
      ref(obj) -> reactive({value: obj})
      * */
      let state = ref({name:'lnj', age:18});
      // 注意点: 如果想通过toRaw拿到ref类型的原始数据(创建时传入的那个数据)
      //        那么就必须明确的告诉toRaw方法, 要获取的是.value的值
      //        因为经过Vue处理之后, .value中保存的才是当初创建时传入的那个原始数据
      // let obj2 = toRaw(state);
      let obj2 = toRaw(state.value);
      console.log(state);
      console.log(obj2);
      function myFn() {
        // 获取的源数据更改，不会触发页面更新
          obj2.name = 'zs';
          console.log(obj2); // {name: "zs", age: 18}
          // state.name = 'zs';
          // console.log(state);// {name: "zs", age: 18}
      }
    return {state, myFn}
  }
}
</script>
<style>
</style>

markRaw

将数据标记为永远不能追踪的数据 一般在编写自己的第三方库时使用。

<template>
  <div>
      <p>{{state}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>
<script>
  /*
  1.markRaw
  将数据标记为永远不能追踪的数据
  一般在编写自己的第三方库时使用
  * */
  import {reactive, markRaw} from 'vue';
export default {
  name: 'App',
  setup() {
      let obj = {name: 'lnj', age: 18};
      // 不能追踪，监听，作为响应式的数据
      obj = markRaw(obj);
      let state = reactive(obj);
      function myFn() {
        // 数据更改了，但是页面ui还是没有发生改变
          state.name = 'zs';
      }
    return {state, myFn}
  }
}
</script>
<style>
</style>