首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

Vue模板编译原理?

如何将template转换成render函数(这里要注意的是我们开发时尽量不要使用template,因为将template转化成render方法需要在运行时进行编译操作会有性能损耗,同时引用带有complier...包的vue体积也会变大) 默认.vue文件的 template处理是通过vue-loader 来进行处理的并不是通过运行时的编译。...将 template 模板转换成 ast 语法树 - parserHTML 对静态语法做静态标记 - markUp 重新生成代码 - codeGen 补充回答: 模板引擎的实现原理就是new Function...vue-loader处理template属性主要靠的是vue-template-compiler vue-loader // template => ast => codegen => with+function...方法 let {ast, render } = VueTemplateCompiler.compile({{aaa}}) console.log(ast, render) // 模板引擎的实现原理

43330

Vue 3使用JSX

使用 JSX 的场景 我们现在来看下有哪些场景用 JSX 会比模板更加优雅。...使用 JSX 需要注意的点 7.1 对 Props 的处理 模板,对 props 的处理是 merge。为了满足不同用户的需求,开了一个可以覆盖的口子。 7.2 对插槽的处理 ?...但是模板,传递属性的时候,template 里面是不能写 VNode 的,因此 Vue 里出现了插槽这个概念,插槽只组件的 children 里面才有。...再回到刚刚的问题,如果直接把 children 写成一个内联的对象还好办,但如果是一个变量的话,在编译的时候,编译器是无法知道传过来的到底是个什么玩意儿,是 slots 还是 VNode 其实编译的时候看不出来...传统的 VDOM 树,我们在运行时不能够得到用于优化的信息。 Vue 3 ,充分利用了模板静态信息,最终体现到 VDOM 树上。

1.9K30

Vue模板编译原理

先看下模板到真正用户看到的界面过程中经历了什么: 模板———>模板编译——>渲染函数——>vnode——>用于界面 vue.js提供了模板语法,允许我们声明式的描述状态和DOM之间的绑定关系。...将模板编译为渲染函数,就是模板编译要做的事,模板编译可以分为三个阶段: 1.将模板解析为AST(抽象语法树)—— 解析器。 2.遍历AST标记静态节点 —— 优化器。...我是静态节点,我不需要发生变化 标记静态节点有两个好处: 一、每次重新渲染的时候不需要为静态节点创建新节点,也就是静态节点的解析器不需要重新创建 二、Virtual DOMpatching...使用本文开头举的例子的模版生成后的AST来生成render后是这样的: { render: `with(this){return _c('div',[_c('p',[_v(_s(name))])]...1.第一个参数是一个HTML标签名 2.第二个参数是元素上使用的属性所对应的数据对象,可选项 3.第三个参数是children _v的意思是创建一个文本节点。 _s是返回参数的字符串。

1.5K30

Vue 使用 $attrs 构建高级组件

这节课,我们来看下 Vue3 的 $attrs 属性。首先,我们会介绍它的用途以及它的实现与 Vue2 有哪些不两同点,并通过事例来加深对它的理解。...真正理解了 $attrs 属性有助于我们构建易于使用和可扩展的高级组件 什么是 $attrs 对 $attrs 定义, Vue2 与 Vue3 是不一样的,这里我们主要来介绍 Vue3 的版本: $attrs...$attrs 也可以被看作是一个安全网,它可以捕获任何我们没有组件声明的东西。...attrs V3 vs $attrs V2 这小节,我们来看下 Vue2 与 Vue3 的 attrs 属性的区别,先来看张图: 与 Vue2 的区别主要有: 自定义事件放在 @listerner...对象 不包含 class 属性 而 Vue3 的 attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute,这有利于我们方便使用这些属性。

2.4K10
领券