提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

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

对象数据 实现 类型 定义 单个 ref vue3.0
2023-06-13 09:11:15 时间

参考文档

参考文档：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,
    };
  },

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

<div>{{ num }}</div>
    <div>{{ name }}</div>

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

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

  • ref也可以定义数组

若要得到数组的第一项

setup() {

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

    return {
      arr,
    };
  },
<div>{{ arr[1] }}</div>

打印结果

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

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

    return {
      obj,
    };
  },
<div>{{ obj.age }}</div>
    <div>{{ obj.name }}</div>

打印结果

Home.vue

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>
    <div>{{ num }}</div>
    <div>{{ name }}</div>
    <div>{{ arr[1] }}</div>
    <div>{{ obj.age }}</div>
    <div>{{ obj.name }}</div>
  </div>
</template>

<script>
import NavHeader from "@/components/navHeader/NavHeader.vue";
import NavMain from "@/components/navMain/NavMain.vue";
import NavFooter from "@/components/navFooter/NavFooter.vue";
//reactive定义对象类型的数据
import { defineComponent, ref, reactive } from "vue";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    NavHeader,
    NavMain,
    NavFooter,
  },
  setup(props, ctx) {
    let num = ref(10);
    let name = ref("jack");

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

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

    return {
      num,
      name,
      arr,
      obj,
    };
  },
});
</script>

<style>
</style>

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,
    };
  },
 <div>{{ data.age }}</div>
    <div>{{ data.name }}</div>
    <div>{{ data.arr }}</div>
    <div>{{ data.obj }}</div>

demo

<template>
  <div>
    <nav-header></nav-header>
    <nav-main></nav-main>
    <nav-footer></nav-footer>

    <div>{{ data.age }}</div>
    <div>{{ data.name }}</div>
    <div>{{ data.arr }}</div>
    <div>{{ data.obj }}</div>
  </div>
</template>

<script>
import NavHeader from "@/components/navHeader/NavHeader.vue";
import NavMain from "@/components/navMain/NavMain.vue";
import NavFooter from "@/components/navFooter/NavFooter.vue";

//reactive定义对象类型的数据
import { defineComponent, reactive } from "vue";

export default defineComponent({
  name: "Home",
  props: {},
  components: {
    NavHeader,
    NavMain,
    NavFooter,
  },
  setup() {
    //方法定义
    let data = reactive({
      name: "wang",
      age: 21,
      obj: {
        price: 20,
      },
      arr: ["a", "b", "c", "d"],
    });
    return {
      data,
    };
  },
});
</script>

<style>
</style>

如果不想写上面的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)
    };
  },
 <div>{{ age }}</div>
    <div>{{ name }}</div>
    <div>{{ arr }}</div>
    <div>{{ obj }}</div>

相关文章