VueJs中的ref函数

前言

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

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

也存在着差异

01

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

02

ref函数-处理对象类型

当ref处理对象数据类型时

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