VueJs中的ref函数

最新推荐文章于 2025-03-20 02:10:28 发布

原创最新推荐文章于 2025-03-20 02:10:28 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #ecmascript #前端框架

本文探讨了VueJs中ref函数的使用，如何将数据转换为响应式，并详细阐述了ref在处理基本类型和对象类型数据时的不同。总结中强调ref主要处理基本数据类型，使数据具备响应式能力，其对象有一个value属性用于追踪和监测。

前言

在Vue2.0里面,与页面相关显示的数据是挂载在data下,而在vue3.0里,想要一个数据

具备响应式,那么需要引入响应式API函数,通过API函数加工处理后,才具备响应式,两者之间在底层实现数据的响应式上

也存在着差异

ref可将数据变成响应式

在setup里面使用let定义的变量不是响应式的数据,它只是一个普通的字符串

数据虽然是可以修改,但是页面没有更新,Vue没有捕获到,如果想要定义的数据是响应式的,可以监测和捕获到,那么就需要从vue当中引用ref函数变成一个引用实例对象(引用对象)

import { ref } from 'vue'

setup() {
    let name = ref("itclanCoder");
    let age = ref(20);
     
    // 在逻辑内部访问,需要使用xxx.value
    console.log(name.value,age.value); 
    return {
        name,
        age
    }
}

在模板里直接使用变量名就可以,但是更改数据时,却要使用xxx.value

ref函数-处理对象类型

当ref处理对象数据类型时

let job = ref({
    type: 'frontend',
    salary: '25k'
})

console.log(job.value.type)
console.log(job.value.salary);

作用: 定义一个响应式的数据

语法: const xxx = ref(initValue)

创建一个包含响应式数据的引用对象,在JS中操作数据xxx.value,模板中读取数据,不需要xxx.value,直接是<div>{{xxx}}</div>

[1]. 接收的数据可以是:基本类型,也可以使对象类型

[2]. 基本类型的数据:响应式依然是靠(Object.defineProperty()的get与set完成的)

[3]. 对象类型的数据:内部借助了vue3的一个新函数reactive函数

总结

ref函数主要处理基本数据类型数据,让它具备响应式数据的能力,该对象只有一个指向内部值的属性.value

可以被vue监测和追踪

vuejs中组件的两种不同的编写风格-选项式API及组合式API

2022-12-25

2022-忙碌的一年

2022-12-23

JS 如何利用浏览器的 cookie 保存用户名

2022-11-09

点击左下角查看更多