您应该知道的Vue2和Vue3之间的属性创建差异

我将向您展示如何使用OptionsAPI在Vue2中创建属性，然后向您展示如何使用CompositionAPI在Vue3中创建属性。然后，您将了解如何使用包装器对象ref和reactive来创建属性、何时使用它们以及为什么使用它们。到本文结束时，您将能够了解Vue2OptionsAPI和Vue3CompositionAPI在属性创建方面的差异。使用Vue2OptionAPI在Vue2引入的OptionsAPI中声明属性的方法之一是将它们添加到data()函数返回的JavaScript对象中。如您所见，我创建了一个name属性并将其初始值设置为null。exportdefault{data(){return{name:null}}}当我们使用OptionsAPI创建一个属性时，它默认变为反应式（或称为反应式）。反应灵敏？name属性是响应式的，这意味着它可以绑定到模板中的HTML元素。每当属性值改变时，视图就会更新，反之亦然，这也称为双向数据绑定。我们在OptionsAPI中声明的所有属性都是响应式的，这在大多数情况下都很好。在JavaScriptVue2中访问属性要访问此组件中导出的默认对象内任何位置的名称属性，我们可以在选项API中使用this关键字。假设我想在mount()函数中访问它，这是OptionsAPI中的生命周期方法之一。exportdefault{...mounted(){console.log(this.name);}}让我们看看如何访问Vue模板中的name属性。在Vue2模板中访问属性每当我们使用OptionsAPI创建属性时，它们不仅响应迅速，而且在Vue模板中立即可用。因此，我们可以简单地使用双花括号来访问模板标签之间的名称属性。在Vue2中，模板标签中需要有一个父元素，所有其他元素都将进入该元素。您可能已经知道这个过程，但让我们看看如何使用新的CompositionAPI来完成它。CompositionAPI(Vue3)Vue3的一大优点是我们可以像上面的示例一样使用OptionsAPI来创建响应式属性。此外，我们现在可以使用CompositionAPI来创建非常灵活的属性，稍后您就会明白为什么。在Vue3中有两种创建响应式特征的方法：refreactiveref()在Vue3中，我们需要导入任何我们想在应用程序中使用的包。这样我们只包含我们在生产中使用的包，这使得应用程序更轻更快。使用CompositionAPI，所有的属性和函数都会放在setup()里面导出默认值的方法。这里我们可以使用let或者const或者var（不推荐）关键字来创建属性作为变量。在右侧，name变量的值是一个空字符串，它包装了ref对象。那么什么是ref()对象？?♂?ref是一个包装对象，它采用内部值并返回一个反应性和可变对象。我们可以将其分配给一个在括号内具有初始值的变量……在这种情况下，是一对双引号。那么我们为什么需要它呢？它通过在name变量的值发生变化时发出反应事件来保持反应，以便观察者可以自动更新。它接受一个内部值并返回一个反应性和可变对象。现在，name变量是一种将值包装在其中的ref对象。在JavaScript中访问Ref()变量要获取与name变量关联的值，我们只需要使用其.value属性将其解包，然后该属性将给出该值。ref()对象将有一个名为.value的属性指向内部值。是的，当你想为name变量设置值时，我们还需要使用.value。如您所知，在Vue2的OptionAPI中，所有属性在模板中创建后立即可用。但是在带有CompositionAPI的Vue3中，我们可以选择将属性和函数显式公开给模板。这意味着我们现在可以创建一个只能在setup()函数内部访问的私有变量。现在，我们所要做的就是将此变量作为属性添加到setup()函数返回的JavaScript对象中。返回的对象有一个属性，用户名，值为上面声明的名字“Raja”。习惯了Vue2，这是我经常忘记将变量作为属性添加到返回对象的一件事。在大多数情况下，出于可维护性的目的，您希望属性的键和值相同。return{name:name}为了简化这个过程，使用对象属性值的简写，如下：return{name}在Vue3模板中访问属性在模板中，使用双花括号访问name属性，类似于OptionsAPIs.那么父div呢？在Vue3中，我们不再需要父div！现在，我们可以在模板标签中包含div元素。Reactive()在CompositionAPI中创建变量的另一种方法是使用reactive()作为包装对象。你可能想知道：为什么在Vue3中有两种创建变量的方法？好吧，ref()适用于单一原始类型的变量，如字符串、数字等，并在值改变性别时保持反应。一旦我们使用对象等字典结构数据创建变量，引用就会失去其反应性。为此，我们需要一个reactivity()包装器对象而不是ref()对象。Reactive()接受一个对象并返回原始对象的反应代理。让我们看看如何做到这一点。从Vue导入反应包。从“vue”导入{反应}；类似于ref，使用响应式包装器对象，并将Javascript对象作为初始值传递给变量。从Reactive()变量获取价值好消息是的，与ref不同，我们不必使用.value来扩展book变量的值。我们可以像往常一样直接访问图书对象的属性。在Vue3模板中访问属性与前面的示例类似，我们需要做的就是将此变量作为属性添加到setup()函数返回的JavaScript对象中。我们可以照常做使用双花??括号在模板中访问它。要检查反应性，请使用setTimeout()函数在2秒后更改两个属性的值。2秒后，您将能够通过查看模板中的值变化来了解反应性。数组呢？数组就是其中一种类型，我们可以通过使用ref或反应式包装器对象来实现反应性。在可能的情况下，我使用reactiveoverref来避免.value语法。非响应式变量Vue3的另一个优点是我们现在可以创建一个变量，如果需要，它可以是私有的和非响应式的。