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 = 20
        job.value.type = '后端工程师'
        job.value.salary = '50k'
        console.log(name,age)
      }
      //返回一个对象（常用）
      return {
        name,
        age,
        changeInfo,
        job
      }
      //返回一个渲染函数（了解）
      // return ()=>h('h1','你好吗')
    }

  }
</script>

 reactive 函数

代码优化：

reactie 对比 ref