深入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 中声明的属性都被添加了访问器属性,当读取 ...
随机推荐
- day005-python基础数据类型之课后作业讲解
1.元素的分类 需求:有如下集合[11,22,33,44,55,66,77,88,99,90……],将所有大于66的值保存在字典的第一个key中,将小于66的值保存在第二个key的值中 代码实现: # ...
- 【转】Fiddler常见用法
转载自:https://blog.csdn.net/china_jeffery/article/details/82426586 一.会话过滤器 选中[Filters]–> [Use Filte ...
- /bin/bash^M: bad interpreter
(1)使用linux命令dos2unix filename,直接把文件转换为unix格式: (2)使用sed命令sed -i "s/\r//" filename 或者 sed -i ...
- [RN] React Native 封装选择弹出框(ios&android)
之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用. ...
- 封装好的observer.js,用于非父子组件传值,直接调用$on和$emit方法
const eventList = {} const $on = (eventName,callback)=>{ if(!eventList[eventName]){ eventList[eve ...
- send 和recv小结
不论是客户还是服务器应用程序都用send函数来向TCP连接的另一端发送数据. 不论是客户还是服务器应用程序都用recv函数从TCP连接的另一端接收数据. #include <sys/socket ...
- SpringBoot + CXF快速实现SOAP WebService(支持Basic Auth)
唠叨两句 讲真,SOAP跟现在流行的RESTful WebService比起来显得很难用.冗余的XML文本信息太多,可读性差,它的请求信息有时很难手动构造,不太好调试.不过说归说,对某些企业用户来说S ...
- keepalived haproxy 主备配置
global_defs { router_id k8s_master} vrrp_script chk_http_port {script "/etc/keepalived/check_ha ...
- linux运维 技能 2018
1.监控与日志 prometheus.grafana.zabbix ELK(elasticsearch logstash filebeat kibana) 2.容器类 harbor映像管理 docke ...
- FZU Monthly-201905 tutorial
FZU Monthly-201905 tutorial 题目(难度递增) easy easy-medium medium medium-hard hard 思维难度 AB H DG CE F A. C ...