©2020-2024 ioDraw All rights reserved,
Privacy Policy
今天要说的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的优势如下：
* defineProperty只能监听某个属性，不能对全对象监听；
* 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）；
* 可以监听数组，不用再去单独的对数组做特异性操作 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的变化还有很多，这些不同大家先多多吸收。