vue3.0实现todolist(3)定义数据

ref定义单个数据

import {defineComponent,ref} from 'vue'

 setup(props, ctx) {
    let num=ref(10)
    let name=ref('afss')
    let arr=ref(['a','b'])
    let obj=ref({
      age:20
    })
    return {
      num,
      name,
      arr,
      obj
    };
  }

reactive定义对象类型的数据

import { defineComponent,ref, reactive } from "vue";

let data=reactive({
      num:10,
      name:'afss',
      arr:['a','b'],
      obj:{
        age:20
      }
    })
return{
    data
}


{{data.num}}{{data.name}}{{data.arr}}{{data.obj.age}}

 toRefs：

import { defineComponent,ref, reactive,toRefs } from "vue";

 return {
    
      ...toRefs(data)
 }
  

import { defineComponent,ref, reactive,toRefs } from "vue";