Vue.js 内部运行机制之总结 常见问题解答
Vue.js 内部运行机制之总结 & 常见问题解答
总结
在本小册的第一节中,笔者对 Vue.js 内部运行机制做了一个全局的概览,当时通过下面这张图把 Vue.js 拆分成一个一个小模块来介绍,之后通过这一系列小节的学习,相信大家已经对 Vue.js 内部的原理有了一个更进一步的了解,对这张图也再也不会感觉到那么陌生。
每个小节中的代码都是笔者根据 Vue.js 原理单独抽离出来写成的 Demo,大家可以在我的 Gtihub 上查看完整的代码 (见 VueDemo 项目)。
本小册对 Vue.js 原理进行了初步的介绍,希望能够起到一个抛砖引玉的作用,读者读完以后,可以利用这些基础对 Vue.js 进行一个更加深入的探索,相信会有更大的收获。
常见问题
- 怎么实现
this._test
改变而不是this._data.test
改变触发更新?
答:其实这中间有一个代理的过程。
_proxy(options.data);function _proxy (data) {const that = this;Object.keys(data).forEach(key => {Object.defineProperty(that, key, {configurable: true,enumerable: true,get: function proxyGetter () {return that._data[key];},set: function proxySetter (val) {that._data[key] = val;}})});
}
本质就是通过 Object.defineProperty
使在访问 this
上的某属性时从 this._data
中读取(写入)。
- 能不能将依赖收集中讲到的
dep.addSub(Dep.target)
改成dep.addSub(new Watcher())
呢?
为了便于读者理解这部分内容,我将代码做了简化,实际上一个 Watcher
对象可能会在多个 Dep
中,并不是每次 addSub
都是一个新的 Watcher
对象,需依赖 Dep.target
进行收集(实际上 Dep.target
也是通过 Watcher
对象的 get
方法调用 pushTarget
将自身赋值给 Dep.target
)。
最后
从 2017 年 12 月开始写这本小册到现在差不多 2 个月的时间,虽说之前写过类似的内容,但是将 Vue.js 源码抽离成一个一个 Demo 还是花了很多时间,对于这本小册也是前前后后改了好几次才让自己满意。
因为读者的基础不一致,而小册的定位是偏向于对新手读者更加友好,所以我尽量用更加浅显易懂的方式去写这本小册的内容。希望大家可以通过这本小册初步掌握 Vue.js 的原理,掌握这些原理以后再去尝试阅读 Vue.js 源码,相信会事半功倍,也会对 Vue.js 有更深一层的理解。
End
上一篇:Vuex 状态管理的工作原理
Vue.js 内部运行机制之总结 常见问题解答相关推荐
- 剖析 Vue.js 内部运行机制 (1)
1. new Vue() 之后. Vue 会调用 _init 函数进行初始化,也就是这里的 init 过程,它会初始化生命周 期.事件. props. methods. data. computed ...
- 分析内部运行机制,教你解决Redis性能问题
摘要:聚焦Redis的性能分析,思考Redis 可以通过哪些机制来提高性能,当性能瓶颈发生的时候,我们又能做出哪些优化策略,最终确保业务系统的稳定运行. 本文分享自华为云社区<分析内部运行机制, ...
- Ray --内部运行机制、对象存储中对象的存储和容错
本篇主要介绍了分布式框架 Ray 的内部运行机制,对象的存储过程和容错能力.内部运行机制主要分为Ray的连接,远程函数的定义和使用以及获取对象ID的运行机制.对象存储主要是对象放入的序列化和从对象调出 ...
- 浅谈SQL Server内部运行机制
原文:浅谈SQL Server内部运行机制 对于已经很熟悉T-SQL的读者,或者对于较专业的DBA来说,逻辑的增删改查,或者较复杂的SQL语句,都是非常简单的,不存在任何挑战,不值得一提,那么,SQL ...
- ActiveSupport::Concern 和 gem 'name_of_person'(300✨) 的内部运行机制分析
理解ActiveRecord::Concern: 参考:include和extend的区别: https://www.cnblogs.com/chentianwei/p/9408963.html 传统 ...
- VC++的学习(基于VS2008)——windows程序内部运行机制
昨天和今天都在学习windows程序的内部运行机制,再次学习这一章,我明显感到条理清晰了,原来这一章是讲我们所用的电脑,这样一个windows平台下程序运行的内部机制的.windows应用程序下最重要 ...
- uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...
- 从template到DOM(Vue.js源码角度看内部运行机制)
写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(github.com/answershuto-)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些产出也会对同样想要学习Vue.j ...
- [转] webpack之plugin内部运行机制
简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...
最新文章
- PostgreSQL中的数据库实例、模式、用户(角色)、表空间
- 2018视频人物识别挑战赛冠军经验分享:在现有机器资源条件下更快速验证是关键...
- [Google Android] Creating Your Own Spelling Checker Service
- JAVA编程语言的基础知识(六)
- 递归的效率问题及递归与循环比较
- mvc4 利用filters特性来 实现自己的权限验证 之二
- 学习方法之05六步法则,考上清华北大的路径
- 从门外汉到 Go 圈网红技术博主的五年历程
- MySQL每秒57万的写入,快还是慢?
- OrCAD(三)电路仿真
- OPPO Find X5系列领衔OPPO春季新品发布会,多款产品亮相
- 软件设计师考试大纲(2004版)
- Android Apk反编译 dex2j遇到如下问题 com.googlecode.d2j.DexException: not support version.
- PHP对接抖音开发平台接口
- 这些个适合oier的网站丫太有趣了吧(不定期更新中)
- 80端口和8080端口的区别以及详情
- 就GIS二次开发的一些看法
- std::cerr与std::cout区别
- 计算机毕设Python+Vue疫情期间优化旅游平台(程序+LW+部署)
- php简单的日历代码,PHP实现的简单日历代码
热门文章
- 面试:一文搞懂堆和栈的区别
- WebClient.Credentials 属性 (System.Net)
- Supersocket 如何使用 教程1
- 项目优化经验mdash;mdash;垃圾回收导致的性能问题[z]
- 收起虚拟键盘的各种方法 -- IOS
- 常用JavaScript函数 1 - 15 (自我总结)
- 人工智障学习笔记——机器学习(9)最大期望算法
- 动态规划——节点选择(蓝桥杯试题集)
- 《C和指针》——带副作用的宏参数
- LeetCode 389. Find the Difference