建站
咨詢
售后
建站咨詢
新聞中心
過(guò)去，我們看過(guò)很多重大變革即將到來(lái)的文章，但是并沒(méi)有真正深入研究代碼將如何變化。
站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到紅崗網(wǎng)站設(shè)計(jì)與紅崗網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、空間域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋紅崗地區(qū)。
為了展示這些變化，小芯將在Vue2和Vue3中構(gòu)建一個(gè)簡(jiǎn)單的表單組件。
在本文的最后，將介紹Vue2和Vue3之間的主要編程差異，幫助大家了解，逐漸成為更好的開(kāi)發(fā)人員。
如果想知道如何建立第一個(gè)Vue3應(yīng)用程序，請(qǐng)查看初學(xué)者的Vue3Alpha應(yīng)用程序指南。
我們開(kāi)始吧!
創(chuàng)建模板
對(duì)于大多數(shù)組件，Vue2和Vue3中的代碼即使不完全相同，也是非常相似的。但是，Vue3支持片段，這意味著組件可以有多個(gè)根節(jié)點(diǎn)。
這在呈現(xiàn)列表中的組件以刪除不必要的包裝器div元素時(shí)特別有用。但是，在本例中，表單組件的兩個(gè)版本都將只保留一個(gè)根節(jié)點(diǎn)。
{{ title }}
- Submit
- Values: {{ username + ' ' +password }}
唯一真正的區(qū)別是如何訪問(wèn)數(shù)據(jù)。在Vue3中，響應(yīng)式數(shù)據(jù)都封裝在一個(gè)響應(yīng)狀態(tài)變量中，所以需要訪問(wèn)這個(gè)狀態(tài)變量來(lái)獲得值。
{{ state.title }}
- Submit
- Values: {{ state.username + ' ' +state.password }}
設(shè)置數(shù)據(jù)
這就是主要的區(qū)別——Vue2選項(xiàng)API對(duì)戰(zhàn)Vue3組合API。
選項(xiàng) API將代碼分成不同的屬性：數(shù)據(jù)、計(jì)算屬性、方法等等。同時(shí)，組合API允許根據(jù)函數(shù)而不是屬性類型對(duì)代碼進(jìn)行分組。
對(duì)于表單組件，只有兩個(gè)數(shù)據(jù)屬性：一個(gè)username和一個(gè)password。
Vue2代碼看起來(lái)是這樣的——只需在數(shù)據(jù)屬性中放入兩個(gè)值。
- exportdefault {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- }
- }
在Vue3.0中，必須投入更多精力來(lái)使用一個(gè)新的setup()方法，所有的組件初始化都應(yīng)該在這個(gè)方法中進(jìn)行。
另外，為了讓開(kāi)發(fā)人員更好地控制響應(yīng)，可以直接訪問(wèn)Vue的響應(yīng)API。
創(chuàng)建響應(yīng)式數(shù)據(jù)需要三個(gè)步驟：
- 從vue中導(dǎo)入reactive
- 使用響應(yīng)式方法聲明數(shù)據(jù)
- 使用setup方法返回響應(yīng)式數(shù)據(jù)以便模板可以訪問(wèn)
代碼看起來(lái)有點(diǎn)像這樣。
- import {reactive } from 'vue'
- export default {
- props: {
- title: String
- },
- setup () {
- const state = reactive({
- username: '',
- password: ''
- })
- return { state }
- }
- }
接著在模板中，可以使用諸如state.username和state.password來(lái)訪問(wèn)
在Vue2和Vue3中創(chuàng)建方法
Vue2選項(xiàng)API有一個(gè)單獨(dú)的方法部分。這部分可以定義所有的方法，并以任何想要的方式進(jìn)行組織。
- exportdefault {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- },
- methods: {
- login () {
- // login method
- }
- }
- }
Vue3組合API中的setup方法也可以處理。它的工作原理與聲明數(shù)據(jù)有些類似——必須先聲明方法，然后返回，以便組件的其他部分可以訪問(wèn)它。
- exportdefault {
- props: {
- title: String
- },
- setup () {
- const state = reactive({
- username: '',
- password: ''
- })
- const login = () => {
- // login method
- }
- return {
- login,
- state
- }
- }
- }
生命周期掛鉤
Vue2可以直接從組件選項(xiàng)中訪問(wèn)生命周期掛鉤。以下示例代碼將等待掛載的事件。
- exportdefault {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- },
- mounted () {
- console.log('component mounted')
- },
- methods: {
- login () {
- // login method
- }
- }
- }
現(xiàn)在有了Vue3 組合API，幾乎所有東西都在setup()方法中，包括掛載的生命周期掛鉤。
然而，生命周期掛鉤在默認(rèn)情況下并不包括在內(nèi)，因此必須導(dǎo)入在Vue3中被稱為onmount的方法。這看起來(lái)與前面導(dǎo)入reactive是一樣的。
然后，在setup方法中，通過(guò)傳遞函數(shù)來(lái)使用onmount方法。
- import {reactive, onMounted } from 'vue'
- export default {
- props: {
- title: String
- },
- setup () {
- // ..
- onMounted(() => {
- console.log('component mounted')
- })
- // ...
- }
- }
computed屬性
添加一個(gè)computed屬性，將用戶名轉(zhuǎn)換為小寫字母。
為了在Vue2中實(shí)現(xiàn)這一點(diǎn)，向選項(xiàng)對(duì)象添加一個(gè)computed字段。從這里，可以像這樣定義屬性…
- exportdefault {
- // ..
- computed: {
- lowerCaseUsername () {
- return this.username.toLowerCase()
- }
- }
- }
Vue3的設(shè)計(jì)允許開(kāi)發(fā)人員導(dǎo)入他們使用的東西，并且項(xiàng)目中沒(méi)有不必要的包。本質(zhì)上，他們不希望開(kāi)發(fā)人員包含從未使用過(guò)的東西，這而這在Vue2中已經(jīng)成為一個(gè)日益嚴(yán)重的問(wèn)題。
因此，要在Vue3中使用computed屬性，首先必須將computed導(dǎo)入到組件中。
然后，與之前創(chuàng)建響應(yīng)式數(shù)據(jù)的方式類似，將一段響應(yīng)式數(shù)據(jù)變成一個(gè)計(jì)算值，如下所示：
- import {reactive, onMounted, computed } from 'vue'
- export default {
- props: {
- title: String
- },
- setup () {
- const state = reactive({
- username: '',
- password: '',
- lowerCaseUsername: computed(()=> state.username.toLowerCase())
- })
- // ...
- }
訪問(wèn)Props
訪問(wèn)道具帶來(lái)了Vue2和Vue3之間的一個(gè)重要區(qū)別——this意味著完全不同的東西。
在Vue2中，this幾乎總是指向組件，而不是特定的屬性。雖然這使事情表面上很容易，但它使類型支持成為一種痛苦。
然而，可以很容易地訪問(wèn)props——只需添加一個(gè)小例子，比如在掛載掛鉤期間打印出title prop：
- mounted() {
- console.log('title: ' + this.title)
- }
但是在Vue3中不再使用它來(lái)訪問(wèn)props、觸發(fā)事件和獲取屬性。相反，setup()方法有兩個(gè)參數(shù)：
- props - 對(duì)組件props的不可變?cè)L問(wèn)
- context - Vue3公開(kāi)的上下文選擇屬性(emit、slot、attrs)
使用props參數(shù)，上面的代碼將如下所示。
- mounted() {
- console.log('title: ' + this.title)
- }
觸發(fā)事件
類似地，在Vue2中觸發(fā)事件非常簡(jiǎn)單，但是Vue3對(duì)如何訪問(wèn)屬性/方法提供了更多控制。
本例希望在按下“Submit”按鈕時(shí)觸發(fā)父組件的一個(gè)登錄事件。
Vue2代碼只需要調(diào)用this.$emit并傳入有效負(fù)載對(duì)象。
- login (){
- this.$emit('login', {
- username: this.username,
- password: this.password
- })
- }
然而在Vue3中，this現(xiàn)在含義不同了，得做出一點(diǎn)改變。
幸運(yùn)的是，文本對(duì)象公開(kāi)了emit，提供了與this.$emit相同的東西
所要做的就是添加context作為setup方法的第二個(gè)參數(shù)。將對(duì)c文本對(duì)象進(jìn)行析構(gòu)，使代碼更簡(jiǎn)潔。
然后，只需調(diào)用emit來(lái)觸發(fā)事件。與前面一樣，emit方法有兩個(gè)參數(shù)：
- 事件名稱
- 與事件一起傳遞的有效負(fù)載對(duì)象
- setup(props, { emit }) {
- // ...
- const login = () => {
- emit('login', {
- username: state.username,
- password: state.password
- })
- }
- // ...
- }
Vue2和Vue3的最后代碼
太棒了!已經(jīng)到了最后階段。
Vue2和Vue3中的所有概念都是相同的，但是訪問(wèn)屬性的一些方式發(fā)生了一點(diǎn)變化。
總的來(lái)說(shuō)，筆者認(rèn)為Vue3將幫助開(kāi)發(fā)人員編寫更有組織的代碼——特別是在大型代碼庫(kù)中。這主要是因?yàn)榻M合API允許根據(jù)特定的特性將代碼分組，甚至可以將功能提取到它們自己的文件中，并根據(jù)需要將它們導(dǎo)入到組件中。
下面是Vue2中的表單組件代碼。
{{ title }}
- Submit
- Values: {{ username + ' ' +password }}
下面是Vue3的。
{{ state.title }}
- Submit
- Values: {{ state.username + ' ' +state.password }}
希望本教程能夠幫助了解Vue代碼在Vue3中的一些不同之處。
本文標(biāo)題：詳細(xì)教程：在Vue2和Vue3中構(gòu)建相同的組件
當(dāng)前URL：http://www.dlmjj.cn/article/cdpgjje.html
