0
点赞
收藏
分享

微信扫一扫

一文读懂ref函数:从入门到精通的具体操作指南

一文读懂ref函数:从入门到精通的具体操作指南_响应式

什么是ref函数

Vue3中的ref函数是一个用于创建响应式数据的函数。在Vue3中,当组件渲染时,会生成一个响应式数据对象,该对象包含了组件实例的所有数据属性。使用ref函数可以创建一个响应式的数据对象,并且可以在组件的生命周期内进行读取和修改。

具体来说,ref函数接受一个初始值作为参数,并返回一个包含该初始值的响应式对象。这个响应式对象可以被其他组件或函数引用,并且当它被修改时,相关的视图也会自动更新。


ref函数作用

定义一个响应式的数据

语法

const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
  • JS中操作数据: xxx.value
  • 模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>


  • 接收的数据可以是:基本类型、也可以是对象类型。
  • 基本类型的数据:响应式依然是靠Object.defineProperty()getset完成的。
  • 对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

ref源码

function ref(value) {
    return createRef(value, false);
}

function createRef(rawValue, shallow) {
    if (isRef(rawValue)) {
        return rawValue;
    }
    return new RefImpl(rawValue, shallow);
}

class RefImpl {
    constructor(value, _shallow) {
        this._shallow = _shallow;
        this.dep = undefined;
        this.__v_isRef = true;
        this._rawValue = _shallow ? value : toRaw(value);
        this._value = _shallow ? value : convert(value);
    }
    get value() {
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) {
        newVal = this._shallow ? newVal : toRaw(newVal);
        if (hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = this._shallow ? newVal : convert(newVal);
            triggerRefValue(this, newVal);
        }
    }
}

举例

具体用法如下:

  1. 在组件的setup函数中,使用ref函数创建一个响应式数据对象。

<template>
  <h1>jf的信息</h1>
  <h2>姓名:{{ name }}</h2>
  <h2>年龄:{{ age }}</h2>
  <h2>职业: {{ job.type }}</h2>
  <h2>工资:{{ job.salary }}</h2>
  <button @click="sayInfo">显示信息</button>
  <button @click="changeInfo">修改信息</button>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    // 数据
    let name = ref("造梦者");
    let age = ref(18);
    let job = ref({
      type: "前端工程师",
      salary: "30K",
    });
    // 方法
    function sayInfo() {
      alert(`你好${name.value},你太厉害了吧,薪水${job.value.salary}这么高`);
    }
    function changeInfo() {
      name.value = "三十年后的造梦者";
      age.value = 48;
      job.value.type = "工程师";
      job.value.salary = "30w";
    }
    return {
      name,
      age,
      job,
      sayInfo,
      changeInfo,
    };
  },
};
</script>

举报

相关推荐

0 条评论