Vue3.0学习 - 第六节，什么是ref ，ref入门

拼搏现实的明天。 2023-01-13 10:30 193阅读 0赞

## ref入门 ##

1、什么是ref?

*  ref和reactive一样也是用来实现响应式数据的方法
 *  由于reactive必须传递一个对象，所以导致在企业开发中， 如果我们只想让某个变量实现响应式的时候会很麻烦，所以vue3提供了ref方法，实现对简单值得监听

###  `ref` 关键源码 ###

function createRef(rawValue, shallow) {
      if (isRef(rawValue)) {
        return rawValue
      }
      let value = shallow ? rawValue : convert(rawValue)
      const r = {
        __v_isRef: true,
        get value() {
          track(r, TrackOpTypes.GET, 'value')
          return value
        },
        set value(newVal) {
          if (hasChanged(toRaw(newVal), rawValue)) {
            rawValue = newVal
            value = shallow ? newVal : convert(newVal)
            trigger(
              r,
              TriggerOpTypes.SET,
              'value',
              __DEV__ ? { newValue: newVal } : void 0
            )
          }
        }
      }
      return r
    }

关注几个重点就行：

let value = shallow ? rawValue : convert(rawValue)

这一行会获得这个对象在使用的时候实际返回的有效 `value` 值。如果是 `shallow` 对象，那么不会对它进行任何封装。`shallow` 是什么后面会讲。

`convert` 方法的内容如下

const convert = val => isObject(val) ? reactive(val) : val

如果不是对象，那么不做改变；如果是对象，那么将它转化为 `reactive` 。可以这么理解，`ref` 是多做了一层的 `reactive` 。

__v_isRef: true

vue3 通过这个数值   \_\_v\_isRef:true   来判断 `ref` 对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70][]

通过 `ref` 创建并 `return` 的对象，在 `html` 中引用的时候是可以忽略掉 `value` 的。例如我们在上一个篇章中提到的 `Date` 对象。

<template>
    <div>
      <p>{
       {msg}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { ref } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = ref(new Date());
        function c() {
          console.log(msg);
          msg.value.setDate((msg.value.getDate() + 1));
          msg.value = new Date(msg.value);
          console.log(msg);
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

如果传入的参数是个对象，而我们要使用的是它的子元素的话，依然可以这么做。

<template>
    <div>
      <p>{
       {msg.date}}</p>
      <button @click="c">button</button>
    </div>
    </template>
    
    <script>
    import { ref } from 'vue'
    export default {
      name: 'App',
      setup() {
        let msg = ref({date: new Date()});
        function c() {
          console.log(msg);
          msg.value.date.setDate((msg.value.date.getDate() + 1));
          msg.value.date = new Date(msg.value.date);
          console.log(msg);
        }
        return {
          msg,
          c
        };
      }
    }
    </script>

## ref本质： ##

*  ref底层本质还是reactive
 *  系统会根据我们传的值会自动转成 ref(xxx) ——> reactive(\{value:xxx\})

## 注意点： ##

*  在Vue中使用ref的值不用通过value获取
 *   在js中使用ref必须通过value获取

## 判断是**ref**类型还是**reactive**，引入Vue方法 **isRef** 和 **isReactive** ##

代码

<template>
      <div>
        
        <h3>{
       { state.age }}</h3>
        <p>{
       { age }}</p>
        <button @click="myFun">按钮1</button>
        <br>
        <br>
        <button @click="myfun2">anniu</button>
      </div>
    </template>
    
    <script>
    import { ref, reactive } from "vue";
    import { isRef, isReactive } from "vue";
    /*
    1、什么是ref?
         - ref和reactive一样也是用来实现响应式数据的方法
         - 由于reactive必须传递一个对象，所以导致在企业开发中
           如果我们只想让某个变量实现响应式的时候会很麻烦
           所以vue3提供了ref方法，实现对简单值得监听
    
    2、ref本质：
         - ref底层本质还是reactive
         - 系统会根据我们传的值会自动转成  ref(xxx) ——> reactive({value:xxx})
    
    3、注意点：
        - 在Vue中使用ref的值不用通过value获取
        - 在js中使用ref必须通过value获取
    
    */
    
    export default {
      name: "App",
      // setu函数是组合api的入口函数
      setup() {
        let state = reactive({
          age: 18,
        });
        // ref本质还是 reactive
        // 当我们给ref传递一个值，ref函数底层会自动将ref转换成reactive
        // ref(18) ——> reactive({value:18})
        let age = ref(18);
        
        function myFun() {
          age.value += 1;
          state.age += 22;
          console.log(`age====isRef:${isRef(age)},isRef:${isReactive(age)}`)
          console.log(`state====isRef:${isRef(state)},isRef:${isReactive(state)}`)
        }
        return { age, myFun, state };
      },
    
      methods: {
        myfun2() {
          this.state.age = "我是methods";
        },
      },
    };
    </script>

效果如图

![20210418225310279.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzbDEyNQ_size_16_color_FFFFFF_t_70]: /images/20221022/01240c7a0d954e77b33f13e40e3dd5de.png
[20210418225310279.png]: /images/20221022/469fbfec365644699b764abc277e33fc.png