今天要说的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的优势如下：
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的变化还有很多，这些不同大家先多多吸收。