Vue 2和Vue 3中應該知道的屬性創建差異
我將向你展示如何使用Options API在Vue 2中創建屬性，然后向你展示如何使用Composition API在Vue 3中創建屬性。
然后，你將學習如何使用包裝對象ref和reactive創建屬性，何時使用它們以及為什么。
到本文結尾，你將能夠了解Vue 2 Options API與Vue 3 Composition API之間的屬性創建差異。
使用Vue2 Option API
Vue 2中引入的在Options API中聲明屬性的方法之一是將其添加到 data() 函數返回的JavaScript對象中。
如你所見，我已經創建了一個 name 屬性，并將其初始值設置為 null。
- export default {
- data() {
- return {
- name: null
- }
- }
- }
當我們使用Options API創建屬性時，默認情況下它將變為響應性(或者稱為反應性)的。
響應性?
- name屬性是響應性的，意味著可以將其綁定到模板中的HTML元素。
- 每當屬性值更改時，視圖都會更新，反之亦然，這也稱為雙向數據綁定。
我們在Options API中聲明的所有屬性都是響應性的，這在大多數情況下都是很好的。
在JavaScript Vue 2中訪問該屬性
要訪問此組件中的導出默認對象內的任何位置的 name 屬性，我們可以在選項API中使用this關鍵字。
假設我想在 mount() 函數內部訪問它，該函數是Options API中的生命周期方法之一。
- export default {
- ...
- mounted() {
- console.log(this.name);
- }
- }
讓我們看看如何在Vue模板中訪問 name 屬性。
訪問Vue 2模板中的屬性
每當我們使用Options API創建屬性時，它們不僅具有響應性，而且可立即用于Vue模板。
因此，我們可以簡單地使用雙花括號來訪問模板標簽之間的 name 屬性。
- <template>
- <div>
- {{name}}
- </div>
- </template>
在Vue 2中，模板標記中需要有一個父元素，所有其他元素都將進入其中。
你可能已經知道此過程，但讓我們看看如何使用新的Composition API來完成此過程。
Composition API (Vue 3)
Vue 3的一大優點是，我們可以像上面的示例一樣使用Options API來創建響應性屬性。
此外，我們現在可以使用Composition API來創建非常靈活的屬性，一會兒你就能明白為什么。
在Vue 3中有兩種創建反應特性的方法：
- ref
- reactive
ref()
在Vue 3中，我們需要導入任何我們想要在應用程序中使用的包。
通過這種方式，我們只包含我們在生產包中使用的包，這使應用程序更輕和更快。
- <script>
- import { ref } from "vue";
- export default {
- setup() {
- // 你所有的變量和函數都將放在此處
- }
- }
- </script>
有了Composition API，所有的屬性和函數都會進入 export default 的 setup() 方法里面。
- <script>
- import { ref } from "vue";
- export default {
- setup() {
- let name = ref("");
- }
- }
- </script>
在這里，我們可以使用 let 或 const 或 var(不推薦)關鍵字將屬性創建為變量。
在右側，name 變量的值是一個空字符串，其中包裹了ref對象。
那么什么是 ref() 對象?♂️
ref是一個包裝器對象，它具有一個內部值并返回一個反應性和可變的對象。
我們可以將其分配給括號內具有初始值的變量…在這種情況下，是一對雙引號。
那么為什么我們需要它呢?
當 name 變量的值發生變化時，它通過發出反應性事件來保持反應性，這樣觀察者可以自動更新。
它接受一個內部value，并返回一個反應式和可變的對象。
現在，name變量是一種ref對象，其內部包裹著一個value。
在JavaScript中訪問Ref()變量
要獲得與 name 變量關聯的值，我們只需要使用它的 .value 屬性對其進行拆包，然后將給出該值。
ref() 對象將有一個名為 .value 的單一屬性，指向內部值。
- <script>
- import { ref } from "vue";
- export default {
- setup() {
- let name = ref("Raja");
- name.value = Raja Tamil; // Set
- console.log(name.value) // Get
- }
- }
- </script>
是的，當你要為 name 變量設置值時，我們也需要使用 .value。
正如你所知道的，在Vue 2的Option API中，所有的屬性在模板中一經創建就變得可用。
但是在Vue 3與Composition API中，我們有一個選項可以顯式地將屬性和功能暴露給模板。
這意味著我們現在可以創建一個私有變量，該變量只能在 setup() 函數內部訪問。
現在，我們要做的就是將此變量作為屬性添加到 setup() 函數返回的JavaScript對象中。
- <script>
- import { ref } from "vue";
- export default {
- setup() {
- let name = ref("Raja");
- return {
- username: name
- }
- }
- }
- </script>
返回的對象具有一個屬性，即username，值是上面聲明的名稱“Raja”。
習慣了Vue2，這是我經常忘記將變量作為屬性添加到返回對象中的一件事。
在大多數情況下，出于可維護性的目的，你希望屬性的鍵和值相同。
- return {
- name:name
- }
為了簡化此過程，請使用對象屬性值的簡寫，如下：
- return {
- name
- }
訪問Vue 3模板中的屬性
在模板中，使用雙大括號來訪問 name 屬性，該屬性類似于Options API。
- <template>
- {{name}}
- </template>
那么父div怎么辦?
在Vue 3中，我們不再需要父div!
現在，我們可以在模板標簽內部擁有div元素。
Reactive()
在Composition API中創建變量的另一種方法是使用 reactive() 作為包裝對象。
你可能想知道：為什么在Vue 3中需要兩種創建變量的方式?
嗯，ref() 是針對單一的基元類型的變量，比如字符串、數字等，當值發生變化時，它會保持反應性。
一旦我們創建了一個具有字典結構的數據(如對象)的變量，引用就會失去其反應性。
為此，我們需要一個 reactivity() 包裝對象而不是 ref() 對象。
Reactive() 接受一個對象并返回原始對象的反應代理。
讓我們看看如何做到這一點。
從Vue導入reactive包。
- import { reactive } from "vue";
類似于ref，使用一個reactive包裝對象，并將一個Javascript對象作為初始值傳遞給一個變量。
- <script>
- import { reactive } from "vue";
- export default {
- setup() {
- let book = reactive({title: "The Best Vue 3 Book", price:19.99});
- }
- }
- </script>
從Reactive()變量獲取值
好消息是，與ref不同，我們不必使用 .value 來展開 book 變量的值。
- <script>
- import { reactive } from "vue";
- export default {
- setup() {
- let book = reactive({title: "The Best Vue 3 Book", price:19.99});
- console.log(book.title);
- console.log(book.price);
- }
- }
- </script>
我們可以像往常一樣直接訪問 book 對象的屬性。
訪問Vue 3模板中的屬性
與前面的例子類似，我們需要做的就是在 setup() 函數返回的JavaScript對象中添加這個變量作為屬性。
- <script>
- import { reactive } from "vue";
- export default {
- setup() {
- let book = reactive({title: "The Best Vue 3 Book", price:19.99});
- return {
- book
- }
- }
- }
- </script>
我們可以像往常一樣使用雙花括號在模板中訪問它。
- <template>
- {{book.title}}
- {{book.price}}
- </template>
為了檢查反應性，在2秒后使用 setTimeout() 函數改變兩個屬性的值。
- <script>
- import { reactive } from "vue";
- export default {
- setup() {
- let book = reactive({title: "Vue 3 Book", price:29.99});
- setTimeout(() => {
- book.title = "Vue 3 is awesome";
- book.price = 19.99;
- }, 2000)
- return {
- book
- }
- }
- }
- </script>
通過查看模板中2秒鐘后的值更改，你將能夠看到反應性。
那么數組呢?
數組是其中一種類型，我們可以通過使用 ref 或 reactive 包裝器對象來實現反應性。
在可能的情況下，我會使用 reactive 而不是 ref，以避免 .value 的語法。
無反應性變量
關于Vue 3的另一個好處是，我們現在可以創建一個變量，該變量可以是私有的，也可以在需要時不響應。
- <script>
- import { reactive } from "vue";
- export default {
- setup() {
- let book = {title: "Vue 3 Book", price:29.99};
- return {
- book
- }
- }
- }
- </script>
