【js】vue 2.5.1 源码学习 （十一） 模板编译compileToFunctions渲染函数
1. compileToFunctions定位
==> createCompiler = createCompilerCreator(function beasCompile(){}) // 创建编译器的编译器 编译器的爷爷。
==> beasOptions 编译器默认预留选项
==> createCompiler(beasOptions) 创建一个编译器。返回一个对象
==> { compile: function{} ,conpileToFunctions:function{} }
==> compileToFunctions(template,{用户配置和兼容},this)
==> createCompilerCreator(beasCompile){
return function createCompiler(beasOptions){
function compiler(template,options){
// 编译器核心方法
}
return {
compile: compiler,
conpileToFunctions: createComilpeToFunctionFn(compiler)
}
}
}
==> createComilpeToFunctionFn(compile){
// 缓存对象 存储 编译结果
var cache = Object.create(null)
return function comilpeToFunctions(template,options,vm) {
try{
new Function('return 1')
}catch(e){
if(e.toString().match(/unsafe-eval|csp/)){
console.error('您当前的环境禁止不安全评估的内容安全策略，模版编译无法在此环境中工作')
}
}
var key = template
// 缓存作用，编译过后不重复编译
if(!cache[key]){
return cache[key]
}
var compiled = compile(template,options)
/// comilped.errors 错误信息 compiled.tips 提示信息
if（）{} if(){}
var res = {}
var fnGenErrors = []
res.render = createFuntion(compiled.render,fnGenErrors);
res.staticRenderFns = compiled
return res; }
}
==> compiler(template,options){
finalOptions =
errors = [] tips = []
// if(options) 检测用户有那些自定义配置，最终扩展到 finalOptions
var compiled = beasCompile(template,finalOptions)
errors tips
return compiled;
}
==> beasCompile(template,options){
// 把模版解析成抽象的语法树(AST) parse 函数
// 根据给点的AST 生成目标平台需要的代码 “函数题的字符串” generate() 函数new Function()
var ast = pares()
var code = generate(ast,options); // 函数体字符串
return {
// ast:ast,
render:code.render, // 渲染函数
// staticRenderFns: code.staticRenderFns }
}
==> createFuntion(code,error){
try{
new Function(code)
}catch(){ }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第九课</title>
</head>
<body>
<div id="app">
<!-- <huml></huml> --> </div>
<script src="vue.js"></script>
<!-- <script src="vue2.5.1.js"></script> -->
<script type="text/javascript">
var componentA = {
el: "#app"
}
var vm = new Vue({
el:"#app",
data: {
message: "hello Vue",
key: "wodow",
test: 1, list: {
b:1
},
aa:{
b: [1,2,3]
}
},
beforeCreate: function(){
console.log('我钩子函数beforeCreate') },
mounted: function(){
this.url = 'eeeee'
},
components:{
humle: componentA
}
})
vm.test = 2;
// console.log(vm.aa)
</script>
</body>
</html>
如有问题或者疑惑，欢迎评论。
【js】vue 2.5.1 源码学习 （十一） 模板编译compileToFunctions渲染函数的更多相关文章
- 【js】vue 2.5.1 源码学习 （十） $mount 挂载函数的实现
大体思路(九) 本节内容: 1. $mount 挂载函数的实现. // 将Vue.prototype.$mount 缓存下来 ==>mountComponet(this,el) { // 组建挂 ...
- 如何实现全屏遮罩（附Vue.extend和el-message源码学习）
[Vue]如何实现全屏遮罩(附Vue.extend和el-message源码学习) 在做个人项目的时候需要做一个类似于电子相册浏览的控件,实现过程中首先要实现全局遮罩,结合自己的思路并阅读了(饿了么) ...
- 【js】 vue 2.5.1 源码学习（十二）模板编译
大体思路(十) 本节内容: 1. baseoptions 参数分析 2. options 参数分析 3. parse 编译器 4. parseHTNL 函数解析 // parse 解析 parser- ...
- 【js】vue 2.5.1 源码学习 （九） 响应数组对象的变
大体思路(八) 本节内容: 1.Observe 如何响应数组的变化 代理原型 数组变异方法 shell cacheArrProto methods 新添加的数组需要加到显示系统里面,拦截 push等的 ...
- 【js】Vue 2.5.1 源码学习 （八）响应式入口observe
大体思路(七) 本节内容: deps 依赖收集的数组对象 => Dep 构造函数 /** ==> observe() * var ob * ==> if --isObject * = ...
- 【js】vue 2.5.1 源码学习 （七） 初始化之 initState 响应式系统基本思路
大体思路(六) 本节内容: 一.生命周期的钩子函数的实现 ==> callHook(vm , 'beforeCreate') beforeCreate 实例创建之后 事件数据还未创建 二.初始化 ...
- 【js】 vue 2.5.1 源码学习（六） initProxy initLifeCycle 渲染函数的作用域代理
大体思路 (五) 1. initProxy 渲染函数的作用域代理 ==> es6 如果支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() prox ...
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...
- 【js】 vue 2.5.1 源码学习（五） props directives规范化 props 合并策略
大体思路 (四) 上节回顾: A: 对于生命周期函数将父子组件的函数放到一个数组里面,特定时间点调用,保证父子组件函数都调用到. B: 对于directive,filters,components 等 ...
随机推荐
- ls command not found
编辑profile文件没有写正确,导致在命令行下 ls等命令不能够识别. 在命令行下打入下面这段就可以了 export PATH=/usr/local/sbin:/usr/local/bin:/sbi ...
- 目录中的pwd、cd及ls命令
1.pwd命令(确定当前所在目录) pwd命令以绝对路径的方式显示用户当前工作目录.命令将当前目录的全路径名称(从根目录)写入标准输出.全部目录使用/分隔.第一个/表示根目录,最后一个目录是当前目录. ...
- Mybatis自查询递归查找子菜单
之前写过 java从数据库读取菜单,递归生成菜单树 今天才发现mybatis也可以递归查询子菜单 先看一下数据库 主键id,名称name,父id,和url 设计菜单类 public class Men ...
- day39-Spring 03-JDK的动态代理
package cn.itcast.spring3; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Meth ...
- Hdu 4493
题目链接 注意四舍五入,保留到小数点后两位(如果存在的话). 附上代码: /************************************************************** ...
- Oracle使用——Oracle表字段的增加、删除、修改和重命名
增加字段 语法 alter table tablename add (column datatype [default value][null/not null]); 说明:alter table 表 ...
- 小爬爬1.requests基础操作
1.requests安装的问题 (1)如果requests没有安装,我们需要先安装这个模块,在cmd安装不了,我们可以在下面的位置,打开的窗体安装requests模块 pip install requ ...
- 洛谷 P3768 简单的数学题 （莫比乌斯反演）
题意:求$(\sum_{i=1}^{n}\sum_{j=1}^{n}ijgcd(i,j))mod p$(p为质数,n<=1e10) 很显然,推式子. $\sum_{i=1}^{n}\sum_{j ...
- 2019-10-18-dotnet-文件读写务必注意事项
title author date CreateTime categories dotnet 文件读写务必注意事项 lindexi 2019-10-18 08:42:53 +0800 2019-10- ...
- UVA_490:Rotating Sentences
"R Ie n te h iD ne kc ,a r tt he es r eo fn oc re e s Ia i ad m, . ...