江苏龙网

  1. 主页 > 生活百科 > >

一个 Java 猿眼中 Vue3 和 Vue2 的差异

Vue3

随着 TienChin 项目视频的录制，松哥终于也要静下心来，认真捋一捋 Vue3 中的各种新特性了，然后再和小伙伴们进行分享，其实 Vue3 中还是带来了很多新鲜的玩意，今天我们就不卷 JAVA 了，来卷卷前端 。
以下内容是一个 Java 猿对 Vue3 的理解，主要是应用层面上，如果有专业的前端小伙伴，请轻拍 。
1. script 写法进入到 Vue3 时代，最明显的感受就是在一个 .vue 文件中，script 标签的写法大变样了 。以前在 Vue2 中，我们都是这样写的：
<script>export default {name: "SysHr",data() {return {//}},mounted() {//},methods: {deleteHr(hr) {//},doSearch() {//}}}</script>不过到了 Vue3 里边，这个写法变了，变成下面这样了：
<template><div><div>{{a}}</div><div>{{result}}</div><button @click="btnClick">clickMe</button></div></template><script>import {ref} from 'vue';import {onMounted,computed} from 'vue'export default {name: "MyVue01",setup() {const a = ref(1);const btnClick=()=>{a.value++;}onMounted(() => {a.value++;});const result = computed(()=>{return Date.now();});return {a,btnClick,result}}}</script>先从大的方面来看，细节实现咱们后面再细聊 。
大的方面，就是在这个 export default 中，以后就只有两个元素了，name 和 setup，我们以前的各种方法定义、生命周期函数、计算属性等等，都写在 setup 中，并且需要在 setup 中返回，setup 中返回了什么，上面的 template 中就能用什么 。
这种写法稍微有点费事，所以还有一种简化的写法，像下面这样：
<template><div><div>{{a}}</div><div>{{result}}</div><button @click="btnClick">clickMe</button></div></template><script setup>import {ref} from 'vue';import {onMounted, computed} from 'vue'const a = ref(1);const btnClick = () => {a.value++;}onMounted(() => {a.value++;});const result = computed(() => {return Date.now();});</script>这种写法就是直接在 script 标签中加入 setup，然后在 script 标签中该怎么定义就怎么定义，也不用 return 了 。这个场景，又有点 jQuery 的感觉了 。
上面这个实现里有几个细节，我们再来详细说说 。
2. 生命周期首先就是生命周期函数的写法 。
以前 Vue2 里的写法有一个专业名词叫做 options API，现在在 Vue3 里也有一个专业名词叫做 composition API 。在 Vue3 中，这些对应的生命周期函数都要先从 vue 中导出，然后调用并传入一个回调函数，像我们上一小节那样写 。
下图这张表格展示了 options API 和 composition API 的一一对应关系：
options API composition API beforeCreate Not Needed created Not Needed mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeUnmount onBeforeUnmount unmounted onUnmounted errorCaptured onErrorCaptured renderTracked onRenderTracked renderTriggered onRenderTriggered activated onActivated deactivated onDeactivated
想用哪个生命周期函数，就从 vue 中导出这个函数，然后传入回一个回调就可以使用了 。例如第一小节中松哥给大家举的 onMounted 的用法 。
3. 计算属性除了生命周期函数，计算属性、watch 监听等等，用法也和生命周期函数类似，需要先从 vue 中导出，导出之后，也是传入一个回调函数就可以使用了 。上文有例子，我就不再啰嗦了 。
像 watch 的监控，写法如下：
<script>import {ref} from 'vue';import {onMounted,computed,watch} from 'vue'export default {name: "MyVue01",setup() {const a = ref(1);const btnClick=()=>{a.value++;}onMounted(() => {a.value++;});const result = computed(()=>{return Date.now();});watch(a,(value,oldValue)=>{console.log("value", value);console.log("oldValue", oldValue);})return {a,btnClick,result}}}</script>导入 watch 之后，然后直接使用即可 。
4. ref 于 reactive上面的例子中还有一个 ref，这个玩意也需要跟大家介绍下 。
在 Vue2 里边，如果我们想要定义响应式数据，一般都是写在 data 函数中的，类似下面这样：
<script>export default {name: "SysHr",data() {return {keywords: '',hrs: [],selectedRoles: [],allroles: []}}}</script>但是在 Vue3 里边，你已经看不到 data 函数了，那怎么定义响应式数据呢？就是通过 ref 或者 reactive 来定义了 。
在第一小节中，我们就是通过 ref 定义了一个名为 a 的响应式变量 。
这个 a 在 script 中写的时候，有一个 value 属性，不过在 html 中引用的时候，是没有 value 的，可千万别写成了 {{a.value}}，我们再来回顾下上文的案例：


推荐阅读


上一篇：什么是PRICAT报文？

下一篇：擦除器 网络战的“当头炮”：Wiper 恶意软件