ref包装复杂数据类型

ref 其实也可以包裹复杂数据类型为响应式数据，一般对于数据类型未确定的情况下推荐使用 ref，例如后端返回的数据。

<template>
  <div class="container">
    <div>{{ data?.name }}</div>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { ref } from 'vue'
  export default {
    name: 'App',
    setup() {
      // 初始值是 null
      const data = ref(null)
      setTimeout(() => {
        // 右边的对象可能是后端返回的
        data.value = {
          name: 'ifer'
        }
      }, 1000)
      const updateName = () => {
        data.value.name = 'xxx'
      }
      return { data, updateName }
    }
  }
</script>