Vue 中 render 函数有点意思

Vue中的render函数有点意思以前好评文章的更多分类，也整理了很多我的文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。我们知道Vue模板非常强大，基本可以完成我们日常开发的所有任务。但是，在某些用例中，例如根据输入或插槽值创建动态组件，渲染函数比模板更好。render函数用过React开发的应该很熟悉，因为React组件是用JSX和render函数构建的。虽然Vue的渲染函数也可以用JSX来写，但是这里我们使用原生JS的方式，因为这样可以更容易的理解Vue的组件系统的一些基础知识。值得注意的是，Vue的模板在编译时实际上会被解析为渲染函数表示。模板只是在渲染函数之上提供了一个方便且熟悉的语法糖。render函数虽然功能更强大，但是render函数的可读性较差，使用相对较少。创建组件具有渲染功能的组件没有模板标签或属性。相反，该组件定义了一个名为render的函数，该函数接受一个reateElement(renderElement:String|Component,definition:Object,children:String|Array)参数（由于某些原因，由于JSX，通常别名为h）并返回使用创建的元素该功能，其他一切保持不变，例如：exportdefault{data(){return{isRed:true}},/***///render中的渲染结果等同于上面的render(h){returnh('div',{'class':{'is-red':this.isRed}},[h('p','Thisisarendercase')])}}如何在render函数PresentationdirectivesVue模板中有各种便利向模板添加基本逻辑和绑定功能的函数，例如v-if、v-for、v-moel指令等。这些指令不能在render函数中使用。相反，它是用纯JS实现的，这对于大多数指令来说也相对简单。v-ifv-if很容易在纯JS中实现，只需在createElement调用周围使用if(expr)语句即可。v-forv-for可以使用for-of、Array.map、Array.filter等任何JS方法来实现。我们可以将它们以非常有趣的方式组合起来，以实现过滤或状态切片而无需计算属性。比如下面的Vue模板代码可以使用下面的render函数来实现上面的effect:render(h){returnh('ul',this.pod.map(pea=>h('li',pea.name)));}v-model我们知道v-model只是绑定attribute和value语法糖，在输入事件触发时设置data属性。但是render函数中并没有这样的简写，需要我们自己实现。假设，在Vue中，我们有如下结构："myBoundProperty=$event.target.value"/>在render函数中，上面的代码可以这样实现：render(h){returnh('input',{domProps:{value:this.myBoundProperty},on:{input:e=>{this.myBoundProperty=e.target.value}}})}v-bindattribute和property这两种类型的绑定放在元素定义中，如arttrs、props和domProps(值和innerHTML的东西）。render(h){returnh('div',{attrs:{//id:this.myCustomId},props:{//someProp:this.someonePutSomethingHere},domProps:{//value:this.somethingElse}});}需要注意的是class和style的绑定是在定义的根部直接处理的，而不是像attrs、props或domProps那样处理。render(h){returnh('div',{//"class"是JS中的保留关键字，所以必须加引号。'class':{myClass:true,theirClass:false},style:{backgroundColor:'green'}});}v-on也直接添加到元素定义中，用于事件处理程序ondefinitionrender(h){returnh('div',{on:{click(e){console.log('Igotclicked!')}}});}事件修饰符可以在处理程序内部实现：.stop->e.stopPropagation()。防止->e.preventDefault().self->if(e.target!==e.currentTarget)returnkeyboardmodifier.[TARGET_KEY_CODE]->if(event.keyCode!==TARGET_KEY_CODE)return.[MODIFIER]->if(!event.MODIFIERKey)returnspecialpropertySlots可以通过this.$slots访问作为createElement()节点数组的插槽。作用域插槽作为返回createElement()节点数组的函数存储在this.$scopedSlots[scope](props:object)中。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://vuejsbook.com/introdu...交流文章每周更新。可以微信搜索“大千世界”立即阅读更新（比博文早一两篇），本文在GitHubhttps://github.com/qq449245884/xiaozhi已收录，本人已整理出很多我的文件。欢迎star和改进。可以参考考点面试。另外，关注公众号，后台会回复福利，看到福利就知道了。