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