vue3的新增内容，区别于vue2

创建Vue3项目

启动方式：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// vue3启动方式
var app = createApp(App)
app.use(store).use(router).mount('#app')

区别于vue2

// vue2启动方式
// import Vue from "vue"
// new Vue({
//     store,
//     router,
//     render: h => h(App)
// }).$mount('#app')

于vue2 相比，vue3最大的不同 按需导入，组合式api

setup的参数(props,context)

props: 是一个对象,里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有的属性

context：上下文对象，可以通过es6语法解构 setup(props, {attrs, slots, emit})
案例如下：

<template>
	<div>
		首页
		<p @click="say()">{{msg}}</p>
		<input type="text" v-model="list[0]" ref="myref"/>
		<button @click="$mysay('河南')">say</button> <br>
		<button @click="num++">{{num}}</button>
		<p v-for="(item,index) in list" :key="item"  @click="list.splice(index,1)">{{item}}</p>
		<p>{{rmsg}}</p>
		<p @click="counter = counter+1">{{counter}}</p>
		<button @click="stop()">停止</button>
		<button @click="send()">发送</button>
	</div>
</template>
<script>
	
	// vue3最大的不同 按需导入，组合式api
	// getCurrentInstance 获取当前的实例
	import {ref,reactive,computed,watch,watchEffect,onMounted,onUnmounted,getCurrentInstance} from 'vue';
	export default{
		props:{"day":{type:String,default:''}},
		setup(props,ctx){
			console.log(props,ctx.attrs,"props，ctx")
			// ref 通常定义 值类型的数据
			const num = ref(5);
			// reactive 定义引用类型的数据
			const list = reactive(["vue","react","angular"])	
			// 计算
			const rmsg = computed(()=>list[0].split('').reverse().join(''))
			// 计算get和set
			const counter = computed({
				// 当获取counter值调用函数
				get(){return num.value},
				// 设置counter值调用函数
				set(v){
					num.value = v;
					if(v>10){
						num.value = 20;
					};
					
				}
			})
			watch(num,(num,onum)=>{
				console.log("num发生变化",num,onum);
			})
			const stop = watchEffect(()=>{
				// 这个回调函数引用的值，都会被监听
				console.log(num.value,list[0]);
				localStorage.setItem("num",num.value);
			})
			onMounted(()=>{
				console.log("组件以及挂载完毕")
				// 获取当前的实例
				// var app = getCurrentInstance()
				// console.log(app.data.msg);
				// var app = getCurrentInstance().appContext.app;
				// app.config.globalProperties.$mysay()
				// 获取实例data的msg
				
			})
			const myref = ref(null);
			const send = ()=>{
				ctx.emit("myevent",num.value);
				console.log(myref.value)
			}
			onUnmounted(()=>{
				console.log("组件将要销毁");
			})
			// stop可以停止监听
		
			return {num,list,rmsg,counter,stop,send,myref};
		},
		data(){
			return {
				msg:"vue3，你好呀"
			}
		},
		methods:{
			say(){
				alert("vue3基本兼容vue2")
			}
		}
	}
	
</script>

注意：一定要在setup的return中返回，不然会报错。

函数小知识：

reactive函数：

定义多个数据的响应式，接收一个普通对象然后返回该普通对象的响应式代理器对象(Proxy)，响应式转换是“深层的”：会影响对象内部所有嵌套的属性,所有的数据都是响应式的

computed函数：

与Vue2中的computed配置功能一致，返回的是一个ref类型的对象
计算属性的函数中如果只传入一个回调函数 表示的是get操作

watch函数:

监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次通过配置deep为true, 来指定深度监视

watchEffect函数:

监视数据发生变化时执行回调，不用直接指定要监视的数据, 回调函数中使用的哪些响应式数据就监视哪些响应式数据，默认初始时就会执行第一次, 从而可以收集需要监视的数据。

toRefs

把一个响应式对象转换成普通对象，该普通对象的每个属性都是一个 ref