Vue3_04_ref 函数和 reactive 函数

ref 函数

• 声明变量时，赋值的值要写在 ref() 函数中
• 修改变量时，变量名.value = xxx
• 在模板中使用时可以省略掉 .value，直接使用变量名即可

<template><h1>一个人的信息</h1><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>工作种类：{{job.type}}</h2><h2>薪资：{{job.salary}}</h2><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:'30k'})//方法function changeInfo(){name.value = '李四'age.value = 20job.value.type = '后端工程师'job.value.salary = '50k'console.log(name,age)}//返回一个对象（常用）return {name,age,changeInfo,job}//返回一个渲染函数（了解）// return ()=>h('h1','你好吗')}}
</script>

 reactive 函数

代码优化：

reactie 对比 ref