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