(zichao)VUE3基础（仅作简单整理，未深入探究）

一、创建Vue3.0工程

//查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
//安装或者升级你的@vue/cli
npm install -g @vue/cli
//创建
vue create vue_test
//启动
cd vue_test
npm run serve

二、setup

（一）理解：

Vue3.0中一个新的配置项，值为一个函数。

（二）作用

setup是所有父亲，组件中所用到的：数据、方法等等，均要配置在setup中。

（三）setup函数的两种返回值：

若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！）

（四）注意点

1. 尽量不要与Vue2.x配置混用，如果有重名, setup优先。
2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

（五）声明一个setup

setup(){
   
	//数据
	let name = '张三'
	let age = 18
	let a = 200
	//方法
	function sayHello(){
   
		alert(`我叫${
     name}，我${
     age}岁了，你好啊！`)
	}
	//返回一个对象（常用）
	return {
   
		name,
		age,
		sayHello,
		a
	}
}

三、ref函数

（一）作用

定义一个响应式的数据

（二）语法

//引入
import {
   ref} from 'vue'
//创建一个包含响应式数据
const xxx = ref(initValue)

（三）操作数据

//JS中操作数据
xxx.value
 
//模板中读取数据
<div>{
   {
   xxx}}</div>

（四）注意

1. 接收的数据可以是：基本类型、也可以是对象类型。
2. 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
3. 对象类型的数据：内部求助 了Vue3.0中的一个新函数—— reactive函数。

四、reactive函数

（一）作用

定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

（二）语法

const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

//引入reactive
import {
   reactive} from 'vue'
let person = reactive({
   
	name:'张三',
	age:18,
	job:{
   
		type:'前端工程师',
		salary:'30K',
		a:{
   
			b:{
   
				c:666
			}
		}
	},
	hobby:['抽烟','喝酒','烫头']
})

（三）深层次的

reactive定义的响应式数据是“深层次的”，对象和数组的增删改查都可以侦测到

五、setup的两个注意点

（一）setup执行的时机

在beforeCreate之前执行一次，this是undefined。

所以内部不能使用this

（二）setup的参数

1、props

值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

2、context

上下文对象

1. attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
2. slots: 收到的插槽内容, 相当于 this.$slots。
3. emit: 分发自定义事件的函数, 相当于 this.$emit。

六、计算属性

（一）写法

与Vue2.x中computed配置功能一致

import {
   computed} from 'vue'
  
setup(){
   
      ...
  	//计算属性——简写
    let fullName = computed(()=>{
   
        return person.