Vue3中的ref函数

ref函数用来定义一个响应式的数据。

• 创建一个包含响应式数据的引用对象。
• 在js中操作时：xxx.value
• 模板中读取数据不需要.value,直接{{xxx}}

//先引入ref函数
import {ref} from 'vue'

setup(){
    let name = ref('佩奇')
    let age = ref(18)
    let info = ref({
        job:'teacher',
        salary:'200'   
    })
    function changeInfo(){
        //基本类型
        name.value = '乔治'
        age.value = '2'
        //对象类型
        info.value.job = 'doctor'
        info.value.salary = '300'
    }
    
    return{
        name,
        age,
        info,
        changeInfo
    }

}

备注：

• ref函数接收的数据可以是基本类型，也可以是对象类型。
• 基本类型的数据，响应式依然是靠Object.defineProperty()的get与set完成的。
• 对象类型的数据，内部使用了vue3的新函数——reactive函数。