江苏龙网

  1. 主页 > 生活百科 > >

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

Vue3


<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>5. 小结好啦，今天就和小伙伴们分享了 Vue3 中几个新鲜的玩法～作为我们 TienChin 项目的基础（Vue 基本用法在 vhr 中都已经讲过了，所以这里就不再赘述了），当然，Vue3 和 Vue2 还有其他一些差异，这些我们都将在 TienChin 项目视频中和小伙伴们再仔细分享 。


推荐阅读


上一篇：什么是PRICAT报文？

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