ref函数
- 作用: 定义一个响应式的数据
- 语法: ```const xxx = ref(initValue)```
-创建一个包含响应式数据的引用对象(reference对象,简称ref对象)
- JS中操作数据: ```xxx.value```
-模板中读取数据: 不需要.value,直接:```<div>{{xxx}}</div>```
- 备注:
-接收的数据可以是:基本类型、也可以是对象类型。
-基本类型的数据:响应式依然是靠``Object.defineProperty()``的```get```与```set```完成的。
-对象类型的数据:内部 “ 求助 ”了Vue3.0中的一个新函数—— ```reactive```函数。
<template>
<h1>信息</h1>
<h2>{{ name }}</h2>
<h2>{{ age }}</h2>
<button @click="changeInfo">修改个人信息</button>
<h3>{{ job.type }}:{{ job.salary }}</h3>
</template>
<script>
import{ref}from 'vue'
export default {
name: 'App',
setup(){
//数据
//不是响应式数据
// let name='张三'
// let age=18
let name=ref('张三')
let age=ref(18)
//ref加工完的数据是一个对象,RefImpl的实例对象(reference implement)
let job=ref({
type:'工程师',
salary:'30k'
})
function changeInfo(){
// name='Gui',
// age=21
name.value='Gui',
age.value=21,
job.value.type='老师',
job.value.salary='10k'
}
//必须有返回值
return{
name,
age,
job,
changeInfo
}
}
}
</script>