vue3的ref和reactive, 把数据变为响应式数据

1. 一般处理基本数据类型, 复杂数据类型有reactive函数

<template>
  <h1>ref</h1>
  <hr>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <button @click="changeNameAge">改变名字和年龄</button>
</template>

<script>
import {ref} from "vue"
export default {
  name: 'Vue3Study01Setup',
  setup(){
    let name = ref('lin');
    let age = ref(18)
    function changeNameAge(){
      console.log(name,age);//引用reference实现Implement对象 RefImpl{__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 18, _value: 18}
      name.value = 'ling',//使用ref需要使用.vlaue调用变量才有用
      age.value = 20
    }
    return {
      name,age,changeNameAge
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

2. reactive 处理复杂数据类型

<template>
  <h1>reactive</h1>
  <hr>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>{{job.type}}</div>
  <div>{{job.language}}</div>
  <div>{{job.a.b.c}}</div>
  <div>{{job2.type}}</div>
  <div>{{job2.software}}</div>
  <button @click="changeNameAge">改变名字和年龄</button>
</template>

<script>
import {ref, reactive} from "vue"
export default {
  name: 'Vue3Study01Setup',
  setup(){
    let name = ref('lin');
    let age = ref(18)
    let job = ref({
      type:'前端开发',
      language: 'JavaScript',
      a:{
        b:{
          c:666
        }
      }
    })
    //reactive 一般处理复杂数据类型, 对象, 数组, 是深层次响应式的, 比用ref少.value拿数据
    let job2 = reactive({
      type:'ui',
      software:'ps',
    })

    function changeNameAge(){
      name.value = 'ling',
      age.value = 20,
      job.value.type = '后端开发',
      job.value.language = 'java'
      job.value.a.b.c = 999

      job2.type = 'test'
      job2.software = '手机电脑'
    }
    return {
      name,age,changeNameAge,job,job2
    }
  }
};
</script>

<style lang="scss" scoped>

</style>