今天要说的vue3基本兼容我们所熟悉的vue2代码。

一、两者基本的不同点。

1.vue3固然是优点多多的，其3个主要的优点有：

（1）按需引用；

（2）组合式api：更加接近原生js，更加直观；

（3）vue3新增的set up中没有this，也就是说vue3更有效地降低了代码地耦合性。

2.vue3地启动方式：

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

3.vue3全局方法定义：

app.config.globalProperties.$mysay = function(msg){alert(msg+"你好")}

4.set up 组合 api中，ref：定义值类型数据，reactive：定义引用类型数据；旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

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

5.相对于vue2.x，vue3使用peoxy的优势如下：

1. defineProperty只能监听某个属性，不能对全对象监听；
2. 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）；
3. 可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化

6.生命周期钩子变化很大，其中beforeCreate和created都被删除，直接使用setup()，即开始创建组件之前，在beforeCreate和created之前执行，剩下的基本都是在最前面加了个on，如下：

beforeMount   -> onBeforeMount，组件挂载到节点上之前执行的函数。
mounted       -> onMounted，组件挂载完成后执行的函数。
beforeUpdate  -> onBeforeUpdate，组件更新之前执行的函数。
updated       -> onUpdated，组件更新完成之后执行的函数。
beforeDestroy -> onBeforeUnmount，组件卸载之前执行的函数。
destroyed     -> onUnmounted，组件卸载完成后执行的函数
7.父子传参不同

1、setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

2、setup函数是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前的函数

3、与模板一起使用：需要返回一个对象 (注意：在setup函数中定义的变量和方法最后都是需要 return 出去的 不然无法再模板中使用)

4、使用渲染函数：可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态。

二、实例应用

首先我们在views中创建一个js文件，js文件代码如下：

//定义一个函数
import {ref,onMounted} 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;
		}	
	})
	//返回dom引用对象
	return reverseRef;
}

然后再任意views中的vue文件（我直接再about中写了）中引用，代码如下：

<template>
  <div class="about">
    <h1 ref="elem">This is an about page</h1>
	<h1 ref="el">我是关于</h1>
  </div>
</template>
<script>
	//导入reverseText
	import {reverseText} from './utils.js'
	export default{
		// 引用一个组件，单击哪个，文本翻转
		setup(props,ctx){
			const elem = reverseText();
			const el = reverseText();
			return {elem,el};
		}
	}
</script>

注意，一定要记得导出。

以上是用vue3写的一个文字翻转效果，效果如下：

 

 今天的vue3先到这里，大家可以先掌握基本的用法，vue3较于vue2的变化还有很多，这些不同大家先多多吸收。