我将向你展示如何使用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>
