vue3.0之ref函数

比眉伴天荒 2022-09-11 00:08 185阅读 0赞

![425588f287254499b80aced57fe2d0fa.png][]

1、ref推荐定义基本数据类型(ref值也可以是对象，但是一般情况下是对象直接使用reactive更合理)。

2、在 vue 的模板中使用 ref 的值不需要通过 value 获取 （vue 会通过自动给 ref 的值加上 .value）。

3、在 js 中使用 ref 的值必须使用 .value 获取。

<template>    <div>{
        {count}}</div></template>    <script>　　import {ref} from 'vue'
        export default {        setup(){            const count = ref(10)            console.log(count.value)     // 10          }    }</script>

4、若使用ref定义复杂类型数据，则监听不到数据的变动，实际是走了reactive (const convert = (val) => isObject(val) ? reactive(val) : val)

5、ref函数的实现

（1）craeteRef 创建ref对象（将基本数据类型转为复杂数据类型） function createRef(rawValue, shallow = false) {    if (isRef(rawValue)) {        return rawValue;    }    return new RefImpl(rawValue, shallow); }（2）RefImpl 类(如果传递 shallow = true 则只是代理最外层)  class RefImpl {    constructor(value, _shallow = false) {        this._shallow = _shallow;        this.__v_isRef = true;        this._rawValue = _shallow ? value : toRaw(value);        this._value = _shallow ? value : convert(value); // const convert = (val) => isObject(val) ? reactive(val) : val;    }    get value() {    // value 属性访问器        track(toRaw(this), "get" /* GET */, 'value');        return this._value;    }    set value(newVal) {  // value 属性设置器        newVal = this._shallow ? newVal : toRaw(newVal);        if (hasChanged(newVal, this._rawValue)) {    // 判断新老值是否有变化,改变就更新值,trigger 触发依赖执行            this._rawValue = newVal;            this._value = this._shallow ? newVal : convert(newVal);            trigger(toRaw(this), "set" /* SET */, 'value', newVal);        }    }}

本文完~

#  #

**学习更多技能**

**请点击下方公众号**

![54493b5e2f4560733d562cd3a7794ef5.gif][]

![88501877a389b45d9fc0daeec3674c9c.png][]

![40d25752c2391018b94de58c139b405f.png][]

[425588f287254499b80aced57fe2d0fa.png]: /images/20220829/80699ba4958a4a588231b7a4b6b39f6f.png
[54493b5e2f4560733d562cd3a7794ef5.gif]: /images/20220829/cfcb6bc80e124a128db8fd517dc01ebd.png
[88501877a389b45d9fc0daeec3674c9c.png]: /images/20220829/c666341544874b8e8160776f89340b77.png
[40d25752c2391018b94de58c139b405f.png]: /images/20220829/4822537fcc734b17a8613f0569b8461a.png