Vue数据劫持实现原理是怎样的？能否深入浅出地解释一下？

本文共计2623个文字，预计阅读时间需要11分钟。

一、前言

双向绑定作为Vue核心功能之一，其实现原理主要分为两部分：数据持久和发布订阅模式。

本文主要介绍Vue实现数据绑定的思路，下一章节将介绍发布订阅模式的设计。

Vue实现数据绑定的思路主要包括：

1. 数据持久

2. 发布订阅模式

3. 本章节主要介绍Vue实现数据绑定的思路

Vue实现数据绑定的思路：

1. 数据持久

2. 发布订阅模式

一、前言

数据双向绑定作为 Vue 核心功能之一，其实现原理主要分为两部分：

1. 数据劫持
2. 发布订阅模式

本篇文章主要介绍 Vue 实现数据劫持的思路，下一篇则会介绍发布订阅模式的设计。

二、针对 Object 类型的劫持

对于 Object 类型，主要劫持其属性的读取与设置操作。在 JavaScript 中对象的属性主要由一个字符串类型的“名称”以及一个“属性描述符”组成，属性描述符包括以下选项：

1. value： 该属性的值；
2. writable： 仅当值为 true 时表示该属性可以被改变；
3. get： getter （读取器）；
4. set： setter （设置器）；
5. configurable： 仅当值为 true 时，该属性可以被删除以及属性描述符可以被改变；
6. enumerable： 仅当值为 true 时，该属性可以被枚举。