浅谈vue3中ref、toRef、toRefs 和 reactive的区别

<template>
  <div>{{ count }}</div>
</template>
<script>
  import { ref } from 'vue'

  export default {
    setup(props) {
      const count = ref(0)
      // 暴露给 template 的属性，可以直接在 template 中使用
      return {
        count
      }
    }
  }
</script>

<template>
  <div>{{ name }} : {{ state.age }}</div>
</template>
<script setup>
  import { ref } from 'vue'

  // 为基本数据类型添加响应式状态
  const name = ref('Marry')
  // 为复杂数据类型添加响应式状态
  const state = ref({
    age: 18
  })
  // 打印name的值
  console.log(name.value)
  // 打印count的值
  console.log(state.value.age)
</script>

<template>
  <div>{{ obj.count }}</div>
</template>
<script setup>
  import { reactive } from 'vue'
  
  const obj = reactive({
    count: 0
  })
  // 使用 reactive 定义的属性可以直接使用，不需要加 .value
  console.log(state.count)
</script>

<template>
  <div>{{ myTitle }}</div>
</template>
<script>
  import { defineComponent, toRef } from 'vue'

  export default defineComponent({
    props: [title],
    setup (props) {
      // 创建变量myTitle
      const myTitle = toRef(props, 'title')
      console.log(myTitle.value)
      return {
        myTitle
      }
    }
  })
</script>

<template>
  <div>{{ myTitle }}</div>
</template>
<script>
  import { defineComponent, toRefs } from 'vue'

  export default defineComponent({
    props: [title],
    setup (props) {
      // toRefs 默认使用了解构赋值，创建了变量 myTitle
      const { myTitle } = toRefs(props)
      console.log(myTitle.value)
      return {
        myTitle
      }
    }
  })
</script>