Vue入门（十四）

todolist之基本结构——介绍reactive定义对象类型的数据

reactive

官网说明：定义: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

开始编写代码

        准备好上一讲的代码

reactive 定义多个数据

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

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref,
		reactive
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 接收父组件的数据
		props: {

		},
		// 定义子组件
		components: {

		},
		setup(props, ctx) {
			let data = reactive({
				name: 'jack',
				age: 18,
				obj: {
					price: 20
				},
				arr: ['a', 'b', 'c', 'd']
			})
			return {
				data
			}
		}
	})
</script>

效果

另一种写法（toRefs）

toRefs

官网说明：

1. 把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref ，和响应式对象 property 一一对应。
2. 当想要从一个组合逻辑函数中返回响应式对象时，用 toRefs 是很有效的，该 API 让消费组件可以 解构 / 扩展（使用 ... 操作符）返回的对象，并不会丢失响应性

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

<script>
	// 编写 js 内容
	import {
		defineComponent,
		ref,
		reactive,
		toRefs
	} from 'vue'

	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 接收父组件的数据
		props: {

		},
		// 定义子组件
		components: {

		},
		setup(props, ctx) {
			let data = reactive({
				name: 'jack',
				age: 18,
				obj: {
					price: 20
				},
				arr: ['a', 'b', 'c', 'd']
			})
			return {
				// data
				...toRefs(data)
			}
		}
	})
</script>

<style scoped lang="scss">
	// 编写样式内容
</style>

效果：

---

视频学习地址：

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)

视频的顺序有问题，正确的顺序如下：
第3章todolist之基本结构
视频：3-1 介绍定义组件
视频：3-3 介绍ref定义单个数据
视频：3-4 介绍reactive定义对缘类型的数据

视频：3-6 介绍方法的定义和使用
视频：3-2 实现todolist需要的4个组件
视频：3-5 实现todolist每个组件需要的数据

视频：3-7 实现todolist每个组件需要的方法
视频：3-8 介绍定义状态管理
视频：3-9 实现todolist之使用状态管理的api
视频：3-10 介绍计算属性
视频：3-11 实现通过计算属性获取vuex中定义的todolist的数据