- 博客(8)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 v-7
2-12 createElement 还是接着_render方法讲： vnode = render.call(vm._renderProxy, vm.$createElement) 之前讲了vm._renderProxy是怎么回事，现在学习一下vm.$createElement部分。 首先在core/instance/render.js中就可以看到vm.$creteElement的定义。 模板编译出来的代码会执行： vm._c = (a, b, c, d) => createElement(vm
2021-04-14 16:09:02
167
原创 vue-6
2-10 virtual DOM 引入vDOM的原因是使用真实DOM是非常昂贵的，我们知道一个真实DOM其实是有上百个属性的，因为游览起的标准就把DOM实现的非常复杂。所以vue实现了一个VNode，只定义了十几种属性，便可以描述一个dom。 目录：core/vdom/vnode.js export default class VNode { tag: string | void; data: VNodeData | void; children: ?Array<VNode>;
2021-04-13 17:57:39
90
原创 vue-5
2-6 vue实例挂载的实现 我们选择的是 RunTime+compiler版本，所以入口文件是platforms/web/entry-runtime-with-compiler.js 。 首先我们能够看到platforms/web/entry-runtime-with-compiler.js里写入了Vue.prototype.$mount。但是我们又发现当前文件引入的./runtime/index里面也同样写入了Vue.prototype.$mount。那么作者为什么要重复定义原型上的$mount方法呢。
2021-04-13 17:40:46
96
原创 vue-4
2-2 数据驱动 这一章主要分析当我们声明一个插值变量，vue是如何把这个变量渲染到真实dom上的。 首先是调试过程，我们最好是使用Runtime+compiler版本的，这样的话脚手架会给webpack.base.conf.js中的resolve添加一行代码： 'vue': resolve('node_modules/vue/dist/vue.esm.js') 这个就是一个带compiler版本的代码，然后我们找到这个文件在里面的_init方法加一个debugger，就可以开始调试了。 实现挂载的真正函
2021-04-09 08:30:45
211
原创 vue-3
1-9 从入口开始 分析 Runtime+Compiler 的构建代码。 1.入口文件是 src/platforms/web/entry-runtime-with-complier.js 。这里给Vue的prototype上绑定了一个和编译器相关的方法是$mount。 2.然后src/platforms/web/entry-runtime-with-complier.js文件中的Vue其实来自于./runtime/index里面。这里面给Vue定义了很多静态的全局配置、patch、$mount方法。 3.然
2021-04-08 19:47:28
63
原创 vue-2
1-5 Vue.js源码目录设计 1-6 vuejs 源码构建 src |-- compiler # 编译相关 |-- core # 核心代码 |-- platforms # 不同平台的支持 |-- server # 服务器端渲染 |-- sfc # .vue文件解析 |-- shared # 共享代码 Vue使用rollup进行代码编译，它更偏向于js框架的编译，不像webpack包含很多资源的编译，所以它更轻量。 package.json的讲解： 1.main是项目的入口，也就是你每次import V
2021-04-07 08:37:05
76
原创 vue-1
使用flow进行类型检查，避免线上的一些隐患bug。 1.类型推荐：通过变量的使用上下文来推断变量类型，然后根据这些推断来检查类型 2.类型注释：事先注释好我们期待的类型，flow会基于这些注释来判断 flow使用流程： cnpm i flow-bin -g flow init flow your’s.js ...
2021-04-06 19:53:04
88
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人