从入口开始
据说Runtime + Compiler 构建出来的 Vue.js,它的入口是 src/platforms/web/entry-runtime-with-compiler.js
Vue 的入口,由于import Vue from './runtime/index'
,它定义在 src/platforms/web/runtime/index.js
说实话这章没怎么听懂,应该还是js的代码量积累不够,没有足够的项目支撑看起来比较困难,这里的内容以后再补充吧。
原型上挂方法
说说自己学到的东西,见下面的代码片段
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
下面是initMixin方法的片段
export function initMixin (Vue: Class<Component>) {
Vue.prototype._init = function (options?: Object) {
const vm: Component = this
// a uid
vm._uid = uid++
这里给vue添加方法的方式时通过原型链挂载,这个在道总之前的将油猴脚本的时候花了很大时间强调过的,在这里遇到了,不懂得可以取看看他得帖子[油猴脚本开发指南]原型与原型链-油猴中文网 (tampermonkey.net.cn)](https://bbs.tampermonkey.net.cn/thread-744-1-1.html),(顺利碰瓷大佬)还说到了ES5的语法比ES6更容易实现原型上的方法挂载。
这里提到了什么原型方法和静态方法,还不是很清楚,后来弄懂了再来补充,算是给自己挖了一个坑。
数据驱动
听他讲了一堆,内容都没听懂,以后慢慢加深理解,先抄一下大纲:new Vue 发生了什么,Vue实例挂载的实现,render, Virtual DOM,createElement,update。
数据驱动 | Vue.js 技术揭秘 (ustbhuangyi.github.io)
数据驱动的意思是在使用vue框架的页面上内容的修改是因数据发生了变化,而普通的
网页修改数据是通过Jquery直接修改dom,vue大大简化了代码量。
- 每个vue文件都会算是一个vue对象,里面的数据推荐使用data函数而不是data对象;
- dom操作很吃性能,所以推荐使用虚拟dom,而且虚拟dom没有那么多的属性,只保留了关键的属性;
- 一些混淆的名词,node,element,dom元素,node节点;
- 先把vue风格的标签转成node对象,然后加上一些属性和事件,再把这些node节点转为HTML中的标签就称为渲染;
- dom由于数据驱动有生成和更新,后面会重新刷新标签内容,就需要一个观察者watcher来监控操作
- 查看源码并不需要从GitHub上下载,找一个开发的vue项目里面就有vue的源码,路径如下
\node_modules\vue\src
基础不牢,地动山摇。这三个小时花的不值呀,找哥哥吹牛逼都比这快乐。