Vue3.0

1. 数据声明

ref
1. 概念：ref用于声明任何类型的数据，使用需要通过xx.value来获取，优先推荐使用ref；如ref采用指针类型的数据，内部调用还是会转换为reactive调用；
2. 使用：
```
const count = ref(1);
conut.value++;
```
reactive
1. 概念：reactive用于声明【对象，数组】类型的数据。reactive利用proxy来实现；
2. 使用：
```
const data = reactive({a: 1}) || const data = reative([1, 2, 3]);
data.a = * || data.push(*);
```

toRef

概念：用于接收父组件传递props数据时接收，获取需要用xx.value；

使用：

// 获取props里面的title;
setup (props) { 
  const myTitle = toRef(props, 'title');
  console.log(myTitle.value);
};
// 而对toRef的理解真正是toRef是为了取出对象里面的key出来，延续响应式；
const state = reactive({
	age: 99,
	name: 'Goku'
});
const ageRef = toRef(state, 'age')

toRefs

概念：用于接收父组件传递props数据时接收，获取需要用xx.value。与toRef区别为：toRefs可以直接解构值，无需手动赋值；也可以与reactive声明的变量，之后return抛出的时候使用 ...toRefs(xx)

使用：

// 将props所有接收到的数据解构到myTitle;
setup (props) { 
  const myTitle = toRefs(props);
  console.log(myTitle.value);
}
// 再次对比toRefs与toRef的区别，两者都是取出对象里面的key值，并且延续响应的功能，因为按正常解构写法解构一个有响应式数据的对象，会导致解构出来的变量丢失响应式功能；所以toRefs和toRef可以很好的修复这一点；
const state = reative({
	age: 99,
	name: 'Goku'
});
const {age , name} = toRefs(state); // 相当于const {age, name} = ...state

2. 生命周期

vue2.x	vue3.0
beforeCeate	setUp()
created	setUp()
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

3. 计算属性

computed
1. 概念：与vue2.x一样，用于设置某个值的依赖；
2. 使用：
```
xxx = computed(()=>{
	return 最终值；
});
```

4. 数据监听

watch
1. 概念：与vue2.x一样，用于监听某个值的变化；
2. 使用：
```
watch(xx, (newVal, oldVal)=>{
	// 逻辑处理
});
```
watchEffect (概念解释非正确，待确认)
1. 概念：在初始化的时候会执行一次，若有依赖判断，则依赖成立后，判断执行的代码有发生变化，则重新调用；
2. 使用：
```
watchEffect(()=>{})；
```

5. 组件引用

components
1. 概念：与vue2.x用法一样，异步加载组件可参考下方第8点；
2. 使用：
```
import xx from xx；
components： { };
```

6. 组件之间通信

父组件向子组件传递、以及使用父组件方法
1. 概念：
  
  传递方法与vue2.x用法一样，通过:xx=xx绑定；
  
  若传递里边有变量有方法，可以采用reactive({xx: xx, fun:()=>{ }})声明一个对象后传递给子组件；
2. 使用：
  
  子组件使用通过setup(props)接收，props.xx.xx 使用；
  
  如果是用vue2.x传递子组件的方法方式，则子组件通过使用setup(ctx)上下文，调用ctx.emit("xx")；
3. 父组件通过双向绑定v-model给子组件，子组件通过modelValue接收，props:{ modelValue: { type: xx }}；
4. 关于vue3.0 v-model组件的变化，在vue3.0中，v-model可以绑定多个，也可以自定义命名，命名规则为： v-model: xx = xxx；其余使用与普通双向绑定用法一样；
父组件获取子组件数据、方法
1. 概念：获取标识与vue2.x用法一样，通过在子组件上面绑定ref="xx"，但是这里的xx命名，与下面获取该子组件的相关内容有关；此处例命名 ref="haha"，那么下方也会需要用到haha；
2. 使用：，通过 const haha = ref(); 这里的haha与子组件的ref命名必须一致; 父组件通过 haha.value访问数据、方法；

7. 路由使用

需要vue-router4版本以上，在路由主文件里引入

import { createRouter, createWebHashHistory } from 'vue-router'，
const routes = {组件注册}，
createRouter({
   history: createWebHashHistory(),
   routes
});

在main.js引入router后，通过createApp(App).use(router).mount('#app')全局注册；

在组件获取当前路由对象：

import { useRouter, userRoute } from 'vue-router'
const router = useRouter(); // 为路由对象,用于跳转操作,相当于vue2.x中的this.$router;
const route = useRoute(); // 获取当前路由数据，相当于vue2.x中的this.$route

8. 新增api

defineAsyncComponent

定义：用于异步加载组件；

使用：

/*
 第一种
*/
const AsyncCategory = defineAsyncComponent(() =>import("./AsyncCategory.vue"))
/*
 第二种
*/
import Loading from './Loading.vue';
const AsyncCategory = defineAsyncComponent({
	loader: () => import("./AsyncCategory.vue"),
	loadingComponent: Loading,  占位组件，当AsyncCategory还没加载出来时候，显示这个组   件
	errorComponent: 当AsyncCategory加载失败出现
	delay: 2000, 在显示loadingComponent组件之前, 等待多长时间
	/**
		err: 错误信息,
		retry: 函数, 调用retry尝试重新加载
		attempts: 记录尝试的次数
	*/
	onError: function(err, retry, attempts) {
	}
});

suspense

定义：一个内置的全局组件，该组件有两个插槽： default: 如果default可以显示，那么显示default内容；

       fallback: 如果default无法显示，那么会显示fallback内容；

使用：

	<suspense>
     	<template v-slot:default>
     		<content />
     	</template>
     	<template v-slot:fallback>
     		<div>
     			loading...
     		</div>
     	<template>
     </suspense>

状态驱动的style中css变量注入；

定义：更方便css样式在data中的控制；

使用：

<template>
	<div class="text">hello</div>
</template>

<script>
export default {
	data () {
		return {
			color: "red"
		}
	}
}
</script>

<style :vars="{color}">
.text {
	color: var(--color);
}
</style>

teleprot

定义：全局弹窗组件，在子组件里也可穿透到最外层父组件；

使用
```
<Teleport  to="body">
	<div>
		...
	</div>
</Teleport>
```

关于Vue3.0分享

Vue3.0

1. 数据声明

ref

reactive

toRef

toRefs

2. 生命周期

3. 计算属性

computed

4. 数据监听

watch

watchEffect (概念解释非正确，待确认)

5. 组件引用

components

6. 组件之间通信

父组件向子组件传递、以及使用父组件方法

7. 路由使用

需要vue-router4版本以上，在路由主文件里引入

8. 新增api

defineAsyncComponent

suspense

状态驱动的style中css变量注入；

teleprot