VueJs中的ref函数 | itclanCoder

# VueJs中的ref函数

# 快速导航

# 前言

在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
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

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

# ref函数-处理对象类型

当ref处理对象数据类型时

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

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

1
2
3
4
5
6
7

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

语法: const xxx = ref(initValue)

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

[1]. 接收的数据可以是:基本类型,也可以使对象类型 [2]. 基本类型的数据:响应式依然是靠(Object.defineProperty()的get与set完成的) [3]. 对象类型的数据:内部借助了vue3的一个新函数reactive函数

# 为什么需要ref()函数

在setup、computed、合成函数中，都有可能返回值类型。而值类型的返回，往往容易丢失响应式

Vue3对响应式的处理方式有些改变，使用了Proxy。而这种方式对值类型的响应式却无能为力，所以在Vue3中只能通过ref这种方式来解决值类型响应式的问题

# 为什么逻辑中修改变量数据需要`.value`

ref是一个对象（不丢失响应式），value是存储值,通过.value属性的get和set实现响应式

只有ref用于模板、reactive时不需要.value,其他情况都时需要的,对于刚开始,确实是有些不适应,与Vue2的使用是存在差异的

# 总结

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

可以被vue监测和追踪

留言

解答

← VueJs中的reactive函数 VueJs中setup的使用(上) →