Vue全流程--Vue3组合一ref与reactive(实现响应式)
ref:定义基本类型的响应式数据
先看ref使用的位置
<script >
import {ref} from 'vue'
export default {name: 'App',
setup()
{
//数据
let name = ref('张三')
let age = ref(18)
//方法
function changeInfo(){
// name = '李四'
// age = 48
console.log(name,age)
}
//返回一个对象(常用)
return {
name,
age,
changeInfo
}
}
}
</script>
从控制台我们可以看到Vue3中用ref包裹的数据会以引用数据的形式给出。
而我们要修改的值就在value中。
所以我们需要对代码稍加修改,在属性值后面加上“.value”
function changeInfo(){
name.value = '李四'
age.value = 48
}
reactive:定义对象式响应式数据
let job = reactive({
type:'前端工程师',
salary:'30K'
})
reactive(源对象)。返回的是一个代理对象(proxy对象)
reactive可以相应深层次的数据({{{对象里面套对象的那种情况}}}