响应式数据和数据代理

目录

响应式数据

介绍

原理

vue2

vue3

数据代理

介绍

顺序

---

响应式数据

介绍

响应式数据指的是，在Vue.js框架中，当一个数据发生变化时，与之相关的组件会自动监听、检测这个变化，并在需要时更新这个变化所引发的组件视图，以保持数据和视图的同步性。

在Vue.js框架中，我们可以通过将数据对象注入到Vue实例中的data选项中，使得这些数据对象变成响应式的。也就是说，当数据对象中某个属性的值发生变化时，相关的组件会自动进行重渲染，以使得更新后的数据能被正确显示出来。

在实现上，Vue.js利用了ES5的Object.defineProperty()方法，拦截了数据对象属性的读取和设置，从而实现了数据的响应式。具体来说，当读取数据时，Vue.js会将这个数据添加到当前正在渲染的组件的依赖列表中；而对数据进行修改时，Vue.js会触发依赖列表中相关组件的重新渲染，以保证界面和数据的同步。

响应式数据是Vue.js框架的核心特性之一，也是Vue.js区别于其他框架的重要特点。它使得开发者能够更加关注数据层面的内容，而不是手动地进行DOM操作和数据视图的同步工作，提高了开发效率和代码可维护性。

原理

vue2和Vue3版本中，Vue响应式数据的原理有所不同

vue2

Vue2的响应式数据原理是使用了ES5的Object.defineProperty()方法，通过对数据访问属性的劫持来实现。在Vue实例中，当数据发生变化时，会触发setter，从而通知依赖收集器将变化通知给其相关的依赖，包括Watcher和DOM节点等，进行相应的更新。其中Watcher是Vue中重要的对象，它存储了当前data的依赖关系，当setter被触发时，依赖于这个data的组件会接收到Watcher的更新通知，进行组件上的数据更新。

Vue2中，利用一个叫做Dep的类来实现依赖收集和触发更新的功能。每个响应式数据属性都会对应一个Dep实例，用来收集该属性的全部依赖，如Watcher以及其对应的DOM节点等。当响应式数据属性发生变化时，会通知其对应的Dep实例，Dep实例再通知所有依赖进行更新。

vue3

Vue3响应式数据的原理基于JavaScript的Object.defineProperty()方法，该方法可以为对象的属性添加getter和setter功能。这意味着在获取一个变量值时，能够在底层自动执行一个方法；在赋值一个变量值时，也能在底层自动执行一个方法。

当Vue实例初始化时，Vue会对将data选项中的所有属性添加getter和setter方法，这些方法会与Vue内部的“依赖追踪器”结合使用来检测对数据的更改。当数据发生变化时，Vue会通知其订阅者进行DOM更新，以保证视图与模型同步。

const obj = { name: "john doe", age: 18 }

Object.defineProperty(obj, "name", {

  get() {

    console.log(`你获取了我的名字：${this._name}`)

    return this._name

  },

  set(newVal) {

    console.log(`你把我的名字改为了：${newVal}`)

    this._name = newVal

  }

})

数据代理

介绍

在Vue.js框架中，数据代理是一种技术，它可以让我们通过Vue实例对象来访问和操作组件内的data数据对象，而不需要直接访问这个data对象。这个数据代理的过程是通过Vue.js内部的Object.defineProperty()方法实现的。

在Vue.js中，数据代理的主要目的是为了方便开发者操作数据，使得开发者可以直接利用this关键字来访问和修改data对象，而不需要使用data.xx的方式进行操作。这样，我们在编写Vue组件时，就可以很方便地访问数据，使得代码更加清晰简洁，提高了代码的可读性和可维护性。

具体来说，在Vue.js中，数据代理的过程是这样的：在Vue实例对象的初始化过程中，Vue.js框架通过Object.defineProperty()方法对data对象进行处理，将data对象中的每个属性都添加到Vue实例对象上，并且设置可读写。这样一来，我们在组件内通过this关键字访问数据时，Vue.js框架会将访问转换成对data对象属性的访问。当我们修改这个属性的值时，Vue.js框架会将修改操作转换成对data属性值的修改，并且将这个修改操作通知到Vue.js的响应式模块中，从而触发相关的组件更新操作。

需要注意的是，虽然Vue.js框架会自动代理data属性到实例对象中，但如果我们在data对象中定义了一些深度嵌套的属性，那么Vue.js框架并不能将这些属性自动代理到实例对象中，这时我们需要通过手动的方式来代理这些属性。

顺序

在Vue的实例中，数据代理的顺序是先进行props代理，再进行methods代理，最后是进行data代理。具体来说，当Vue实例创建时，它会进行如下步骤：

1、对props选项进行代理：将props选项中定义的所有属性代理到Vue实例上，以便我们可以通过this访问到这些props属性。

2、对methods选项进行代理：将methods选项中定义的所有方法代理到Vue实例上，我们可以直接调用这些方法。

3、对data选项进行代理：将data选项中的所有属性代理到Vue实例上，以便我们可以通过this访问到这些数据属性。在代理完成后，Vue实例会将data选项中的所有属性都变成响应式的。

由于Vue是基于数据驱动的框架，在Vue实例中，我们通常需要通过props来接收来自父组件的数据、通过data来存储当前组件的数据，并将methods作为事件处理函数，对DOM事件进行相应的处理。因此，Vue实例的数据代理顺序也遵循了这个处理顺序，方便我们操作和管理Vue组件的数据和事件行为。同时，也需要注意，在Vue实例中，不要在props、data、methods等对象的属性中使用相同的命名，这样可能会导致命名冲突等问题。