vue3.0基础

vue3

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

vue3启动方式

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

全局定义方法

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

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"></p>

vue3的生命周期

vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子

1. beforeCreate -> 使用 setup()

2. created -> 使用 setup()

3. beforeMount -> onBeforeMount

4. mounted -> onMounted

5. beforeUpdate -> onBeforeUpdate

6. updated -> onUpdated

7. beforeDestroy -> onBeforeUnmount

8. destroyed -> onUnmounted

9. errorCaptured -> onErrorCaptured

vue3的组件

两个小例子

// 创建一个js文件
// 定义一个函数
import {
	ref,
	reactive,
	onMounted,
	defineComponent,
	onUnmounted
} from 'vue'

// 实时获取窗口的宽度与高度
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;
}

// 实时获取鼠标坐标
function zuobiao() {
	const zuo = {
		x: ref(0),
		y: ref(0)
	}
	const dc = (e, MouseEvent) => {
		zuo.x.value = e.pageX;
		zuo.y.value = e.pageY;
	}
	// 鼠标移动时更新坐标
	onMounted(() => {
		document.addEventListener("mousemove", dc);
	})
	onMounted(() => {
		document.addEventListener("mousemove", dc);
	})
	return zuo
}



export {
	usewinSize,
	zuobiao
};

// 创建一个vue文件
<template>
	<div class="about">
		<p>w:{{size.w}},h:{{size.h}}</p>
		<p>x:{{hei.x}}  y:{{hei.y}}</p>
	</div>
</template>

<script>
	// 导入
	import {
		usewinSize,
		zuobiao
	} from './utils.js'
	export default {
		// 引用组件
		setup(props, ctx) {
			const size = usewinSize();
			const hei = zuobiao();
			return {
				size,
				hei
			}
		}
	}
</script>