Vue3.0实现todolist- ref定义单个数据和reactive定义对象类型的数据
Vue3.0实现todolist- ref定义单个数据和reactive定义对象类型的数据
王小婷
发布于 2022-09-28 09:23:29
发布于 2022-09-28 09:23:29
参考文档
参考文档：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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-09-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录