模板衬着过程(重要的函数介绍)

懂得完一些基本常识后，接下来我们讲解下模板的衬着过程

$mount 函数，主如果获取 template，然落后入 compileToFunctions 函数。

compileToFunctions 函数，重要将 template 编译成 render 函数。起首读缓存，没有缓存就调用 compile 办法拿到 render 函数 的字符串情势，再经由过程 new Function 的方法生成 render 函数。

// 有缓存的话就直接在缓存琅绫擎拿 
 
const key = options && options.delimiters 
 
            ? String(options.delimiters) + template 
 
            : template 
 
if (cache[key]) { 
 
    return cache[key] 
 
} 
 
const res = {} 
 
const compiled = compile(template, options) // compile 后面会具体讲 
 
res.render = makeFunction(compiled.render) //经由过程 new Function 的方法生成 render 函数并缓存 
 
const l = compiled.staticRenderFns.length 
 
res.staticRenderFns = new Array(l) 
 
for (let i = 0; i  l; i++) { 
 
    res.staticRenderFns[i] = makeFunction(compiled.staticRenderFns[i]) 
 
} 
 
...... 
 
} 
 
return (cache[key] = res) // 记录至缓存中  

compile 函数就是将 template 编译成 render 函数的字符串情势，后面一末节我们会具体讲到。

完成render办法的生成后，会进入 _mount 中进行DOM更新。该办法的核心逻辑如下：

// 触发 beforeMount 生命周期钩子 
 
callHook(vm, 'beforeMount') 
 
// 重点：新建一个 Watcher 并赋值给 vm._watcher 
 
vm._watcher = new Watcher(vm, function updateComponent () { 
 
  vm._update(vm._render(), hydrating) 
 
}, noop) 
 
hydrating = false 
 
// manually mounted instance, call mounted on self 	
			
 3/6   首页 上一页 1 2 3 4 5 6 下一页 尾页
	
			

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


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