vue3.x setup语法与vue2.x的区别

最新的vue版本相对于vue2.x已经大改，初始化项目就会发现有所不同，导致本人刚开始还不习惯vue3.x的语法，仍旧用vue2.x语法糖发现用不了，这才来总结下vue3.x中script部分的语法更新的点。

1.生命周期的不同

在vue2中，生命周期函数名如下：

beforeCreate()：此时data 和 methods 中的数据还没有初始化。
created()：数据已经生成，但是还没挂载到DOM之上。
beforeMount()：模板渲染之前，此时模板已经在内存生成但未渲染到页面。
mounted()：数据挂载到DOM上并进行渲染到页面中去了。
beforeUpdate()：data数据已更新，但尚未渲染到页面上去，是未同步状态。
updated()：DOM更新，页面渲染更新为和data中值同步。
beforeDestroy(): vue实例销毁前。
destroyed(): vue实例已经销毁。

而在vue3.x中，生命周期函数更新成为如下：

setup() :开始创建组件之前，在beforeCreate和created之前执行。创建的是data和method
onBeforeMount() : 组件挂载到节点上之前执行的函数。
onMounted() : 组件挂载完成后执行的函数。
onBeforeUpdate(): 组件更新之前执行的函数。
onUpdated(): 组件更新完成之后执行的函数。
onBeforeUnmount(): 组件卸载之前执行的函数。
onUnmounted(): 组件卸载完成后执行的函数
onActivated(): 被包含在中的组件，会多出两个生命周期钩子函数。被激活时执行。
onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行。
onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。

写法上：vue2定义生命周期函数是

mounted() {
   
}

vue3写法有点react化了：

onMounted(() => {

})

2.script标签内语法改变

原本vue2中的语法：

export default {
  name: "component",
  data() {
    return {
    }
    },
  methods: {

    },
  computed: {
  
   },
   watch:{
   
   }
   ......
}

这种老的语法被称为选项式API语法就是说data、method、computed分开；但是到现在最新的vue3.12中，这种语法统一写在setup()中(setup是生命周期最先执行的内容):

setup({
//data数据部分
let data1 = "xxx"
let data2 = "yyy"

//method方法部分如下写法
function func1() {
//执行逻辑...
//不要习惯性在里面写this.data1 = xxx来改变数据，this在vue3已经失效
data1 = "zzz" //更新完成
}
function func2() {
//执行逻辑...
}

//最后统一返回暴露给DOM使用
return {data1,data2,func1,func2}
})

都是这种写法又存在问题——没有任何响应式，数据data1不会及时通过method事件更新到template上，vue2是通过this直接数据同步渲染的。

所以vue3应用了ref、reactive
像下面这样通过ref来定义变量，这个变量就变成响应式的了；reactive和ref区别在于其只能定义复合结构如数组对象等的响应式变量。

<script setup>
import {ref} from "vue";

let menu = ref("菜单111")

function test(){
  menu.value = "菜单222"
}
</script>

3.vue3.12不再限制vue组件中template为单一根，而是可以为多个并列的根：

//vue2
<template>
<div>
...
...
</div>
</template>

//vue3
<template>
<div>...</div>
<div>...</div>
<div>...</div>
</template>

先列举这些，后续再更新其他地方的区别…