toRefs

382 阅读1分钟

内容

toRefs 函数的作用:转换响应式对象中所有属性为单独响应式数据,并且转换后的值和之前是关联的。

image.png

<template>
  <div class="container">
    <h2>{{ name }} {{ age }}</h2>
    <button @click="updateName">修改数据</button>
  </div>
</template>
<script>
  import { reactive, toRefs } from 'vue'
  export default {
    name: 'App',
    setup() {
      const obj = reactive({
        name: 'ifer',
        age: 10
      })
      const updateName = () => {
        obj.name = 'xxx'
        obj.age = 18
      }
      return { ...toRefs(obj), updateName }
    }
  }
</script>