Vue中数据的响应式体现在哪里？

Reactive properties are properties of thecomponent option object that let us synchronize what is displayed in thetemplate, and they change according to the operations we do with them. Anychanges that are applied to reactive properties are propagated throughout theapp wherever they are referenced.

响应式属性是组件选项对象的特性，可让我们同步模板中显示的内容，它们会根据我们对其进行的操作而改变。应用于反应属性的任何更改都会传播到整个应用程序中被引用的地方。

In the previous example, we added the countreactive property to our app. To update it, we just have to update the reactiveproperty’s value itself.

在前面的示例中，我们为应用程序添加了count响应式属性。要更新它，我们只需更新响应式属性本身的值。

Vue App 计数：{{count}} 增加

// vue 脚本 const Counter = { data() { return { count: 0, } } } // 创建Vue实例并挂载到容器 // Vue 是通过引入vue的脚步后获取到的 Vue.createApp(Counter).mount("#app")

Here, we have the @click=”count++”expression, which listens for clicks of the button, and we increase the countby 1 when we click the increment button. The latest value will be reflectedeverywhere since it is a reactive property. Vue can pick up the changes forreactive properties automatically. @click is shorthand for v-on:click.

在这里，我们使用 @click="count++" 表达式来监听按钮的点击，当我们点击增加按钮时，计数会增加 1。由于这是一个反应式属性，因此最新值将在所有地方得到反映。Vue 可以自动获取反应式属性的变化。@click 是 v-on:click 的缩写。

Also, we can rewrite the expression as amethod. To do that, we can write the following code:

此外，我们还可以将表达式改写为方法。为此，我们可以编写以下代码：

Vue App 计数：{{count}} 增加

// vue 脚本 const Counter = { data() { return { count: 0, } }, methods:{ increment(){ this.count++ } } } // 创建Vue实例并挂载到容器 // Vue 是通过引入vue的脚步后获取到的 Vue.createApp(Counter).mount("#app")

To reference the count reactive property inthe Vue instance object, we must reference it as a property of this. So,this.count in the Vue instance object is the same as count in the template. Thethis keyword refers to the component instance. We should remember this so thatwe don’t run into problems later.

要引用 Vue 实例对象中的count 响应式属性，我们必须将其作为 this 的一个属性来引用。因此，Vue 实例对象中的 this.count 与模板中的 count 相同。this 关键字指的是组件实例。我们应该记住这一点，以免以后遇到问题。

Also, we add the method’s properties to thecomponent object. This is a special property that is used to hold methods inour code that we can reference in other parts of the Vue instance or in ourtemplate. Like with reactive properties, methods are referenced as propertiesof this in the Vue instance object, and we omit this in the template.

此外，我们还将方法的属性添加到组件对象中。这是一个特殊属性，用于保存代码中的方法，我们可以在 Vue 实例的其他部分或模板中引用这些方法。与反应属性一样，方法在 Vue 实例对象中作为 this 的属性被引用，而我们在模板中省略了这一点。

So, when we click the button, we run theincrement method in the methods property. When we click the button, the countvalue will increase by 1, and we should see that displayed in our browser’soutput.

因此，当我们点击按钮时，就会运行 methods 属性中的 increment 方法。当我们点击按钮时，计数值将增加 1，我们应该能在浏览器的输出中看到这个结果。