一、ref函数
-
作用: 定义一个响应式的数据
-
语法:
const xxx = ref(initValue)
-
创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
-
JS中操作数据:
xxx.value
-
模板中读取数据: 不需要.value,直接:
<div>{{xxx}}</div>
-
-
备注:
-
接收的数据可以是:基本类型、也可以是对象类型。
-
基本类型的数据:响应式依然是靠
Object.defineProperty()
的get
与set
完成的。 -
对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数——
reactive
函数。这个reactive使用了ES6的Proxy对象
-
1)操作基本数据类型
1.其实ref(initValue)最终会创建的refImpl对象,这个对象的其实通过get、set方法赋值,我们通过修改该对象的_value就可以修改name的值,
2.那为啥模板插值语句不用name.value呢?
因为插值语句会自动解析它,比如它发现的该对象时refImpl这时候他会自动找到_value值展示
template>
<h1>一个人的信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
//数据
let name = ref('张三')
let age = ref(18)
//方法
function changeInfo(){
// name.value = '李四'
// age.value = 48
console.log(name,age)
}
//返回一个对象(常用)
return {
name,
age,
changeInfo
}
}
}
</script>
2)操作对象类型
按道理来说job对象的type也是一个ref对象,但是结果是job.type直接赋值,使用的是es6的proxy对象
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h3>工作种类:{{job.type}}</h3>
<h3>工作薪水:{{job.salary}}</h3>
<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:'22K'
})
//方法
function changeInfo(){
// name.value = '李四'
// age.value = 48
console.log(job.value)
job.value.type = 'UI设计师'
job.value.salary = '60K'
// console.log(name,age)
}
//返回一个对象(常用)
return {
name,
age,
job,
changeInfo
}
}
}
</script>