Vue源码拜读感悟 持续更新中................

352 阅读1分钟

template 和 render有什么区别

  1. 推荐用template因为compiler中对template有优化算法
  2. render会编译一遍template不会

vue源码中各个文件是干嘛的

image.png

为什么vue实例要用function不用class?

image.png

  1. 一方面为了可读性
  2. 因为后续会在vue.prototype上扩展用函数对象更方便

vue initMixin阶段干了什么?

  1. 合并配置 C__Users_PC01_Documents_markdown_vue源码解读_Pasted image 20211230223838.png

  2. 初始化配置,初始化生命周期 基本配置 用callhook传回生命周期 所以beforecreat之前不能使用data computer watch等一切vue实例的东西 因为在从beforecreat到create的时候才会挂载上去,意思就是在create的时候才能使用data computer watch等.image.png

  3. 但是在beforecreat期间处理了slot,以及初始化页面,并触发了defineReactiveimage.png

defineReactive是什么

  1. 一个基于defineProperty的封装

callHook是干嘛的?

beforeCreate和create阶段用来回调告诉生命周期执行到那儿了

beforecreat 到create之间做了什么?

  1. image.png 源码中有解释

vue中父子组件传递的原理

image.png 在到create的生命周期里调用了initState方法实现了父子组件传递 props的优先级最高 其次是 method

vue实例中method是如何挂载的?

在initMethods方法中image.png 会优先去找传过来的方法 如果没有 在遍历自己的method这里的method是以对象的形式 先判断 最后用bind绑定到实例上

data和props是怎么挂载到VM实例上的?

image.png 如图所示通过proxy代理 不然的话我们应该是this.data.XXX来调用

vue代码里大量的perf是干嘛的?

image.png 检测性能的不影响功能,可以忽视