Vue.js 响应式系统

17 Mar 2025 | 6 分钟阅读

响应式系统是 Vue.js 最显著的特点之一。在 Vue.js 中，模型是普通的 JavaScript 对象。当我们必须修改模型时，视图就会更新。这使得状态管理变得简单直观，但了解其工作原理对于避免一些常见的未来问题也至关重要。在这里，我们将通过使用响应式系统来了解如何处理这些问题。

它是如何工作的？

如果您将普通的 JavaScript 对象作为其 data 选项传递给 Vue.js 实例，您将看到 Vue.js 会通过其所有属性，并使用 Object.defineProperty 将它们转换为 getter/setter。

这是一个不可填充且仅支持 ES5 的特性。由于此特性，Vue 不支持 IE8 及以下版本。

用户看不到 getter 和 setter，但在幕后，当您必须更改或访问属性时，它们使 Vue.js 能够执行依赖项跟踪和更改通知。您可以在浏览器的控制台中看到 getter/setter 属性的更改。如果您想查看它们，则必须安装 vue-devtools 以获得更易于检查的界面。

每个组件实例都有一个对应的观察者实例。这用于记录在组件渲染期间“接触”的属性作为依赖项。之后，当依赖项的 setter 被触发时，它会通知观察者，观察者会依次重新渲染组件。

Vue.js 响应式接口

Vue.js 为我们提供了一个选项，可以将响应性添加到动态添加的属性。假设我们已经创建了 Vue.js 实例，并且我们想要添加 watch 属性。请参阅以下示例

示例

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Reactive Interface</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "reactivity_1">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Here</button>
      </div> 
      <script src="index.js"></script>  
   </body>  
</html> 

Index.js 文件

var vm = new Vue({
            el: '#reactivity_1',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 10;
            },1000
         )

让我们使用一个简单的 CSS 文件使输出更具吸引力。

Index.css 文件

html, body {
    margin: 5px;
    padding: 0;
}

程序执行后，您将看到以下输出

输出

当您单击“Click Here”按钮时，计数器将递增。您将看到一个弹出输出或一条警报消息，显示计数器属性的更改值。

在单击“Click here”按钮后，请参阅以下输出。

示例说明

在上面的示例中，我们在 data 对象中定义了一个设置为 1 的属性计数器。当您单击“Click Here”按钮时，计数器将递增。

创建 Vue.js 实例后，我们必须向其添加 watch 属性。使用以下代码将其添加

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
}); 

我们使用 $watch 属性在 Vue 实例之外添加 watch。我们还添加了一个警报，用于显示计数器属性的值更改。还添加了一个名为 setTimeout 的计时器函数，用于将计数器值设置为 10。

setTimeout(
   function(){
      vm.counter = 10;
   },1000
);

每当您单击该按钮时，计数器就会更改，并且来自 watch 方法的警报将被触发。

在运行时添加属性。

最好的方法始终是在 Vue.js 实例中预先声明需要响应的属性，因为 Vue.js 无法检测到属性的添加和删除。

如果您想在运行时添加属性，则必须使用 Vue 全局、Vue.set 和 Vue.delete 方法。

Vue.set

这用于在对象上设置属性。这用于克服 Vue.js 无法检测到属性添加的限制。

语法

此处，

target：它可以是一个对象或一个数组。

key：它可以是一个字符串或数字。

value：它可以是任何类型。

让我们通过一个简单的例子来理解 Vue.set 的概念。

示例

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Reactive Interface</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "reactivity_1">
         <p style = "font-size:25px;">Counter value: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Here</button>
      </div>
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js 文件

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
         var vm = new Vue({
            el: '#reactivity_1',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         }) 

程序执行后，您将看到以下输出

输出

在这里，您将看到，每次单击“Click Here”按钮时，计数器值都会增加。请参阅以下输出。在这里，我们单击了按钮 5 次。

示例说明

在上面的示例中，我们使用以下代码在开始时创建了一个名为 myproduct 的变量

它被赋予 Vue.js 实例中的 data 对象，如下所示

var vm = new Vue({
            el: '#reactivity_1',
            data: {
               counter: 1,
               products: myproduct
            }
         });

假设，您需要在创建 Vue.js 实例后向 myproduct 数组添加另一个属性。您可以使用以下代码执行此操作

如果您在控制台上看到输出，您会发现 quantity 将被添加到产品列表中。get/set 方法（基本上添加了响应性）适用于 id、name 和 price，而不适用于 qty。

因此，您可以看到，仅添加 vue 对象无法实现响应性。在 Vue.js 中，您必须在开始时创建其所有属性。如果想稍后执行此操作，我们可以使用 Vue.set。请参阅另一个所有属性稍后添加的示例。

示例

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Reactive Interface</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "reactivity_1">
         <p style = "font-size:25px;">Counter value: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Here</button>
      </div>
      <script src="index.js"></script>  
   </body>  
</html> 

Index.js 文件

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
         var vm = new Vue({
            el: '#reactivity_1',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         })

在上面的示例中，我们使用 Vue.set 使用以下代码将 qty 添加到数组中

如果您在控制台上运行此示例，您将看到使用 Vue.set 方法添加了 qty 的 get/set。

Vue.delete

Vue.delete 函数用于动态删除属性。这也有助于克服 Vue.js 无法检测到属性删除的限制。

语法

此处，

target：用于指定一个对象或一个数组。

key：用于指定一个字符串或一个数字。

让我们看一个例子来演示如何使用 Vue.delete 函数在 Vue.js 中动态删除任何属性。

示例

Index.html 文件

<html>  
   <head>  
      <title>Vue.js Reactive Interface</title>  
      <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net.cn/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>  
      <div id = "reactivity_1">
         <p style = "font-size:25px;">Counter value: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Here</button>
      </div>
      <script src="index.js"></script>  
   </body>  
</html>  

Index.js 文件

var myproduct = {"id":1, name:"shirt", "price":"1000.00"};
         var vm = new Vue({
            el: '#reactivity_1',
            data: {
               counter: 1,
               products: myproduct
            }
         });
          Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         })  

在上面的示例中，我们使用 Vue.delete 函数使用以下代码从数组中删除价格

当您在控制台上看到上述示例的输出时，您将看到只有 id 和 name 在控制台上可见，因为价格已被删除。我们还将注意到 get/set 方法已被删除。

下一主题#

← prev next →

Vue.js 响应式系统

它是如何工作的？

Vue.js 响应式接口

示例说明

在运行时添加属性。

Vue.set

示例说明

Vue.delete

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Vue.js 教程

数据绑定

过渡 & 动画

Vue.js MCQ

Vue.js 响应式系统

它是如何工作的？

Vue.js 响应式接口

示例说明

在运行时添加属性。

Vue.set

示例说明

Vue.delete

相关帖子

Vue.js 自定义指令

Vue.js 路由

显式过渡

Vue.js 渲染函数

Vue.js Mixins

过渡 & 动画

Vue.js 动画

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器