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> 

很赞哦!（51）