Vue3如何定义一个基本数据类型和引用数据类型的数据

1. 定义基本数据类型：ref()
   说明
   ① 利用ref定义的属性，底层是通过Object.defineProperty()实现的响应式，返回的是一个RefImpl引用实现对象。
   ② 在template模板中直接访问属性名即可。
   ③ 在script标签中需要通过属性名.value的形式访问。

   <template>
   	<p>{{msg}}</p>
   </template>
   

   <script>
   import { ref } from 'vue';
   export default {
   	setup() {
   		let msg = ref('hello world');
   		console.log(msg.value);
   		return {
   			msg
   		}
   	}
   }
   </script>
   

2. 定义引用数据类型：reactive()
   说明
   ① 利用reactive定义的属性，底层是通过Proxy实现的，所以，修改对象中的任何一个值的时候，vue可以监听到，并及时的更新页面
   ② 在template和script中直接访问对象中的属性名即可

   <template>
   	<p>{{person.name}}</p>
   	<p>{{person.age}}</p>
   	<p>{{person.job.city}}</p>
   	<p>{{person.hobby}}</p>
   </template>
   

   <script>
   import { reactive } from 'vue';
   export default {
   	setup() {
   		let person = reactive({
   			name: 'wu',
   			age: 18,
   			job: {
   				city: 'tianjin'
   			},
   			hobby: ['eat', 'drink']
   		});
   		console.log(person.name);
   		console.log(person.age);
   		console.log(person.job.city);
   		console.log(person.hobby);
   		return {
   			person
   		}
   	}
   }
   </script>
   

3. shallowRef()
   说明：定义浅层次的数据，与ref的区别在于，当传入的值是一个对象时，shallowRef不再处理为响应式的，而ref会处理

4. shallReactive()
   说明：定义浅层次的数据，只将第一层的数据处理为响应式