我將向你展示如何使用Options API在Vue 2中創(chuàng)建屬性，然后向你展示如何使用Composition API在Vue 3中創(chuàng)建屬性。

然后，你將學習如何使用包裝對象ref和reactive創(chuàng)建屬性，何時使用它們以及為什么。

到本文結尾，你將能夠了解Vue 2 Options API與Vue 3 Composition API之間的屬性創(chuàng)建差異。

使用Vue2 Option API

Vue 2中引入的在Options API中聲明屬性的方法之一是將其添加到 data() 函數(shù)返回的JavaScript對象中。

如你所見，我已經創(chuàng)建了一個 name 屬性，并將其初始值設置為 null。

export default { 
  data() { 
    return { 
      name: null 
    } 
  } 
} 

當我們使用Options API創(chuàng)建屬性時，默認情況下它將變?yōu)轫憫?或者稱為反應性)的。

響應性?

• name屬性是響應性的，意味著可以將其綁定到模板中的HTML元素。
• 每當屬性值更改時，視圖都會更新，反之亦然，這也稱為雙向數(shù)據(jù)綁定。

我們在Options API中聲明的所有屬性都是響應性的，這在大多數(shù)情況下都是很好的。

在JavaScript Vue 2中訪問該屬性

要訪問此組件中的導出默認對象內的任何位置的 name 屬性，我們可以在選項API中使用this關鍵字。

假設我想在 mount() 函數(shù)內部訪問它，該函數(shù)是Options API中的生命周期方法之一。

export default { 
  ... 
  mounted() { 
    console.log(this.name); 
  } 
} 

讓我們看看如何在Vue模板中訪問 name 屬性。

訪問Vue 2模板中的屬性

每當我們使用Options API創(chuàng)建屬性時，它們不僅具有響應性，而且可立即用于Vue模板。

因此，我們可以簡單地使用雙花括號來訪問模板標簽之間的 name 屬性。

<template> 
  <div> 
    {{name}} 
  </div> 
</template> 

在Vue 2中，模板標記中需要有一個父元素，所有其他元素都將進入其中。

你可能已經知道此過程，但讓我們看看如何使用新的Composition API來完成此過程。

Composition API (Vue 3)

Vue 3的一大優(yōu)點是，我們可以像上面的示例一樣使用Options API來創(chuàng)建響應性屬性。

此外，我們現(xiàn)在可以使用Composition API來創(chuàng)建非常靈活的屬性，一會兒你就能明白為什么。

在Vue 3中有兩種創(chuàng)建反應特性的方法：

• ref
• reactive

ref()

在Vue 3中，我們需要導入任何我們想要在應用程序中使用的包。

通過這種方式，我們只包含我們在生產包中使用的包，這使應用程序更輕和更快。

<script> 
  import { ref } from "vue"; 
  export default { 
    setup() { 
      // 你所有的變量和函數(shù)都將放在此處 
    } 
  }  
</script> 

 

有了Composition API，所有的屬性和函數(shù)都會進入 export default 的 setup() 方法里面。

<script> 
  import { ref } from "vue"; 
  export default { 
    setup() { 
      let name = ref(""); 
    } 
  }  
</script> 

 

在這里，我們可以使用 let 或 const 或 var(不推薦)關鍵字將屬性創(chuàng)建為變量。

在右側，name 變量的值是一個空字符串，其中包裹了ref對象。

那么什么是 ref() 對象?‍♂️

ref是一個包裝器對象，它具有一個內部值并返回一個反應性和可變的對象。

我們可以將其分配給括號內具有初始值的變量…在這種情況下，是一對雙引號。

那么為什么我們需要它呢?

當 name 變量的值發(fā)生變化時，它通過發(fā)出反應性事件來保持反應性，這樣觀察者可以自動更新。

它接受一個內部value，并返回一個反應式和可變的對象。

現(xiàn)在，name變量是一種ref對象，其內部包裹著一個value。

在JavaScript中訪問Ref()變量

要獲得與 name 變量關聯(lián)的值，我們只需要使用它的 .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中，所有的屬性在模板中一經創(chuàng)建就變得可用。

但是在Vue 3與Composition API中，我們有一個選項可以顯式地將屬性和功能暴露給模板。

這意味著我們現(xiàn)在可以創(chuàng)建一個私有變量，該變量只能在 setup() 函數(shù)內部訪問。

現(xiàn)在，我們要做的就是將此變量作為屬性添加到 setup() 函數(shù)返回的JavaScript對象中。

<script> 
  import { ref } from "vue"; 
  export default { 
    setup() { 
      let name = ref("Raja"); 
      return { 
        username: name 
      } 
    } 
 }  
</script> 

 

返回的對象具有一個屬性，即username，值是上面聲明的名稱“Raja”。

習慣了Vue2，這是我經常忘記將變量作為屬性添加到返回對象中的一件事。

在大多數(shù)情況下，出于可維護性的目的，你希望屬性的鍵和值相同。

return { 
  name:name 
} 

為了簡化此過程，請使用對象屬性值的簡寫，如下：

return { 
  name 
} 

訪問Vue 3模板中的屬性

在模板中，使用雙大括號來訪問 name 屬性，該屬性類似于Options API。

<template> 
 {{name}} 
</template> 

那么父div怎么辦?

在Vue 3中，我們不再需要父div!

現(xiàn)在，我們可以在模板標簽內部擁有div元素。

Reactive()

在Composition API中創(chuàng)建變量的另一種方法是使用 reactive() 作為包裝對象。

你可能想知道：為什么在Vue 3中需要兩種創(chuàng)建變量的方式?

嗯，ref() 是針對單一的基元類型的變量，比如字符串、數(shù)字等，當值發(fā)生變化時，它會保持反應性。

一旦我們創(chuàng)建了一個具有字典結構的數(shù)據(jù)(如對象)的變量，引用就會失去其反應性。

為此，我們需要一個 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() 函數(shù)返回的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() 函數(shù)改變兩個屬性的值。

<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秒鐘后的值更改，你將能夠看到反應性。

那么數(shù)組呢?

數(shù)組是其中一種類型，我們可以通過使用 ref 或 reactive 包裝器對象來實現(xiàn)反應性。

在可能的情況下，我會使用 reactive 而不是 ref，以避免 .value 的語法。

無反應性變量

關于Vue 3的另一個好處是，我們現(xiàn)在可以創(chuàng)建一個變量，該變量可以是私有的，也可以在需要時不響應。

<script> 
  import { reactive } from "vue"; 
  export default { 
    setup() { 
      let book = {title: "Vue 3 Book", price:29.99}; 
      return { 
        book 
      } 
    } 
 }  
</script>