vue3 reactive 和 ref

╰+攻爆jí腚メ 2021-09-09 02:34 409阅读 0赞

## reactive 和 ref ##

*  reactive()  
    1、 返回对象的响应式副本。  
    2、 解构会导致数据是去响应化。
 *  ref()  
    1、 接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 `property .value`。  
    2 、 参数接收 基础数据类型。 不支持对象！

区别在于：

### ref ###

使用 **ref** 的时候取值需要加上 .value , 修改的时候也是需要加上.value
    例如：

let c = ref('this is ref')
    
    console.log(c.value) // this is ref
    
    let editC = () => c.value = 'edit c'
    
    console.log(c.value) // edit c

### reactive ###

使用 **reactive** 的时候取值就**不需要**加.value了

let c = reactive({ name: 'this reactive'})
    
    console.log(c.name) // this reactive
    
    let editC = () => c.name = 'edit c'
    
    console.log(c.name) // edit c

**这时候你一定发现了什么。** 那就是 把上边代码中的name 换成 value 是不是和ref就很相似了？  
**留一点儿问题自己去找答案吧。远比看文章记得牢！**

--------------------

(2021-07-19 17:31:58)  
***特别注意！！！*** **改变 reactive() 解构出来的数据, 视图不会更新， 但 当更新ref的数据时会更新 解构出来的数据对应的视图**

详细如下（具体代码如下方代码）：  
1 点击 `change ref` 按钮 改变 c 的值，其视图更新。  
2 此时再点击 `change myjson --> name` 按钮， 其值改变但视图不会更新。  
3 这时候若再点击 `chang ref` 按钮， 不仅 ref 对应的视图更新， `<p>{ { name }}</p>`（解构reactive的数据）视图也会更新。

大家使用reactive解构的时候如果不需要更新视图，还是需要注意的。  
*不知道是BUG还是特意如此设定的。*

<template>
      <div>
        <div>
          <button @click="changeName">change myjson --> name</button>
          <br />
          <p>{ {  name }}</p>
        </div>
        <div>
          <button @click="cg">change ref</button>
          <br />
          { { c}}
        </div>
      </div>
    </template>
    
    <script>
    import {  reactive, toRef, ref } from "vue";
    export default { 
      name: "HelloWorld",
      setup(props) { 
        let my = { 
          name: "cc",
          age: 12,
          ah: ["yy", "pb"],
          jn: { 
            js: 10,
            html: 10,
          },
        };
    
        let myjson = reactive(my)
    
        let {  name } = myjson;  
    
        let c = ref('cc')
    
        return { 
          name,
          c
        };
      },
      methods: { 
        changeName(){ 
          this.name += 'v'
          console.log(this.name); 
          // ↑ output: ccv 数据改变但视图并没有更新。 解构会使 reactive()失去响应
    
        },
        cg(){ 
          this.c += "c"
          console.log(this.c);
        }
      },
    };
    </script>