[Vue3] study notes - ref function, reactive function

Ref function

• Role: define a responsive data
• Syntax: const xxx=ref(initValue)
  • Create one that contains reactive data 引用对象(reference对象，简称ref对象).
  • Operation data in JS: xxx.value
  • Read data in the template: no need for .value, directly:
    { {xxx}}
• Remark
  • The received data can be of basic type or object type.
  • Basic types of data: Responsiveness is still completed by the get and set of Object.defineProperty()
  • Object type data: internally "requested" a new function in Vue3.0 - reactive function
    App.vue

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{
    
    {
    
    name}}</h2>
	<h2>年龄：{
    
    {
    
    age}}</h2>
	<h3>工作种类：{
    
    {
    
    job.type}}</h3>
	<h3>工作薪水：{
    
    {
    
    job.salary}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {
    
    ref} from 'vue'
	export default {
    
    
		name: 'App',
		setup(){
    
    
			//数据
			let name = ref('张三')
			let age = ref(18)
			let job = ref({
    
    
				type:'前端工程师',
				salary:'30K'
			})

			//方法
			function changeInfo(){
    
    
				// name.value = '李四'
				// age.value = 48
				console.log(job.value)
				// job.value.type = 'UI设计师'
				// job.value.salary = '60K'
				// console.log(name,age)
			}

			//返回一个对象（常用）
			return {
    
    
				name,
				age,
				job,
				changeInfo
			}
		}
	}
</script>

reactive function

• Function: define a 对象类型responsive data (do not use it for basic types, use ref function)
• Syntax: const proxy object = reactive (source object) receives an object (or array) and returns an代理对象(Proxy的实例对象，简称proxy对象)
• The reactive data defined by reactive is "deep"
• The internal ES6-based Proxy implementation operates on the internal data of the source object through the proxy object.

app.vue

<template>
	<h1>一个人的信息</h1>
	<h2>姓名：{
    
    {
    
    person.name}}</h2>
	<h2>年龄：{
    
    {
    
    person.age}}</h2>
	<h3>工作种类：{
    
    {
    
    person.job.type}}</h3>
	<h3>工作薪水：{
    
    {
    
    person.job.salary}}</h3>
	<h3>爱好：{
    
    {
    
    person.hobby}}</h3>
	<h3>测试的数据c：{
    
    {
    
    person.job.a.b.c}}</h3>
	<button @click="changeInfo">修改人的信息</button>
</template>

<script>
	import {
    
    reactive} from 'vue'
	export default {
    
    
		name: 'App',
		setup(){
    
    
			//数据
			let person = reactive({
    
    
				name:'张三',
				age:18,
				job:{
    
    
					type:'前端工程师',
					salary:'30K',
					a:{
    
    
						b:{
    
    
							c:666
						}
					}
				},
				hobby:['抽烟','喝酒','烫头']
			})

			//方法
			function changeInfo(){
    
    
				person.name = '李四'
				person.age = 48
				person.job.type = 'UI设计师'
				person.job.salary = '60K'
				person.job.a.b.c = 999
				person.hobby[0] = '学习'
			}

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