Vue数组改变为什么会更新

创作时间:

作者:

@小白创作中心

Vue数组改变为什么会更新

引用

来源

https://worktile.com/kb/p/3544634

Vue数组改变会更新的原因有以下几点：1、响应式系统，2、依赖收集，3、数据劫持，4、虚拟DOM。

一、响应式系统

Vue.js 是一个渐进式的 JavaScript 框架，它的核心之一就是其响应式系统。Vue 的响应式系统使得数据变化可以自动更新到视图中。Vue 在初始化数据时会对其进行观察（observe），也就是说，Vue 会递归地遍历对象的所有属性，并使用 Object.defineProperty 或 Proxy 将这些属性转为 getter 和 setter，这样一旦数据发生变化，Vue 就能检测到并自动重新渲染视图。

二、依赖收集

Vue 在进行数据绑定时会进行依赖收集。每个组件实例都会有一个与之对应的渲染函数，当这个渲染函数执行时，Vue 会追踪它所访问的数据属性，并将其作为依赖记录下来。每当这些依赖的数据属性发生变化时，这个渲染函数就会重新执行，从而更新视图。

三、数据劫持

Vue 通过数据劫持（data hijacking）来实现响应式，这意味着 Vue 会在数据对象上定义 getter 和 setter 方法。通过这些方法，Vue 可以监听数据的变化。例如，当一个数组的长度或内容改变时，Vue 会触发相应的 setter 方法，从而知道数据已经改变，并进行必要的更新。

四、虚拟DOM

Vue 使用虚拟DOM（Virtual DOM）来提高性能。虚拟DOM是对真实DOM的一种抽象表示，当数据变化时，Vue 并不会立即操作真实DOM，而是先更新虚拟DOM，然后通过对比新旧虚拟DOM的差异（即 diff 算法），只把变化的部分更新到真实DOM中。这种方式避免了大量无谓的DOM操作，提高了性能。

原因分析

响应式系统：Vue的响应式系统使得数据变化可以自动更新到视图中。这是通过 Object.defineProperty 或者 Proxy 来实现的。

依赖收集：Vue在渲染函数执行的时候会进行依赖收集，跟踪数据属性，当这些属性发生变化时，Vue会重新渲染视图。

数据劫持：Vue通过数据劫持的方式来监听数据的变化，当数组的内容或长度变化时，Vue会触发相应的更新。

虚拟DOM：Vue利用虚拟DOM来优化性能，通过对比新旧虚拟DOM的差异，只更新变化的部分。

实例说明

以下是一个简单的例子，展示了Vue如何响应数组的变化：


<div id="app">  

  <ul>  
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>  
  </ul>  
  <button @click="addItem">Add Item</button>  
</div>  
<script>  
new Vue({  
  el: '#app',  
  data: {  
    items: [  
      { id: 1, name: 'Item 1' },  
      { id: 2, name: 'Item 2' }  
    ]  
  },  
  methods: {  
    addItem() {  
      this.items.push({ id: this.items.length + 1, name: `Item ${this.items.length + 1}` });  
    }  
  }  
});  
</script>

在这个例子中，每当点击按钮添加新项时，Vue会自动更新视图，因为它已经对
items
数组进行了观察，并且通过依赖收集知道需要重新渲染视图。