vue3中的setup,ref函数,reactive函数

vue3中使用setup,把vue2中的data,watch等都放在了setupzhong

首先使用这些函数先引入

​
import {ref,reactive,computed,watch,watchEffect} from 'vue'

​

ref函数:使用在字符串或者数字类型数据

修改数据的时候需要xxx.value,

在view中不用.value

    <h2>姓名：{{name}}</h2>
	<h2>年龄：{{age}}</h2>

	setup(){
			//数据
			let name = ref('张三')
			let age = ref(18)
			//方法
			function changeInfo(){
				name.value = '李四'
				age.value = 48
			}
			//返回一个对象（常用）
			return {
				name,
				age,
				changeInfo
			}
		}

reactive函数:定义对象的数据类型,或者数组类型,

	<h2>姓名：{{person.name}}</h2>
	<h2>年龄：{{person.age}}</h2>

		setup(){
			//数据
			let person = reactive({
				name:'貂蝉',
				age:18,
				job:{
					type:'跳舞',
				},
				hobby:['跳舞','真伤']
			})
			//方法
			function changeInfo(){
				person.name = '上官'
				person.age = 28
				person.job.type = '写字'
				person.hobby[0] = '写字'
			}

			//返回一个对象（常用）
			return {
				person,
				changeInfo
			}
		}