vue2中的ref类似id,而vue3中的ref函数作用:定义一个响应式的数据
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="changeInfo">修改人的信息</button>
</template>
<script>
export default {
name: 'App',
setup(){
//数据
let name = '张三'
let age = 18
//方法
function changeInfo(){
name = '李四'
age = 48
console.log(name,age)
}
//返回一个对象(常用)
return {
name,
age,
changeInfo
}
}
}
</script>
数据改了但是页面没有反应——没有响应式
![](https://i-blog.csdnimg.cn/blog_migrate/dde8b8606c03ff472d07d52f45b52e98.png)
ref加工后是对象--加工基本类型的数据:
RefImpl :reference引用implement实现
import {ref} from 'vue'
export default {
name: 'App',
setup(){
//数据
let name = ref('张三')
let age = ref(18)
//方法
function changeInfo(){
console.log(age,name)
}
//返回一个对象(常用)
return {
name,
age,
changeInfo
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/ccb0e49033da2aa26dd8e4f0de86682e.png)
语法: const xxx = ref(initValue)----const里面属性可以改变
创建一个包含响应式数据的引用对象(reference对象,简称ref对象) 。
JS中操作数据: xxx.value
模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
基本类型的数据:响应式依然是靠Object.defineProperty()的get与set完成的。
ref加工对象类型的数据:第一层.value
<h3>工作种类:{{job.type}}</h3>
<h3>工作薪水:{{job.salary}}</h3>
import {ref} from 'vue'
export default {
name: 'App',
setup(){
//数据
let name = ref('张三')
let age = ref(18)
let job = ref({
type:'前端工程师',
salary:'30K'
})
//方法
function changeInfo(){
console.log(job.value)
job.value.type = 'UI设计师'
job.value.salary = '60K'
}
//返回一个对象(常用)
return {
name,
age,
job,
changeInfo
}
}
}
Proxy
![](https://i-blog.csdnimg.cn/blog_migrate/a8cbb2daaf2fe227fc8b36af889ddb64.png)
对象类型的数据:内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。