一、 Object.defineProperty

在学习vue响应式原理之前，必须搞懂 Object.defineProperty。

Object.defineProperty(obj, prop, descriptor)

看到一篇写的十分不错的博客：理解Object.defineProperty方法。

二、vue响应式更新

2.1响应式

所谓响应式，简单说就是用户更改数据(Data)时，视图可以自动刷新，页面UI能够响应数据变化。

Vue 最独特的特性之一，是其非侵入性的响应式系统。—— 尤雨溪

看一个没有响应式的例子：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"></div><button onclick="flushMsg()">更新msg</button><script>let app = document.getElementById('app');let msg = "123";app.innerHTML = `<p>msg: ${ msg }</p>`;function flushMsg(){console.log('点击了按钮，msg更新为12345');msg = "12345";}</script>
</body></html>

效果：

可以看到，我通过按钮点击事件改变了msg的值，但是页面是不会自动改变的，即没有实现响应式。那么怎么实现呢，很简单，将点击事件改为：

 function flushMsg(){console.log('点击了按钮，msg更新为12345');msg = "12345";app.innerHTML = `<p>msg: ${ msg }</p>`}

即我们改变了数据后，需要重新操作dom元素，更新数据，还是很简单的。可是当我们的项目变得复杂的时候，一个页面的数据会变得非常多，那么我们要给每一个变量都进行相应的处理，即数据改变，则调用dom改变视图。还好，vue帮我们完成了这步操作，我们只需要在data中声明数据（m），在视图中展示数据（v），其他的交给vue吧（vm）。所以我们也称vue为mvvm框架。

2.2 vue响应式

首先直接列出几个核心：

数据劫持 / 数据代理 侦测数据的变化
依赖收集 收集视图依赖了哪些数据
发布订阅模式 数据变化时，自动“通知”需要更新的视图部分，并进行更新

2.2.1 数据劫持

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function render() {console.log('模拟视图渲染, 页面应该改变')}let data = {name: 'yancy',language: ['c', 'java', 'javascript']}observe(data)function observe(obj) {if (!obj || typeof obj !== 'object') {return}Object.keys(obj).forEach(key => {defineReactive(obj, key, obj[key])})function defineReactive(obj, key, value) {// 递归子属性observe(value)Object.defineProperty(obj, key, {enumerable: true, //可枚举（可以遍历）configurable: true, //可配置（比如可以删除）get: function() {console.log('触发get：', value) // 监听return value},set: function(newVal) {observe(newVal) //如果赋值是一个对象，也要递归子属性if (newVal !== value) { //数据变化console.log('触发set：', newVal) // 监听value = newValrender(); //数据改变 重新渲染视图}}})}}</script>
</body></html>

我们将储存着数据的对象data的所有属性使用Object.defineProperty进行监听，获取属性的值，触发get函数。更改属性的值，触发set函数，就实现了数据劫持，所以我们页面的数据都要在vue实例中的data属性中声明，因为vue只会劫持data对象中的数据。

2.2.2 依赖收集

上面我们已经能够劫持观察到数据的变化了，那么下一步便是将数据的变化渲染到页面上，2.2.1我们使用render()函数一笔带过了。
想要把数据的改变渲染到页面上，我们应该要知道页面中什么地方使用到了数据，然后重新渲染。
我们只有通过收集依赖才能知道哪些地方依赖我的数据，以及数据更新时派发更新。那依赖收集是如何实现的？其中的核心思想就是“事件发布订阅模式”。

2.2.3 发布订阅

当数据变化触发依赖，dep（发布者）通知所有的Watcher（观察者）实例更新视图。

至于vue数据更新后的具体渲染过程，那么就涉及了虚拟DOM和diff算法，得再写一篇博客学习一下。

三、双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div class="app"><input type="text" name="" id="input"><p id="p"></p></div><script>let input = document.getElementById('input');let p = document.getElementById('p');var obj = {}Object.defineProperty(obj,'msg',{set: function(newVal){input.value = newVal;p.innerHTML = newVal;}})input.addEventListener('keyup',function(e){obj.msg = e.target.value;})</script>
</body>
</html>

可以看到，关键是代码：

 Object.defineProperty(obj,'msg',{set: function(newVal){input.value = newVal;p.innerHTML = newVal;}})

作用设置obj上的msg属性被写入时触发的set函数。

Vue学习 — Vue响应式原理相关推荐

Vue数据绑定和响应式原理
Vue数据绑定和响应式原理当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...
Vue.js 深入响应式原理
深入响应式原理现在是时候深入一下了!Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是普通的 JavaScript 对象.而当你修改它们时,视图会进行更新.这使得状态管理非常简单直接 ...
Vue 2.x 响应式原理与双向绑定
Vue实例 Vue会把data中的数据成员注入到Vue的实例中去,并转成getter/setter访问器属性. 这样的目的是: 1.我们能够通过 this.xxx(this.属性名)的方式进行调用. ...
一篇文章带你吃透VUE响应式原理
本篇响应式原理介绍比较长,全文大概1w+字.虽然内容繁杂,但阅读过后,绝对会让你对vue的响应式有更加深刻的理解. 分块阅读,效果更佳.(建议读者有一定vue使用经验和基础再食用) 首先上图,下面这张 ...
Vue.js响应式原理
Vue.js响应式原理框架浏览数:659 2017-9-20 关于Vue.js Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图.Vue.js的响应式原理依赖于 ...
初始Vue响应式原理～～
自从 Vue 发布以来,就受到了广大开发人员的青睐,提到 Vue,我们首先想到的就是 Vue 的响应式系统,那响应式系统到底是怎么回事呢?接下来我就给大家简单介绍一下 Vue 中的响应式原理. vue ...
Vue源码解读一：Vue数据响应式原理
这方面的文章很多,但是我感觉很多写的比较抽象,本文会通过举例更详细的解释.(此文面向的Vue新手们,如果你是个大牛,看到这篇文章就可以点个赞,关掉页面了.)通过阅读这篇文章,你将了解到: 1.Vue数 ...
深入了解Vue 2响应式原理，并手写一个简单的Vue
1. Vue 2的响应式原理 Vue.js 一个核心思想是数据驱动.所谓数据驱动是指视图是由数据驱动生成的,对视图的修改,不会直接操作 DOM,而是通过修改数据.vue.js里面只需要改变数据,Vue ...
详细介绍Vue的数据响应式
Vue.js的核心包括一套"响应式系统"."响应式",是指当数据改变后,Vue会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新 ...
Vue2.0 —— 由设计模式切入，实现响应式原理
Vue2.0 -- 由设计模式切入,实现响应式原理 <工欲善其事,必先利其器> 既然点进来了,麻烦你看下去,希望你有不一样的收获. 大家好,我是vk,好久不见,今天我们一起来盘一盘关于 V ...

Vue学习 — Vue响应式原理