vue3入门

vue3

1.基本兼容vue2代码
2.按需引用 组合式api：更加接近原生js，更加直观
3.vue3启动方式：

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

4.全局定义方法：

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

5.setup组合api
ref:定义值类型数据
reactive 定义引用类型的数据

import {ref,reactive} from 'vue'
set(){
 const num =ref(5);
 const list=reactive(["vue","react","angular"])
 return {num,list}
 }

{{num}}
<p v-for="item in list">

6.使用

**Home.vue**
<template>
	<div>
		首页
		<p @click="say()">{{msg}}</p>
		<input type="text" v-model="list[0]">
		<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>
		<p @click="stop()">停止</p>
		<p @click="send()">发送</p>
	</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("组件以及挂载完毕");
			})
			onUnmounted(() => {
				console.log("组件销毁");
				//获取当前实例
				var app = getCurrentInstance()
				console.log(app.data.msg);
				var app = getCurrentInstance().appContext.app;
				app.config.globalProperties.$mysay('vue')
			})
			const myref = ref(null);
			const send = () => {
				ctx.emit("myevent", num.value);
				console.log(myref.value)
			}
			onUnmounted(() => {
				console.log("组件将要销毁");
			})

			return {num,list,rmsg,counter,stop,send,myref}
		},
		data() {
			return {
				msg: "vue3,你好"
			}
		},
		methods: {
			say() {
				alert("vue3基本兼容vue2")
			}
		}
	}
</script>

**utils.js**
//定义一个函数
import {ref,onMounted,reactive} from 'vue'
function reverseText(){
	//建议一个dom引用的对象
	const reverseRef=ref(null);
	onMounted(()=>{
		//reverseRef.value就是引用的dom
		reverseRef.value.onclick=function(){
			//获取的dom的文本
			var msg=reverseRef.value.innerText;
			//翻转文本
			msg=msg.split('').reverse().join('');
			//赋值给dom
			reverseRef.value.innerText=msg;
		}
	})
	return reverseRef
}
//实时获取窗口的宽度与高度
function usewinSize(){
	//定义默认的宽高
	const size=reactive({w:window.innerWidth,h:window.innerHeight})
	onMounted(()=>{
		//当窗口发生变化时候更新宽高
		window.addEventListener("resize",function(){
			size.w=window.innerWidth;
			size.h=window.innerHeight
		})
	})
	//返回size
	return size
}
//导出函数
export {reverseText ,usewinSize}

**About.vue**
<template>
  <div class="about">
    <h1 ref="elem">This is an about page</h1>
	<h1 ref="el">我是页面</h1>
	<p>w:{{size.w}},h:{{size.h}}</p>
  </div>
</template>
<script>
	//导入reverseText
	import {reverseText,usewinSize} from './utils.js'
	export default{
		//引用一个组件，单击那个，文本翻转
		setup(props,ctx){
			const elem=reverseText();
			const el=reverseText();
			const size=usewinSize()
			return {elem,el,size}
		}
	}
</script>

**App.vue**
<template>
	<div id="nav">
		<router-link to="/">Home</router-link> |
		<router-link to="/about">About</router-link>
	</div>
	<router-view :day="1905" myname="zls" @myevent="$mysay($event)" />
</template>