Vue3.0学习 - 第八节，toRaw 和 reactive、ref，markRaw

àì夳堔傛蜴生んèń 2023-01-17 09:16 183阅读 0赞

### reactive的一些补充，先看代码： ###

<template>
      <div>
        <p>{
       {state}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    <script>
    import { reactive, toRaw } from "vue";
    export default {
      setup() {
        let obj = { name: "zs", age: 18 };
        let state = reactive(obj);
    
        function fn() {
          obj.name = "ls";
          console.log("obj", obj);
          console.log("state", state);
        }
        return { state, fn };
      },
    };
    </script>

页面打印效果：

![20210428153932946.png][]

我们可以看出改变obj数据吗，state也会跟着改变，但是UI界面却没有刷新，这个是什么问题呢？

我们先看 obj 和 state 的关系

**obj和state：引用关系，state的本质是一个Proxy对象，在这个Proxy对象中引用了obj**

*  直接修改obj是无法触发UI界面更新的
 *  只有通过包装之后的对象来修改，才会触发界面更新

### 通过改变包装之后的state改变数据： ###

<template>
      <div>
        <p>{
       {state}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    
    <script>
    import { reactive, toRaw } from "vue";
    export default {
      setup() {
        let obj = { name: "zs", age: 18 };
        let state = reactive(obj);
    
        function fn() {
          //   obj.name = "ls";
          state.name = "woshinibaba";
          console.log("obj", obj);
          console.log("state", state);
        }
        return { state, fn };
      },
    };
    </script>

效果如下：我们可以看到 obj 和 state 数据都发生了改变，UI界面也更新了

![20210428155904150.png][]

### 使用toRaw: ###

<template>
      <div>
        <p>{
       {state}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    
    <script>
    import { reactive, toRaw } from "vue";
    export default {
      setup() {
        let obj = { name: "zs", age: 18 };
        let state = reactive(obj);
    
        let obj2 = toRaw(state)
    
        console.log("obj==obj2",obj===obj2)
        function fn() {
          //   obj.name = "ls";
        //   state.name = "woshinibaba";
          console.log("obj", obj);
          console.log("state", state);
          console.log("obj2", obj2);
    
        }
        return { state, fn };
      },
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

我们可以看出 **obj2** 和 **obj**是一样的，也就是说通过**toRaw**拿到了**state**的原始数据 **obj**

### 我们修改obj2的值： ###

<template>
      <div>
        <p>{
       {state}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    
    <script>
    import { reactive, toRaw } from "vue";
    export default {
      setup() {
        let obj = { name: "zs", age: 18 };
        let state = reactive(obj);
    
        let obj2 = toRaw(state);
    
        console.log("obj==obj2", obj === obj2);
        function fn() {
          //   obj.name = "ls";
          //   state.name = "woshinibaba";
          obj2.name = "woshinidie";
          console.log("obj", obj);
          console.log("state", state);
          console.log("obj2", obj2);
        }
        return { state, fn };
      },
    };
    </script>

效果：**我们可以看到通过修改 obj2 会同步修改 obj 和 state ，但是UI界面没有更新**

![20210428160732135.png][]

我们可以发现    **obj2**通过**toRaw**拿到state的原始数据，进行修改，就不会更新界面。

> **总结：如果我们想修改 state 的内容而又不想引起UI界面的更新，就只需要用 `toRaw` 取出它的 “源值” 进行修改就行了。总之， `toRaw` 是一个用来优化资源加载的方案。**

### 我们看一下 ref 的 toRaw： ###

我们回顾一下 ref 的本质是什么：

ref本质：reactive    ref(obj) —> reactive({value:obj})

ref toRaw代码如下：

<template>
      <div>
        <p>{
       {oref}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    <script>
    import { ref, toRaw } from "vue";
    export default {
      setup() {
        let obj3 = { name: "狗子", age: 88 };
        let oref = ref(obj3);
        let toref = toRaw(oref);
        function fn() {
          console.log("obj3", obj3);
          console.log("oref", oref);
          console.log("toref", toref);
        }
        return { oref, fn };
      },
    };
    </script>

效果：我们可以看出 和 **reactive**不一样，这是为什么呢？

![20210428161906436.png][]

根据 **ref **的本质可以看出 我们应该去拿 **.value** ,我们再试一下

<template>
      <div>
        <p>{
       {oref}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    <script>
    import { ref, toRaw } from "vue";
    export default {
      setup() {
        let obj3 = { name: "狗子", age: 88 };
        let oref = ref(obj3);
        let toref = toRaw(oref.value);
        console.log("obj3 == toref",obj3 == toref)
        function fn() {
          console.log("obj3", obj3);
          console.log("oref", oref);
          console.log("toref", toref);
        }
        return { oref, fn };
      },
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1][]

**我们需要注意的几个点：**

*  如果想通过**toRaw**拿到**ref**类型的原始数据（创建时传入的那个数据）
 *  那么就必须明确告诉**toRaw**方法，要获取的还是 **.value** 的值
 *  因为经过vue处理之后， **.value** 中保存的才是当初创建时传入的那个原始数据

下面我们来修改一下 ref 的toRaw :

<template>
      <div>
        <p>{
       {oref}}</p>
        <button @click="fn">reactive</button>
      </div>
    </template>
    <script>
    import { ref, toRaw } from "vue";
    export default {
      setup() {
        let obj3 = { name: "狗子", age: 88 };
        let oref = ref(obj3);
        let toref = toRaw(oref.value);
        console.log("obj3 == toref", obj3 == toref);
        function fn() {
          console.log("obj3", obj3);
          console.log("oref", oref);
          toref.name = "我是你爹";
          console.log("toref", toref);
        }
        return { oref, fn };
      },
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2][]

我们可以看出，修改toref 会修改 oref 的数据，obj3没有变化，因为我们拿到的是oref的 .value,   我们可以看到界面没有更新

此时，和 **`reactive` **的 **`toRaw` **效果就完全一致了

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

## ##

附录全部代码：

<template>
      <div>
        <p>{
       {state}}</p>
        <button @click="myfun">changeRaw</button>
        <hr>
        <p>{
       {oref}}</p>
        <button @click="fn">ref</button>
      </div>
    </template>
    
    <script>
    import { ref, toRaw, reactive } from "vue";
    export default {
      name: "App",
      setup() {
        let obj = {
          name: "csl",
          age: 18,
        };
        /*
        ref/reactive 数据类型特点：
                每次修改都会被追踪，都会更新UI界面，但是这样其实是非常消耗性能的
                所以如果我们有一些操作不需要被追踪，不需要更新UI界面，那么这个时候，我们就可以通过toRaw方法拿到它的原始数据
                对原始数据进行修改，这样就不会被追踪，这样就不会更新UI界面，这样性能就变好了
        */
        let state = reactive(obj);
        // state 和 obj 关系   引用关系 ，state的本质是一个Proxy对象，在这个Proxy对象中引用了obj
        let obj2 = toRaw(state);
    
        // console.log("obj==state", obj === state, obj === obj2); //false true
    
        function myfun() {
          // 如果直接修改obj是无法触发界面更新的
          // 只有通过包装之后的对象来修改，才会触发界面更新
          //   obj.name = "zsssss"
            console.log(obj)//{name: "zsssss", age: 18}
          //   state.name = "zsss";
          //   console.log(state);//{name: "zsssss", age: 18}
          obj2.name = "zssss";
          console.log("obj2", obj2);
          console.log(state);
        }
    
        let obj3 = { name: "狗子", age: 88 };
        /*
        1、ref本质：reactive
            ref(obj) ——> reactive({value:obj})
        * */
        let oref = ref(obj3);
        // 注意点：如果想通过toRaw拿到ref类型的原始数据（创建时传入的那个数据）
        //         那么就必须明确告诉toRaw方法，要获取的还是 .value 的值
        //         因为经过vue处理之后， .value 中保存的才是当初创建时传入的那个原始数据
        // let toref = toRaw(oref)
        let toref = toRaw(oref.value)
    
        function fn(){
            console.log("obj3",obj3)
            console.log("oref",oref)
            toref.name = "lllkkkk"
            console.log("toref",toref)
    
        }
    
    
        return {
          state,
          myfun,
          oref,
          fn
        };
      },
    };
    </script>

# markRaw #

有的时候，我们希望某些数据是无法被改变的。

`markRaw`

显式标记一个 **对象** （不能是简单类型） 为“永远不会转为响应式代理”，函数返回这个对象本身。

const foo = markRaw({})
    console.log(isReactive(reactive(foo))) // false
    
    // 如果被 markRaw 标记了，即使在响应式对象中作属性，也依然不是响应式的
    const bar = reactive({ foo })
    console.log(isReactive(bar.foo)) // false

<template>
      <div>
        <p>{
       { state }}</p>
        <button @click="fun">click</button>
      </div>
    </template>
    
    <script>
    import { reactive, markRaw } from "vue";
    export default {
      setup() {
        let obj = { name: "我是你爹", age: 22 };
        obj = markRaw(obj)
        let state = reactive(obj);
        function fun() {
          state.name = "叫爸爸";
          console.log(state)
        }
        return { state, fun };
      },
      methods: {},
    };
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3][]

[20210428153932946.png]: /images/20221021/e9323360c0344be8992e8a74e9a745a3.png
[20210428155904150.png]: /images/20221021/824abb434a61402a80b58ab1f1b54236.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221021/b9cc185de3e34478ac4df238c0479a31.png
[20210428160732135.png]: /images/20221021/96d0259e9d5f42b2879e33c30f60efa6.png
[20210428161906436.png]: /images/20221021/bba3062689d84f1eba82bd645d3006c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/89391d1e04d64695a194a5645caab549.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 2]: /images/20221021/51d13cabdff34bd29e9e451107f58380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70 3]: /images/20221021/d2d8924928c84d1a805dbdb2f261fe4d.png