vue学记笔记(十一) Vue3.0之reactive和toRefs

vue3.0 reactive 和 toRefs

前面一仗数据都是散的不太好管理 于是 reactive 就是在一次封装

setup(){} 必须要有

• 代码如下

<template>
  <div>
    <span>{{count}}</span>
    <span>{{double}}</span>
    <div @click="changecount">点击增加</div>
  </div>
</template>

<script>
import { ref, computed, reactive, toRefs } from 'vue'  //ref接收一个参数 返回一个响应式对象  //computed是一个函数接收一个参数是函数
export default {
  setup () {
    const data = reactive({
      count: 0,
      double: computed(() => {
        return data.count * 2
      }),
      changecount: () => {
        data.count++
      }
    })
    const result = toRefs(data);
    return {
      ...result
    }
  }
}
</script>

<style lang="less" scoped>
</style>

toRefs 是为了转化成对象。否则显示的时候必须写 data.count 之类的

const result = toRefs(data)