企业官网建设流程全解析

cms做淘宝客网站,网站建设与管理的主要内容,免费模板下载网站推荐,小门店做网站render函数 render函数是Vue提供的、能直接用JavaScript操作虚拟DOM的核心入口#xff1b;日常写的template模板里的HTML结构#xff0c;Vue会自动编译成render函数#xff0c;再执行生成虚拟DOM节点#xff0c;最终渲染为真实DOM。 手动编写render函数#xff0c;会省去V…render函数render函数是Vue提供的、能直接用JavaScript操作虚拟DOM的核心入口日常写的template模板里的HTML结构Vue会自动编译成render函数再执行生成虚拟DOM节点最终渲染为真实DOM。手动编写render函数会省去Vue的模板编译步骤直接通过JS生成虚拟DOM并渲染成真实DOM更灵活也更高效render函数的核心是createElement常简写h方法调用该方法可根据配置的参数创建并返回对应的虚拟DOM节点VNoderender函数最终会把这个VNode返回给Vue由Vue完成后续的真实DOM渲染工作。createElement是render函数内创建虚拟节点的核心工具通过配置它的三个核心参数能实现原生标签/自定义组件的创建、标签属性与事件的绑定、子节点/内部内容的嵌套多个节点可通过容器节点包裹、以数组形式作为子节点实现批量创建满足复杂DOM结构的渲染需求。首先Vue里所有模板语法底层最终都会被编译成render函数执行后生成VNode再渲染成真实DOM模板只是给咱们用的快捷语法糖render才是底层核心。然后核心的createElement简写h函数三个参数是关键第一个参数是要创建的节点原生标签写标签名字符串自定义组件直接传组件名第二个参数是配置对象标签上的所有属性、事件都在这配比如给原生标签绑属性用domProps绑事件用on给自定义组件传props就直接写props配置项第三个参数是标签内部的内容或子节点容器标签的文本、子标签放这自闭合的比如input不用传第三个参数。接下来render函数里实现常见功能的核心写法做条件渲染就用JS的if/else循环渲染就用数组的map方法遍历生成节点实现双向绑定的话就是给input用domProps绑定value值再用on绑定input事件通过$emit派发input事件把最新值传给父组件这就是v-model的底层逻辑。还有几个关键细节配置对象里的on是专门绑定事件的不管原生标签还是组件的事件都在这写render函数里的this指向组件实例但普通事件回调里this会丢失要提前存self this另外组件的props只是接收父组件的值要展示在原生标签上得用domProps把值赋给原生属性。最后render函数的使用场景日常95%的业务用模板就够了直观又快只有遇到模板搞不定的情况比如动态渲染不同组件、写高阶组件、做自定义渲染逻辑才需要手写render函数它是进阶技能不用急着吃透。另外区分两个容易混的点给自定义组件传参用配置里的props项给原生DOM标签设属性用domProps项createElement第二个参数是标签上的配置第三个是标签内部的内容别搞反了。