在Vue2與Vue3中構建相同的元件

2021-10-07 01:43:10 字數 3683 閱讀 4752

對於大多數元件，vue2和vue3中的**即使不完全相同，也是非常相似的。但是，vue3支援fragments，這意味著元件可以具有多個根節點。

在渲染列表中的元件以刪除不必要的包裝div元素時，這特別有用。但是，在這種情況下，我們將為兩個版本的form元件保留乙個根節點。

vue2

submit


values: }
唯一真正的區別是我們訪問資料的方式。在vue3中，我們的響應式資料都包裝在響應式狀態變數中——因此我們需要訪問該狀態變數以獲取我們的值。

vue3

submit


values: }
這是主要的區別——vue2 options api與vue3 composition api 。

options api將我們的**分為不同的屬性：資料，計算屬性，方法等。同時，composition api允許我們按功能而不是屬性型別對**進行分組。

假設對於表單元件，我們只有兩個資料屬性： username 和 password 。

vue2**看起來是這樣的——我們只需在 data 屬性中放入兩個值。

vue2

export default ,


data () 


}}
在vue 3.0中，我們必須投入更多的精力來使用乙個新的 setup() 方法，所有的元件初始化都應該在這個方法中進行。

另外，為了使開發人員能夠更好地控制響應式，我們可以直接訪問vue的響應式api。

建立響應式資料涉及三個步驟：

在**方面，它將看起來像這樣。

vue3

import  from 'vue'


export default ,


setup () )


return 


}}
然後，在模板中，我們像 state.username 和 state.password 一樣訪問它們

vue2 options api有乙個單獨的方法部分。在其中，我們可以定義所有方法並以所需的任何方式組織它們。

vue2

export default ,


data () 


},methods: 


}}
vue3 composition api 中的setup方法也可以處理方法。它的工作方式與宣告資料有些類似——我們必須先宣告我們的方法，然後返回它，以便元件的其他部分可以訪問它。

vue3

export default ,


setup () )


const login = () => 


return 


}}
在vue2中，我們可以直接從元件選項訪問 生命週期鉤子 函式。對於我們的示例，我們將等待 mounted 事件。

vue2

export default ,


data () 


},mounted () ,


methods: 


}}
現在有了vue3 composition api，幾乎所有內容都在 setup() 方法內部，這包括 mounted 的生命週期鉤子。

但是，預設情況下不包括生命週期掛鉤，因此我們必須匯入 onmounted 方法，作為vue3中呼叫的方法，這看起來與早期匯入 reactive 相同。

然後，在我們的 setup() 方法中，可以通過將 onmounted 方法傳遞給函式來使用它。

vue3

import  from 'vue'


export default ,


setup () )


// ...


}}
讓我們新增乙個計算屬性，將我們的使用者名稱轉換為小寫字母。為了在vue2中完成此操作，我們將乙個計算字段新增到我們的options物件中。

vue2

export default 


}}
vue3的設計 允許開發人員匯入他們使用的內容，而在專案中沒有使用的不需要匯入。本質上，他們不希望開發人員必須包含他們從未使用過的東西，這在vue2中已經成為乙個日益嚴重的問題。

因此，要在vue3中使用計算屬性，我們首先必須將 computed 匯入到元件中。

然後，類似於我們之前建立 reactive 資料的方式，我們可以使一條 reactive 資料成為這樣的計算值：

vue3

import  from 'vue'


export default ,


setup () )


// ...


}}
訪問props帶來了vue2和vue3之間的乙個重要區別——這意味著完全不同的東西。

在vue2中，這幾乎總是引用元件，而不是特定的屬性，雖然這使事情表面上很容易，但它使型別支援成為一種痛苦。

以往，我們都可以輕鬆訪問props——讓我們新增乙個簡單的示例，例如在mounted的鉤子上列印出標題prop：

vue2

mounted ()
但是在vue3中，我們不再使用它來訪問props、發出事件和獲取屬性。

相反， setup() 方法採用兩個引數：

props


context
使用props引數，上面的**將如下所示。

vue3

setup (props) )


// ...


}
類似地，在vue2中發出事件非常簡單，但是vue3為你提供了對如何訪問屬性/方法的更多控制。

例如，在我們的例子中，我們想在按下「submit」按鈕時向父元件發出登入事件。

vue2**只需要呼叫 this.$emit 並傳入我們的有效引數物件即可。

vue2

login () )


}
然而，在vue3中，我們現在知道這不再意味著同樣的事情，所以我們必須做得不同。

幸運的是，上下文物件(context)公開了 emit ，這使我們擁有與此相同的東西。

我們要做的就是將 context 新增為 setup() 方法的第二個引數，我們將解構上下文物件，以使我們的**更簡潔。

然後，我們只需要呼叫emit傳送事件即可。然後，像以前一樣，emit方法採用兩個引數：

vue3

setup (props, ) )


}  // ...


}
如你所見，vue2和vue3中的所有概念都是相同的，但是我們訪問屬性的某些方式已經有所變化。

總的來說，我認為vue3將幫助開發人員編寫更有組織的**——特別是在大型**庫中。這主要是因為composition api允許你按特定功能將**分組在一起，甚至可以將功能提取到自己的檔案中，然後根據需要將其匯入元件中。

vue2中用於表單元件的完整**：

submit


values: }
這是在vue3中的完整**：

submit


values: }

vue2與vue3的區別

vue2和vue3開發元件有什麼區別 vue2和vue3雙向資料繫結的區別 vue2的雙向資料繫結是利用es5 的乙個 apiobject.definepropert 對資料進行劫持 結合 發布訂閱模式的方式來實現的。vue3中使用了 es6 的proxyapi 對資料 相比於vue2.x，使用pr...

Vue2與Vue3的區別

vue2和vue3開發元件有什麼區別 vue2和vue3雙向資料繫結的區別 vue2的雙向資料繫結是利用es5 的乙個 apiobject.definepropert 對資料進行劫持 結合 發布訂閱模式的方式來實現的。vue3中使用了 es6 的proxyapi 對資料 相比於vue2.x，使用pr...

vue3與vue2的區別

vue2中v for與ref一起使用，批量模板引用的時候，獲取的ref為乙個陣列 這裡是陣列 mounted vue3 vue3 中ref繫結的是乙個函式，這裡繫結的是函式 setup onmounted 二者獲取ref的dom方式有變化，但是獲取的結果相同 在路由中，常常使用懶載入的方式來引入元件...