深入Vue2.0底层思想

// mounted is called for render-created child components in its inserted hook

if (vm.$vnode == null) {

vm._isMounted = true

callHook(vm, 'mounted')

}

return vm

在应用vue2.0的过程，有时看API很难解得vue作者的思惟，这促使我想要去深刻懂得vue底层的思惟，懂得完底层的一些思惟，才能更好的用活框架，固然网上已经有很多源码解析的文档，但我认为只有本身着手了，才能加倍深印象。

起首会new一个watcher对象(主如果将模板与数据建立接洽)，在watcher对象创建后，会运行传入的办法 vm._update(vm._render(), hydrating) 。个中的vm._render()重要感化就是运行前面compiler生成的render办法，并返回一个vNode对象。vm.update() 则会比较新的 vdom 和当前 vdom，并把差别的部分衬着到真正的 DOM 树上。

推荐个图，响应式工程流程

(想深刻懂得watcher的背后实现道理的，可以不雅看这篇文┞仿 Vue2.0 源码浏览：响应式道理)

compile

上文中提到 compile 函数就是将 template 编译成 render 函数的字符串情势。

export function compile ( 
 
  template: string, 
 
  options: CompilerOptions 
 
): CompiledResult { 
 
  const AST = parse(template.trim(), options) //1. parse 
 
  optimize(AST, options)  //2.optimize 
 
  const code = generate(AST, options) //3.generate 
 
  return { 
 
    AST, 
 
    render: code.render, 
 
    staticRenderFns: code.staticRenderFns 
 
  } 
 
}

这个函数重要有三个步调构成：parse，optimize 和 generate，分别输出一个包含 AST，staticRenderFns 的对象和 render函数的字符串。

parse 函数，重要功能是将 template字符串解析成 AST。前面定义了ASTElement的数据构造，parse 函数就是将template里的构造(指令，属性，标签等)转换为AST情势存进ASTElement中，最后解析生成AST。

optimize 函数(src/compiler/optimizer.js)重要功能就是标记静态节点，为后面 patch 过程中比较新旧 VNode 树形构造做优化。被标记为 static 的节点在后面的 diff 算法中会被直接忽视，不做具体的比较。

generate 函数(src/compiler/codegen/index.js)重要功能就是根据 AST 构造拼接生成 render 函数的字符串。

const code = AST ? genElement(AST) : '_c("div")' 
 
staticRenderFns = prevStaticRenderFns 
 
onceCount = prevOnceCount 
 
return { 
 
    render: `with(this){return ${code}}`, //最外层包一个 with(this) 之后返回 	
			 4/6   首页 上一页 2 3 4 5 6 下一页 尾页	
			

　　推荐阅读
　　拯救者Linux：我是如何给我的团队引入Linux的
            
            在项目早期就碰到公开的掉败后，一个有名大年夜学的 IT 团队决定将他们的 web 注册体系安排到 Linux上，此举几乎将办事器的最大年夜用户拜访量进步了 3  倍1998年，我在明尼苏达大年夜学为>>>详细阅读


本文标题：深入Vue2.0底层思想–模板渲染
地址：http://www.17bianji.com/lsqh/36398.html
 1/2    1