深入理解为什么需要ref、toRef、toRefs

为什么需要用 ref

• 返回值类型，会丢失响应式
• 如在setup、computed、合成函数，都有可能返回值类型
• Vue如不定义ref，用户将制造ref，反而更混乱

为何ref需要.value属性

• ref是一个对象（不丢失响应式），value存储值
• 通过.value属性的get和set实现响应式
• 用于模板、reactive时，不需要.value，其他情况都要

为什么需要toRef和toRefs

• 初衷：不丢失响应式的情况下，把对象数据 分解/扩散
• 前端：针对的是响应式对象（reactive封装的）非普通对象
• 注意：不创造响应式，而是延续响应式

• <template>
      <p>why ref demo {{state.age}} - {{age1}}</p>
  </template>
  
  <script>
  import { ref, toRef, toRefs, reactive, computed } from 'vue'
  
  function useFeatureX() {
      const state = reactive({
          x: 1,
          y: 2
      })
  
      return toRefs(state)
  }
  
  export default {
      name: 'WhyRef',
      setup() {
          // 解构不丢失响应式
          const { x, y } = useFeatureX()
  
          const state = reactive({
              age: 20,
              name: 'test'
          })
  
          // computed 返回的是一个类似于 ref 的对象，也有 .value
          const age1 = computed(() => {
              return state.age + 1
          })
  
          setTimeout(() => {
              state.age = 25
          }, 1500)
  
          return {
              state,
              age1,
              x,
              y
          }
      }
  }
  </script>