vue3--ref和reactive

ref（针对基本数据类型）

<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,reactive} 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 = 48
      job.value.type = 'UI'
      job.value.salary = '60k'

      console.log(name,age,job.value);
    }

    // 返回一个对象（常用），返回数据变量和方法才能用
    return {
      name,
      age,
      job,
      changeInfo
    }
  }
}
</script>

reactive（针对引用数据类型）

<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>工作：{{person.job.type}}</h2>
  <h2>工资：{{person.job.salary}}</h2>
  <h2>爱好：{{person.hobby}}</h2>
  <h2>测试数据c：{{person.job.a.b.c}}</h2>
  <button @click="changeInfo">修改人信息</button>
</template>

<script>
import {ref,reactive} from 'vue'
export default{
  name:'App',
  setup(){
    // 数据
    let name = ref('张三')
    let age = ref(18)
    let job = reactive({
      type:'前端工程师',
      salary:'30k',
      a:{
        b:{
          c:666
        }
      }
    })

    let person = reactive ({
      name:'张三',
      age:18,
      hobby:['抽烟','heijiu','tangtou'],
      job:{
        type:'前端工程师',
        salary:'30k',
        a:{
          b:{
            c:666
          }
        }
      }
    })
    // reactive 处理引用数据类型
    // 方法
    function changeInfo() {
      // console.log(job);
      person.name ="李四"
      person.age = 48
      person.job.type = 'UI'
      person.job.salary = '60k'
      person.job.a.b.c = 77
      person.hobby[0] = 'sss'
      // console.log(name,age,job.value);
    }

    // 返回一个对象（常用）
    return {
      person,
      changeInfo
    }
  }
}
</script>