Vue3.0实现todolist- ref定义单个数据和reactive定义对象类型的数据

参考文档

参考文档：https://blog.csdn.net/ll666888999/article/details/123789098
参考视频：https://www.imooc.com/learn/1300
官方文档查看文档：https://v3.cn.vuejs.org/

1：ref定义单个数据

在vue3.0中，用谁就要引用谁

import { defineComponent,ref} from "vue";

• ref定义数据
  引用ref,定义的数据在setup函数中定义,num初始值为10

 setup() {
    let num = ref(10);
    let name = ref("jack");
    return {
      num,
      name,
    };
  },

{{}}差值表达式，把数据名插入两个大括号里

{{ num }}
    
{{ name }}

这样就定义了一个num初始值为10，name初始值为Jack，运行结果：

====================================

• ref也可以定义数组

若要得到数组的第一项

setup() {

    //定义数组
    let arr = ref(["a", "b", "c", "d"]);

    return {
      arr,
    };
  },

{{ arr[1] }}

打印结果

====================================

• ref也可以定义对象

setup() {
    ///ref也可以定义对象
    let obj = ref({
      age: 20,
      name: "wang",
    });

    return {
      obj,
    };
  },

{{ obj.age }}
    
{{ obj.name }}

打印结果

Home.vue

2：reactive定义对象类型的数据
首先引用reactive

import { defineComponent, reactive } from "vue";

然后 定义对象类型的数据

 setup() {
    //方法定义
    let data = reactive({
      name: "wang",
      age: 21,
      obj: {
        price: 20,
      },
      arr: ["a", "b", "c", "d"],
    });
    return {
      data,
    };
  },

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

demo

如果不想写上面的data.
引用toRefs 可以把reactive定义的响应式对象转换成普通对象

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

setup() {
    //方法定义
    let data = reactive({
      name: "wang",
      age: 21,
      obj: {
        price: 20,
      },
      arr: ["a", "b", "c", "d"],
    });
    return {
      //data,
      ...toRefs(data)
    };
  },

 
{{ age }}
    
{{ name }}
    
{{ arr }}
    
{{ obj }}