Vue3--toRefs 函数

·  阅读 86

toRefs 函数

在之前reactive函数的使用中,想在模板中省略state,直接书写name和age,想在return出去的时候把state中的属性直接解构出来,

解构前:

<template>
  <div>{{ state.name }}</div>
  <div>{{ state.age }}</div>
  <button @click="state.name = 'pink'">改值</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      state
    }
  }
}
</script>

解构后: 修改时页面数据并不会改变

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="name = 'pink'">改值</button>
</template>
<script>
import { reactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      ...state
    }
  }
}
</script>

如果解构reactive的返回值,将破坏调用响应式特性,使用toRefs方法进行处理

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="name = 'pink'">改值</button>
</template>
<script>
// 1. 先引入!
import { reactive,toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改