【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 等 ...
随机推荐
- SQL SERVER 2008 R2 插入数据非常慢
表是5字段int类型,第一个字段是主健,自增字段 表结构: id int Uncheckedbillno bigint Uncheckedopid int Checkedbillopid int ...
- Future Maker | 领跑亚太 进击的阿里云数据库
7月31日,阿里云马来西亚峰会在吉隆坡召开,阿里巴巴集团副总裁.阿里云智能数据库事业部总裁李飞飞在演讲中表示:“作为亚太地区第一的云服务提供商,阿里云数据库已为多家马来西亚知名企业提供技术支持,助力企 ...
- Qt添加右键菜单
QAction *hideAction = new QAction(tr(" 隐藏"),this); addAction(hideAction); setContextMenuPo ...
- mysql存储过程小解
mysql 存储过程 1.创建语法 delimiter $$ --$$表示改变默认的分隔符,代表以下为存储过程,不然会以SQL的方式执行 drop procedure if exists pro_na ...
- pl/sql基础知识—触发器
n 触发器简单介绍 触发器是指隐含执行的存储过程,它不是由程序员或者是DBA来显式调用,而是因为某个操作引发执行的.当定义触发器时,必须要指定触法的事件和触发的操作,常用的触发事件包括insert, ...
- MacOS利用Terminal访问远程Linux服务器
常用命令 默认22端口访问 ssh x.x.x.x 指定端口访问 ssh x.x.x.x -p port 指定用户访问(默认是MacOS当前用户) ssh user@x.x.x.x [-p port] ...
- 2017校赛 C: 不爱学习的小W【模拟】
题目描述 “叮铃铃”上课了,同学们都及时到了教室坐到了座位上,教室里有n行m列的座位而且刚好坐满.既然是上课,那老师叫学生回答问题就是再正常不过的事了,同样地,教室里也就有爱学习和不爱学习的学生了,爱 ...
- sql —— having
在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与聚合函数一起使用.HAVING 子句可以让我们筛选分组后的各组数据. 原表: 我们可以对上面数据根据性别这个字段进行分组查询,分别 ...
- AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载【转载】
技术贴:AUTO uninstaller 密钥/激活码/破解/注册机 ver 8.9.05 资源下载 楼主分享几个auto uninstaller密钥破解注册机,可以用于AUTO uninstalle ...
- pycharm 快捷键使用
1.Ctrl+/?键 = 选中行全部注释/解封: 2.Ctrl+D = 复制前一行: 3.Ctrl+Z = 撤销: 1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性 ...