Vue3-常用CompositionAPi - web前端 | MrNobody = MrNobody's Blog = 保持呼吸不要断气

作用：定义一个响应式的数据
语法: const name = ref('zs')
- 创建一个包含响应式数据的引用对象（reference 对象简称 ref 对象）
- js 中操作数据： name.value
- 模板中读取数据：不需要.value, 直接 <div>{{ name }}</div>

	<template>
	<div class="container">
	<h1>姓名：{ name }</h1>
	<h1>年龄：{ age }</h1>
	<h1>工作种类：{ job.type }</h1>
	<h1>工资：{ job.money }</h1>
	<button @click="changeInfo">修改人的信息</button>
	</div>
	</template>

	<script>

	// 导入 ref
	import {ref} from 'vue'

	export default {
	name: "App",
	setup() {
	let name = ref('zs')
	let age = ref(18)
	let job = ref({
	type: '前端',
	money: 3000
	})

	function changeInfo() {
	name.value = 'ls'
	age.value = 48
	job.value.type = '后端'
	job.value.money = 4000
	console.log(name, age)
	}

	return {
	name,
	age,
	changeInfo,
	job
	}
	}
	}
	</script>

作用：定义一个对象类型的响应数据 (基本类型不要用它，要用 ref 函数)
语法： const person = reactive({ name:'zs', age:18 }) , 接收一个对象 (或者数组) 返回一个代理对象 (proxy 对象)
reactive 定义的响应式数据是 “深层次的”
内部基于 ES6 的 Proxy 实现，通过代理对象操作对象内部数据进行操作

	<template>
	<div class="container">
	<h1>姓名：{ person.name }</h1>
	<h1>年龄：{ person.age }</h1>
	<h1>工作种类：{ person.job.type }</h1>
	<h1>工资：{ person.job.money }</h1>
	<h1>爱好：{ person.hobby }</h1>
	<button @click="changeInfo">修改人的信息</button>
	</div>
	</template>

	<script>
	import {reactive} from 'vue'

	export default {
	name: "App",
	setup() {
	// 数据
	let person = reactive({
	name: 'zs',
	age: 18,
	job: {
	type: '前端',
	money: 3000
	},
	hobby: ['抽烟', '喝酒', '烫头']
	})


	// 方法
	function changeInfo() {

	person.age = 48
	person.job.type = '后端'
	person.job.money = 4000
	person.hobby[0] = '放屁'
	console.log(person.name, person.job.type)
	}

	return {
	person,
	changeInfo,

	}
	}
	}
	</script>

从定义数据角度对比：
- ref 用来定义：基本类型数据
- reactive 用来定义对象 (或数组) 类型数据
- 备注： ref 也可以用来定义对象 (或数组) 类型数据，它内部会通过 reactive 转为代理对象
从使用角度对比
- ref 定义数据：操作数据需要 .value , 读取数据时模板中直接读取，不需要 .value
- reactive 定义数据：操作数据与读取数据：均不需要 .value

	<template>

	姓：<input type="text" name="" id="" v-model="person.firstName">
	<br>
	名：<input type="text" name="" v-model="person.lastName">
	<br>
	<span>全名：{ person.fullName }</span>
	<br>
	全名：<input type="text" v-model="person.fullName">
	</template>

	<script>
	import {reactive, computed} from "vue";

	export default {
	name: "App",

	setup() {
	// 数据
	let person = reactive({
	firstName: "张",
	lastName: "三"
	})
	// 计算属性 -- 简写形式 (没有考虑计算属性被修改的情况)
	/*
	person.fullName = computed(() => {
	return person.firstName + "-" + person.lastName
	})
	*/

	// 计算属性 -- 完整写法 (考虑读和写)
	person.fullName = computed({
	get() {
	return person.firstName + "-" + person.lastName
	},
	set(value) {
	const nameArr = value.split('-')
	person.firstName = nameArr[0]
	person.lastName = nameArr[1]
	}
	})
	return {
	person,

	}
	}
	}
	</script>

	<template>
	<h2>当前求和为：{ sum }</h2>
	<button @click='sum++'>+1</button>
	<hr>
	<h2> 当前的信息为：{ msg }</h2>
	<button @click="msg+='!'">修改信息</button>

	</template>

	<script>
	import {ref, watch} from "vue";

	export default {
	name: "App",

	setup() {
	// 数据
	let sum = ref(0)
	let msg = ref('你好吗')

	// 情况 1：监视 ref 所定义的一个响应式数据
	/*
	watch (sum, (newValue, oldValue) => {
	console.log ('sum 变了 ', newValue, oldValue)
	}, {immediate: true, deep: true})
	*/

	// 情况 2：监视 ref 所定义的多个响应式数据
	watch([sum, msg], (newValue, oldValue) => {
	console.log('sum 或 msg 变了', newValue, oldValue)
	}, {immediate: true, deep: true})


	return {
	sum,
	msg
	}
	}
	}
	</script>

不用指明监视哪个属性，监视的回调中用到哪个属性，就监视哪个属性
类似 computed：
- computed 注重计算出的值（回调函数的返回值），所以必须要写返回值
- watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值

	//watchEffect 所指定的回调中用到的数据只要发生变化，就会直接重新执行回调

	import { watchEffect } from 'vue'

	watch(()=>{
	const x1 = sum.value
	console.log('watchEffect配置的回调执行了')
	})