vue3中 ref和reactive使用上的区别

vue3中ref的使用； 可使用于所有的数据类型
reactive: 使用于对象或者数组

ref 的核心代码

<script>
import { ref } from 'vue'
export default {
  name: 'RefComponent',
  setup () {
    let name = ref('zs')
    let age = ref(20)
    let userInfo = ref({
      type: '前端工程师',
      count: '30k'
    })
    function btnClickHandler () {
      name.value = 'lisi'
      age.value = 30
    }
    const btnUpdateUserInfo = () => {
      console.log(userInfo.value)
      userInfo.value.type = '后端工程师'
      userInfo.value.count = '50k'
    }
    return {
      age,
      name,
      userInfo,
      btnClickHandler,
      btnUpdateUserInfo
    }
  }
}
</script>

ref的所有的代码

<template>
  <div class="Ref_component">
    <div>name: {{ name }}</div>
    <div>age: {{ age }}</div>
    <div>userInfo.type: {{ userInfo.type }}</div>
    <div>userInfo.count: {{ userInfo.count }}</div>
    <button @click="btnClickHandler">vue3中的方法的使用(修改name和age)</button>
    <button @click="btnUpdateUserInfo">修改用户职业</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'RefComponent',
  setup () {
    let name = ref('zs')
    let age = ref(20)
    let userInfo = ref({
      type: '前端工程师',
      count: '30k'
    })
    function btnClickHandler () {
      name.value = 'lisi'
      age.value = 30
    }
    const btnUpdateUserInfo = () => {
      console.log(userInfo.value)
      userInfo.value.type = '后端工程师'
      userInfo.value.count = '50k'
    }
    return {
      age,
      name,
      userInfo,
      btnClickHandler,
      btnUpdateUserInfo
    }
  }
}
</script>
<style scoped>
.Ref_component {}
</style>

reactive的使用
核心的代码

<script>
import { reactive } from 'vue'
export default {
  name: 'ReactiveComponent',
  setup () {
    // let name = ref('zs')
    // let age = ref(20)
    // let userInfo = reactive({
    //   type: '前端工程师',
    //   count: '30k',
    //   a: {
    //     b: {
    //       c: 12
    //     }
    //   }
    // })
    let p = reactive({
      name: 'zs',
      age: 20,
      userInfo: {
        type: '前端工程师',
        count: '30k',
        a: {
          b: {
            c: 12
          }
        } 
      }
    })
    function btnClickHandler () {
      p.name = 'lisi'
      p.age = 30
      p.userInfo.type = 'UI工程师'
      p.userInfo.count = '55k'
      p.userInfo.a.b.c = 99
      // name.value = 'lisi'
      // age.value = 30
    }
    return {
      // age,
      // name,
      // userInfo,
      p,
      btnClickHandler
    }
  }
}
</script>

全部reactive代码

<template>
  <div class="Ref_component">
    <div>name: {{ p.name }}</div>
    <div>age: {{ p.age }}</div>
    <div>userInfo.type: {{ p.userInfo.type }}</div>
    <div>userInfo.count: {{ p.userInfo.count }}</div>
    <div>c: {{ p.userInfo.a.b.c }}</div>
    <button @click="btnClickHandler">vue3中的方法的使用(修改name和age)</button>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  name: 'ReactiveComponent',
  setup () {
    // let name = ref('zs')
    // let age = ref(20)
    // let userInfo = reactive({
    //   type: '前端工程师',
    //   count: '30k',
    //   a: {
    //     b: {
    //       c: 12
    //     }
    //   }
    // })
    let p = reactive({
      name: 'zs',
      age: 20,
      userInfo: {
        type: '前端工程师',
        count: '30k',
        a: {
          b: {
            c: 12
          }
        } 
      }
    })
    function btnClickHandler () {
      p.name = 'lisi'
      p.age = 30
      p.userInfo.type = 'UI工程师'
      p.userInfo.count = '55k'
      p.userInfo.a.b.c = 99
      // name.value = 'lisi'
      // age.value = 30
    }
    return {
      // age,
      // name,
      // userInfo,
      p,
      btnClickHandler
    }
  }
}
</script>
<style scoped>
.Ref_component {}
</style>