vue3 简述

vue3

vue3基本上兼容vue2的代码
优点：按需引用
组合式api:更加接近原生js,更加直观没有this,更有效的降低了代码的耦合性
1.vue3的启动方式

var app = createApp(App);
app.use(store).use(router).mount('#app')

2.全局方法定义

app.config.globalProperties.$mysay=function(){ }

3.setUp组合api
ref 定义值类型
reative定义引用类型的数据

import{ref，reative} from 'vue'
set(){
const num =ref(5);
const list=reactive(["vue","react","angular"])
return {num,list}
}
<p v-for="(item,index) in list" :key="item" @click="list.splice(ind,1)">{{item}}</p>

4. 实例

<template>
	<div>
		首页
		<p @click="say()">{{msg}}</p>
		<input type="text" v-model="list[0]" ref="myref"/>
		<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);
				// 通过 myref.value 获取dom节点
				console.log(myref.value)
			}
			
			//setup(props,ctx)
			//props 必须通过接收  props:{day:{type:string,default:""}}
			// ctx.attrs  属性
			// ctx.emit 事件发送器
			// ctx.slots 插槽
			
			
			onUnmounted(()=>{
				console.log("组件将要销毁");
			})
			// stop可以停止监听
		// 02 返回 myref
			return {num,list,rmsg,counter,stop,send,myref};
		},
		data(){
			return {
				msg:"vue3，你好呀"
			}
		},
		methods:{
			say(){
				alert("vue3基本兼容vue2")
			}
		}
	}
	
</script>