疯狂的 Vue3

只用四个函数, 不须要相熟 JavaScript 各种奇怪的常识, 不须要简单的配置, 就能够立即写出比较复杂的前端页面. 一开始我也不置信, 但 Vue3 真的做到了. 而且很神奇的一点是, 在 Vue3 的架构里我发现了很多相似 elixir/erlang 的中央.

createApp

对于母语是 elixir/erlang 的程序员来说, App(lication) 是很相熟的概念: 狭义上值整个虚拟机中的一个根本独立的利用, 广义上指实现了 Application behaviour 的模块. Vue 中的 App 比 elixir/erlang 的更加独立一些, 但实现形式很相似, 只有实现一个对应的回调函数即可.

import { createApp, h } from 'vue'const hello = (props, context) => h('div', null, 'hello vue3')createApp(hello).mount('#app')

等价 html:

<div>hello vue3</div>

App 的回调函数须要的返回值是一个 vnode, 即 vue 中虚构的 html dom元素; 另外这个函数会传入两个参数, 其中 property 即是该 vnode 所接管的属性, 例如 <div id="app"></div> 外面的 id 就是一个属性. context 则提供了一系列该 vnode 可用的 vue 内置办法.

和 elixir/erlang 十分相似的还有: Vue App 能够 mount 和 unmount , erlang application 能够 start 和 stop .

h

在下面的例子里, 咱们应用了 h 函数来发明 vnode, 个别这个函数被称为 "渲染函数". 它能接管三个参数, 别离是: component, attributes 和 slots. 它十分相似 elixir/erlang 里的 GenServer.start(modelue, init_arg, options \\ []).

在下面的例子中, 咱们实际上应用了简略写法去设置 vnode 的内容(slots), 残缺的写法是:

h('div', null, {  default: (props) => 'hello vue3'})

应用残缺写法能够帮咱们在某些组件的指定地位应用自定义的 slot 模板.

resolveComponent

这里咱们应用了根本的组件 div. 对与在第三方库里的其余组件, 就须要先应用 resolveComponent 来寻找对应的组件的具体函数入口. 例如咱们应用 ant-design-vue 的 a-button 组件:

import antd from 'ant-design-vue'import { createApp, h, resolveComponent } from 'vue'const hello = (props, context) => h(resolveComponent('a-button'), null, 'hello vue3')createApp(hello).mount('#app')

等价 html:

<a-button>hello vue3</a-button>

reactive

利用下面三个函数, 咱们曾经能够应用任意的组件发明动态页面, 而 reactive 函数才是 Vue3 真正的魔法所在, 应用它能够很不便地让页面动起来. 再次类比到 elixir/erlang, 咱们晓得过程之间个别不共享数据, 除非应用 ETS 这样的内存数据库. 而 reactive 函数不仅能够帮咱们在vnode 之间共享数据, 还以在数据被更新时立即同步到每个 vnode.

const model = reactive({text: ''})const input = () => h('input', {onInput: (e) => model.text = e.target.value}) // 绑定 onInput 事件, 在有输出时更新 model.textconst show = () => h('p', null, model.text) // 应用 model.text 的值const app = (_p, _c) => h('div', null, [  input(),  show()])createApp(app)  .mount('#app')

等价 html:

<input /><p>这里的内容会随 input 自动更新</p>

留神, 这里的 input 和 show 都须要是函数, 因为其在 model 被更新时都会被反复调用. 如果写成了表达式, 则不会动静更新.

结语

应用以上四个根本函数, 就能够自在地调用和组合第三方组件库, 写出可用的动静前端页面了.