一个 Java 猿眼中 Vue3 和 Vue2 的差异 - 网站源码_资源分享

随著 TienChin 工程项目音频的演唱，松哥总算也要吕圣索，深入细致捋一捋 Vue3 中的各式各样新优点了，接着再和爸爸妈妈们展开撷取，只但是 Vue3中却是增添了许多美味的玩意儿，那时他们就不卷 Java 了，来卷卷后端。

附注是三个 Java 猿对 Vue3 的认知，主要就是应用领域微观上，假如有专精的后端爸爸妈妈，请抚摸。

1. script 读法

步入到 Vue3黄金时代，最显著的体会是在三个 .vue 文档中，script 条码的读法Bagalkot了。从前在 Vue2 中，他们都是此种写的：

但是到了 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 APIcomposition APIbeforeCreateNot NeededcreatedNot NeededmountedonMountedbeforeUpdateonBeforeUpdateupdatedonUpdatedbeforeUnmountonBeforeUnmountunmountedonUnmountederrorCapturedonErrorCapturedrenderTrackedonRenderTrackedrenderTriggeredonRenderTriggeredactivatedonActivateddeactivatedonDeactivated

想用哪个心灵指数函数，就从 vue 中导出那个函数，接着传入回三个回调就可以使用了。例如第一小节中松哥给大家举的 onMounted 的用法。

3. 排序优点

除了心灵指数函数，排序优点、watch 监听之类，用法也和心灵指数函数类似，须要先从 vue 中导出，导出之后，也是传入三个回调函数就可以使用了。上文有例子，我就不再啰嗦了。

像 watch 的监控，读法如下：

导入 watch 之后，接着直接使用即可。

4. ref 于 reactive

下面的例子中除了三个 ref，那个玩意儿也须要跟大家介绍下。

在 Vue2 里头，假如他们想要表述响应式数据，一般都是写在 data 函数中的，类似下面此种：

但是在 Vue3里头，你已经看不到 data 函数了，那怎么表述响应式数据呢？是通过 ref 或者 reactive 来表述了。

在第一小节中，他们是通过 ref 表述了三个名为 a 的响应式变量。

那个 a 在 script 中写的时候，有三个 value 优点，但是在 HTML 中引用的时候，是没有 value 的，可千万别写成了 {{a.value}}，他们再来回顾下上文的案例：

<template> <div> <div>{{a}}</div> <button @click=”btnClick”>clickMe</button> </div> </template> <script> import {ref} from vue; export default { name: “MyVue04”, setup() { const a = ref(1); const btnClick=()=>{ a.value++; } return {a,btnClick} } } </script>

现在是通过此种的方式来表述响应式对象，修改值的时候，须要用 a.value，但是真正的下面的 template 节点中访问的时候是不须要 value 的（注意，函数也得回到后才能在页面中使用）。

和 Vue2 相比，此种读法有三个很大的好处是在方式中引用的时候不用再写 this 了。

ref 一般用来表述原始数据类型，像 String、Number、BigInt、Boolean、Symbol、Null、Undefined 这些。

假如你想表述对象，那么可以使用 reactive 来表述，如下：

<template> <div> <div>{{a}}</div> <button @click=”btnClick”>clickMe</button> <div>{{book.name}}</div> <div>{{book.author}}</div> </div> </template> <script> import {ref, reactive} from vue; export default { name: “MyVue04”, setup() { const a = ref(1); const book = reactive({ name: “三国演义”, author: “罗贯中” }); const btnClick = () => { a.value++; } return {a, btnClick,book} } } </script>

这里表述了 book 对象，book 对象中包含了 name 和 author 三个优点。

有的时候，你可能批量把数据表述好了，但是在访问的时候却希望直接访问，那么他们可以使用数据展开，像下面此种：

<template> <div> <div>{{a}}</div> <button @click=”btnClick”>clickMe</button> <div>{{name}}</div> <div>{{author}}</div> </div> </template> <script> import {ref, reactive} from vue; export default { name: “MyVue04”, setup() { const a = ref(1); const book = reactive({ name: “三国演义”, author: “罗贯中” }); const btnClick = () => { a.value++; } return {a, btnClick,…book} } } </script>

此种，在下面访问的时候，就可以直接访问 name 和 author 三个优点了，就不用添加 book 前缀了。

但是！！！

此种读法只但是有一个小坑。

比如我再添加三个按钮，如下：

<template> <div> <div>{{a}}</div> <button @click=”btnClick”>clickMe</button> <div>{{name}}</div> <div>{{author}}</div> <button @click=”updateBook”>更新图书信息</button> </div> </template> <script> import {ref, reactive} from vue; export default { name: “MyVue04”, setup() { const a = ref(1); const book = reactive({ name: “三国演义”, author: “罗贯中” }); const btnClick = () => { a.value++; } const updateBook=()=>{ book.name = 123; } return {a, btnClick,…book,updateBook} } } </script>

那个时候点击更新按钮，你会发现没反应！因为用了数据展开之后，响应式就失效了。因此，对于此种展开的数据，应该再用 toRefs 来处理下，如下：

<template> <div> <div>{{a}}</div> <button @click=”btnClick”>clickMe</button> <div>{{name}}</div> <div>{{author}}</div> <button @click=”updateBook”>更新图书信息</button> </div> </template> <script> import {ref, reactive, toRefs} from vue; export default { name: “MyVue04”, setup() { const a = ref(1); const book = reactive({ name: “三国演义”, author: “罗贯中” }); const btnClick = () => { a.value++; } const updateBook = () => { book.name = 123; } return {a, btnClick, …toRefs(book),updateBook} } } </script>

当然，假如你将 setup 直接写在了 script 条码中，那么可以直接按照如下方式来展开数据：

<template> <div> <div>{{a}}</div> <button @click=”btnClick”>clickMe</button> <div>{{name}}</div> <div>{{author}}</div> <button @click=”updateBook”>更新图书信息</button> </div> </template> <script setup> import {ref, reactive, toRefs} from vue; const a = ref(1); const book = reactive({ name: “三国演义”, author: “罗贯中” }); const btnClick = () => { a.value++; } const updateBook = () => { book.name = 123; } const {name, author} = toRefs(book); </script>