深入Vue响应式原理
深入Vue.js响应式原理
一、创建一个Vue应用
new Vue({
data() {
return {
name: 'yjh',
};
},
router,
store,
render: h => h(App),
}).$mount('#app');
二、实例化一个Vue应用到底发生了什么?
- this._init()
- callHook(vm, 'beforeCreate')
- observe(vm._data)
vm._data = vm.$options.data()
proxy(vm, _data, key) 代理到vm上访问
function proxy(vm, _data, key)() {
Object.defineProperty(target, key, {
get() {
return vm._data.key
},
set(val) {
vm._data.key = val
}
})
}
- callHook(vm, 'created')
- mountComponent(vm.$mount执行后执行mountComponent)
- callHook(vm, 'beforeMount')
- new Watcher(vm, updateComponent)
const updateComponent = () => {
// 创建虚拟dom
const vnode = vm._render()
// 创建虚拟dom的过程等同于如下代码行
// const vnode = vm.$options.render.call(vm, vm.$createElement)
// 更新$el
vm._update(vnode)
}
- callHook(vm, 'mount')
在以上发生的行为当中,第3步与第7步两者相辅相成;也是我们最需要关心的,弄清楚这两者,vue响应式原理就基本掌握了
三、如何追踪数据变化
我们都知道 数据发生变化视图也随之更新,那么首先我们得知道如何监听数据的变化
class Observer {
constructor(value) {
this.value = value
this.walk(value)
}
walk(obj) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
}
function defineReactive(obj, key) {
Object.defineProperty(obj, key, {
get() {
// 数据被访问
return obj.key
},
set(val) {
if (val === obj.key) {
return
}
// 数据更新了
obj.key = val
}
})
}
四、定义一个发布订阅的Dep类
当我们在创建虚拟dom的过程中,也就是执行vm.$createElement方法,可能会在多个地方使用到同一个数据字段(如:vm.name),即多个订阅者订阅了name的更新,因此在Vue中定义了一个发布订阅的Dep类
class Dep {
constructor() {
this.subs = []
}
addSub(sub) {
this.subs.push(sub)
}
depend() {
if (Dep.target) {
this.addSub(Dep.target)
}
}
notify() {
this.subs.forEach(sub => sub.update())
}
removeSub(sub) {
const i = this.subs.findIndex(sub)
if (i > -1) {
this.subs.splice(i, 1)
}
}
}
五、数据订阅者
订阅数据更新的到底是谁,我们先看看如下场景
<!-- 场景1 -->
<div>名字:{{ userInfo.name }},全名:{{ fullName }}</div>
export default {
data() {
return {
userInfo: {
name: 'junhua',
},
}
},
mounted() {
// 场景2
this.$watch('name', (newVal, val) => {
// ...
})
},
// 场景2
watch: {
name(newVal, val) {
// ...
}
},
computed() {
// 场景3
fullName() {
return `yang${this.userInfo.name}`
}
}
}
从上面示例代码看,订阅数据更新的场景有:
- 模版插值 :
new Watcher(vm, updateComponent)数据发生变化,更新组件 - vm.$watch : 监听单个数据做一些逻辑操作
- computed使用场景:计算属性
因此数据订阅者包含一个参数expOrFn([Function|String]),数据更新后需要执行的callback,如下:
class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm
if (typeof expOrFn === 'function') {
this.getter = expOrFn
} else {
this.getter = parsePath(expOrFn)
}
this.cb = cb || () => {}
this.value = this.get()
}
get() {
Dep.target = this
const value = this.getter.call(this.vm, this.vm)
Dep.target = undefined
return value
}
update() {
const val = this.value
const newVal = this.get()
this.cb.call(this.vm, newVal, val)
}
}
六、最终的观察者Observer
class Observer {
constructor(value) {
this.value = value
this.walk(value)
}
walk(obj) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i],)
}
}
}
function defineReactive(obj, key) {
const dep = new Dep()
Object.defineProperty(obj, key, {
get() {
// 依赖收集,收集订阅者Watcher实例
dep.depend()
// 数据被访问
return obj.key
},
set(val) {
if (val === obj.key) {
return
}
// 数据更新了
obj.key = val
// 通知订阅者Watcher实例更新
dep.notify()
}
})
}
七、总结
我们再来回顾下实例化Vue应用的最重要的两点
observe(vm._data)
// vm.$mount()
const componentUpdateWatcher = new Watcher(vm, updateComponent)
updateComponent在更新渲染组件时,会访问1或多个数据模版插值,当访问数据时,将通过getter拦截器把componentUpdateWatcher作为订阅者添加到多个依赖中,每当其中一个数据有更新,将执行setter函数,对应的依赖将会通知订阅者componentUpdateWatcher执行update,即执行updateComponent;至此Vue数据响应式目的已达到,再来看官网的这张图片就很好理解了
github地址 文章来源:博客园-杨君华,转载请注明出处:杨君华
深入Vue响应式原理的更多相关文章
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
- vue响应式原理,去掉优化,只看核心
Vue响应式原理 作为写业务的码农,几乎不必知道原理.但是当你去找工作的时候,可是需要造原子弹的,什么都得知道一些才行.所以找工作之前可以先复习下,只要是关于vue的,必定会问响应式原理. 核心: / ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- 浅析Vue响应式原理(三)
Vue响应式原理之defineReactive defineReactive 不论如何,最终响应式数据都要通过defineReactive来实现,实际要借助ES5新增的Object.definePro ...
- 深入解析vue响应式原理
摘要:本文主要通过结合vue官方文档及源码,对vue响应式原理进行深入分析. 1.定义 作为vue最独特的特性,响应式可以说是vue的灵魂了,表面上看就是数据发生变化后,对应的界面会重新渲染,那么响应 ...
- 浅谈vue响应式原理及发布订阅模式和观察者模式
一.Vue响应式原理 首先要了解几个概念: 数据响应式:数据模型仅仅是普通的Javascript对象,而我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率. 双向绑定:数据改变,视图 ...
- Vue响应式原理及总结
Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法,data 中声明的属性都被添加了访问器属性,当读取 ...
随机推荐
- SpringBoot 之Spring Boot Starter依赖包及作用(自己还没有看)
spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. spring-boot-starter-amqp 通过spring-rabbit来支持 ...
- 基于数组的栈(Java)
package com.rao.linkList; /** * @author Srao * @className ArrayStack * @date 2019/12/3 13:41 * @pack ...
- Kafka的基本概念
Kafka的前身是由LinkedIn开源的一款产品,2011年初开始开源,加入了 Apache 基金会,2012年从 Apache Incubator 毕业变成了 Apache 顶级开源项目. Top ...
- 【题解】 洛谷 P2649 游戏预言
题目: P2649 游戏预言 题意: John和他的好朋基友们在van纸牌游戏.共有\(m\)个人.纸牌有\(n \times m\)张,从\(1--n \times m\)编号.每人有\(n\)张. ...
- 服务器使用bbr加速配置
服务器内核升级: 以centos7为例,配置之前可使用以下命令查看内核版本,若是4.0以上则无需对内核升级: uname -r 对内核升级的方法: 直接使用以下命令进行内核版本的下载: rpm --i ...
- planning algorithms chapter 2
planning algorithms chapter 2 :Discrete Planning 离散可行规划导论 问题定义 在离散规划中,状态是"可数"的,有限的. 离散可行规划 ...
- [Gamma阶段]第八次Scrum Meeting
Scrum Meeting博客目录 [Gamma阶段]第八次Scrum Meeting 基本信息 名称 时间 地点 时长 第八次Scrum Meeting 19/06/04 大运村寝室6楼 40min ...
- 一分钟理解什么是REST和RESTful
从事web开发工作有一小段时间,REST风格的接口,这样的词汇总是出现在耳边,然后又没有完全的理解,您是不是有和我相同的疑问呢?那我们一起来一探究竟吧! 就是用URL定位资源,用HTTP描述操作. 知 ...
- FNV哈希算法(转)
由来:FNV哈希算法全名为Fowler-Noll-Vo算法,是以三位发明人Glenn Fowler,Landon Curt Noll,Phong Vo的名字来命名的,最早在1991年提出. 特点和用途 ...
- hive函数 get_json_object
pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...