我们在上一篇 看不懂来打我,vue3如何将template编译成render函数 文章中已经讲过了,将template模版编译成模版AST抽象语法树的过程中不会处理v-for、v-model等内置指令,而是将其当做普通的props属性处理。 比如我们这个demo,编译成模版AST抽象语法树后。input标签对应的node节点中就增加了三个props属性,name分别为for...
在baseCompile函数中主要有三部分,执行baseParse函数将template模版转换成模版AST抽象语法树,接着执行transform函数处理掉vue内置的指令和语法糖就可以得到javascript AST抽象语法树,最后就是执行generate函数递归遍历javascript AST抽象语法树进行字符串拼接就可以生成render函数。当时在想这回算是稳了,结果跟着就翻车了。 粉...
在自定义组件中创建v-model功能的另一种方法是使用计算属性, 在计算属性中定义get()和set()方法,get()方法返回modelValue属性或用于绑定的任何属,set()方法为该属性触发相应的$emit, 修改上述MyInput组件的代码如下所示: <!-- 自定义输入框 --><template></template>import{computed}from'vue'exportdefault{n...
在baseCompile函数中主要有三部分,执行baseParse函数将template模版转换成模版AST抽象语法树,接着执行transform函数处理掉vue内置的指令和语法糖就可以得到javascript AST抽象语法树,最后就是执行generate函数递归遍历javascript AST抽象语法树进行字符串拼接就可以生成render函数。当时在想这回算是稳了,结果跟着就翻车了。 粉...
render:function(createElement){ //createElement函数返回的结果为VNode. VNode就是虚拟dom,用js对象来模拟真实的DOM. retrun createElement( tag, //标签名称 data,// 传递数据 children //子节点数组 ) } 1. 2. 3. 4. 5. 6. 7. 8. 9.
一般情况下每个vue组件都用"\<template>"写html, 但实际还可以在js代码中通过render函数生成dom. 最主要常见组件库也需要配合"h"使用. render render是组件的一个选项, 他的返回值会被作为组件的DOM结构. import{defineComponent}from"vue";exportdefaultdefineComponent({render(){return'123456789'}}); image.png ...
组件树中的 vnodes 必须是唯一的。下面是错误示范: js function render() { const p = h('p', 'hi') return h('div', [ // 啊哦,重复的 vnodes 是无效的 p, p ]) } 1. 2. 3. 4. 5. 6. 7. 8. 如果你真的非常想在页面上渲染多个重复的元素或者组件,你可以使用一个工厂函数来做这件...
在之前的面试官:来说说vue3是怎么处理内置的v-for、v-model等指令?文章中讲了transform阶段处理完v-for、v-model等指令后,会生成一棵javascript AST抽象语法树。这篇文章我们来接着讲generate阶段是如何根据这棵javascript AST抽象语法树生成render函数字符串的,本文中使用的vue版本为3.4.19。
@vue/compiler-sfc包的compileTemplate函数 还是同样的套路,我们通过debug一个简单的demo来搞清楚compileTemplate函数是如何将template编译成render函数的。demo代码如下: <template></template>import{ ref }from"vue";constmsgList =ref([ {id:1,value:"", }, {id:2,value:"", }, {id:3,value:"", }, ...
使用render函数定义递归组件 可以使用render函数递归渲染组件并引用组件自身。例如: exportdefault{name:'MyComponent',props:{name:String,children:Array},render(){returnh('div',[h('div',this.name),this.children&&h('div',this.children.map(child=>{returnh(MyComponent,{props:child})}))])}} 5. ...