Vue2和Vue3中应该知道的属性创建差异

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

在Vue 2中，模板标记中需要有一个父元素，所有其他元素都将进入其中。

你可能已经知道此过程，但让我们看看如何使用新的Composition API来完成此过程。

Composition API (Vue 3)

Vue 3的一大优点是，我们可以像上面的示例一样使用Options API来创建响应性属性。

此外，我们现在可以使用Composition API来创建非常灵活的属性，一会儿你就能明白为什么。

在Vue 3中有两种创建反应特性的方法：

• ref
• reactive

ref()

在Vue 3中，我们需要导入任何我们想要在应用程序中使用的包。

通过这种方式，我们只包含我们在生产包中使用的包，这使应用程序更轻和更快。

有了Composition API，所有的属性和函数都会进入 export default 的 setup() 方法里面。

在这里，我们可以使用 let 或 const 或 var(不推荐)关键字将属性创建为变量。

在右侧，name 变量的值是一个空字符串，其中包裹了ref对象。

那么什么是 ref() 对象?‍️

ref是一个包装器对象，它具有一个内部值并返回一个反应性和可变的对象。

我们可以将其分配给括号内具有初始值的变量…在这种情况下，是一对双引号。

那么为什么我们需要它呢?

当 name 变量的值发生变化时，它通过发出反应性事件来保持反应性，这样观察者可以自动更新。

它接受一个内部value，并返回一个反应式和可变的对象。

现在，name变量是一种ref对象，其内部包裹着一个value。

在JavaScript中访问Ref()变量

要获得与 name 变量关联的值，我们只需要使用它的 .value 属性对其进行拆包，然后将给出该值。

ref() 对象将有一个名为 .value 的单一属性，指向内部值。

是的，当你要为 name 变量设置值时，我们也需要使用 .value。

正如你所知道的，在Vue 2的Option API中，所有的属性在模板中一经创建就变得可用。

但是在Vue 3与Composition API中，我们有一个选项可以显式地将属性和功能暴露给模板。

这意味着我们现在可以创建一个私有变量，该变量只能在 setup() 函数内部访问。

现在，我们要做的就是将此变量作为属性添加到 setup() 函数返回的JavaScript对象中。

返回的对象具有一个属性，即username，值是上面声明的名称“Raja”。

习惯了Vue2，这是我经常忘记将变量作为属性添加到返回对象中的一件事。

在大多数情况下，出于可维护性的目的，你希望属性的键和值相同。

 
 
 
 

  
  
  
  
return {
  
  
  
  
  name:name
  
  
  
  
}
 
 
 
 

为了简化此过程，请使用对象属性值的简写，如下：

 
 
 
 

  
  
  
  
return {
  
  
  
  
  name
  
  
  
  
}
 
 
 
 

访问Vue 3模板中的属性

在模板中，使用双大括号来访问 name 属性，该属性类似于Options API。

那么父div怎么办?

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

现在，我们可以在模板标签内部拥有div元素。

Reactive()

在Composition API中创建变量的另一种方法是使用 reactive() 作为包装对象。

你可能想知道：为什么在Vue 3中需要两种创建变量的方式?

嗯，ref() 是针对单一的基元类型的变量，比如字符串、数字等，当值发生变化时，它会保持反应性。

一旦我们创建了一个具有字典结构的数据(如对象)的变量，引用就会失去其反应性。

为此，我们需要一个 reactivity() 包装对象而不是 ref() 对象。

Reactive() 接受一个对象并返回原始对象的反应代理。

让我们看看如何做到这一点。

从Vue导入reactive包。

 
 
 
 

  
  
  
  
import { reactive } from "vue";
 
 
 
 

类似于ref，使用一个reactive包装对象，并将一个Javascript对象作为初始值传递给一个变量。

从Reactive()变量获取值

好消息是，与ref不同，我们不必使用 .value 来展开 book 变量的值。

我们可以像往常一样直接访问 book 对象的属性。

访问Vue 3模板中的属性

与前面的例子类似，我们需要做的就是在 setup() 函数返回的JavaScript对象中添加这个变量作为属性。

我们可以像往常一样使用双花括号在模板中访问它。

为了检查反应性，在2秒后使用 setTimeout() 函数改变两个属性的值。

通过查看模板中2秒钟后的值更改，你将能够看到反应性。

那么数组呢?

数组是其中一种类型，我们可以通过使用 ref 或 reactive 包装器对象来实现反应性。

在可能的情况下，我会使用 reactive 而不是 ref，以避免 .value 的语法。

无反应性变量

关于Vue 3的另一个好处是，我们现在可以创建一个变量，该变量可以是私有的，也可以在需要时不响应。

文章标题：Vue2和Vue3中应该知道的属性创建差异
分享路径：http://www.shufengxianlan.com/qtweb/news2/322902.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联