网站备案 主办单位,创意设计师,界面简洁的网站,制作人是干嘛的文章目录 前言一、三种编程风格1.template2.jsx/tsx3.函数式编写风格 二、函数式编程1.使用场景2.参数3.例子3.render渲染函数 总结 前言
本文主要记录vue3中的函数式编程以及其他编程风格的简介 一、三种编程风格
1.template
Vue 使用一种基于 HTML 的模板语法#xff0c;… 文章目录 前言一、三种编程风格1.template2.jsx/tsx3.函数式编写风格 二、函数式编程1.使用场景2.参数3.例子3.render渲染函数 总结 前言
本文主要记录vue3中的函数式编程以及其他编程风格的简介 一、三种编程风格
1.template
Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析。 也就是HTML的书写方式。 templatedivtemplate v-ifreversediv classbarBar DOM.../divdiv classfooFoo DOM.../div/templatetemplate v-elsediv classfooFoo DOM.../divdiv classbarBar DOM.../div/template/div/template2.jsx/tsx
这是一种DOM标签和JS混用的方式对DOM操作更加灵活发挥出JS的完全编程能力但是需要手动实现渲染优化Vue在模板语法中做的优化在此方式中不适用 如根据 props 上的 reverse 属性来决定是否要调换两块内容的渲染顺序。 jsx const renderContent () {const Content [div classfooFoo DOM.../div,div classbarBar DOM.../div,];if (props.reverse) {Content.reverse();}return div{Content}/div;}template templatedivtemplate v-ifreversediv classbarBar DOM.../divdiv classfooFoo DOM.../div/templatetemplate v-elsediv classfooFoo DOM.../divdiv classbarBar DOM.../div/template/div/template3.函数式编写风格
vue中提供了h函数,h 函数是一个重载函数支持多种调用方式但在内部会处理为符合 createVNode 函数的入参然后交给 createVNode 来创建虚拟 DOM。在此可以利用vue3提供的render函数将此虚拟DOM创建成真实DOM并挂载到指定结点。 可以直接跳过模板的编译过程 parser函数 - ast抽象语法树 - transform - js 可描述api - generate生成 - render divspan1/span/div转换函数式为 let render () {return h(div),{},[h(span),{},1]}二、函数式编程
1.使用场景
封装一些小组件弹窗、按钮等
2.参数
h 函数有三个参数
第一个是创建的结点第二个是节点属性第三个是节点内容
3.例子
代码如下示例
interface Props {type: success | error
}
const Btn (props:Props,ctx:any) {return h(button,{style: {color:props.type success? green: red},onClick:(){ctx.emit(click,smz)console.log(点击了按钮,props.type)}},ctx.slots.default())
}template
Btn typesuccess编辑/BtnBtn typeerror删除/Btn
/template3.render渲染函数
该函数由vue内部提供可以将标签或者虚拟DOM转换成真实DOM并挂载到指定结点 该函数接收两个参数
标签或虚拟dom 当该参数为null时会将此组件移除挂载结点 例子提示组件 export const message (message, duration 2000) {const handleDestroy () {render(null,document.body)}const vNode h(messageComponent,{style:{width: 200px,height: 100px,border: 2px solid,float: left,position: relative,left: 50%,margin-left: -50px},message,duration,destroy:handleDestroy},message)render(vNode,document.body);(function () {setTimeout(()render(null,document.body),duration)})()
}使用直接以API的形式调用 const messages () {message(这是一个提示窗)
}总结
以上就是三种编码风格以及vue3中h函数和render函数的简单实用。
