fre.js 介绍
介绍：
其实，free 是一部动漫名，也是我最喜欢的番没有之一，haru 是我儿子！?
安装：
yarn add fre -S
使用：
import{ observe,html,mount } from './src'
function counter() {
const data = observe({
count: 0
})
return html`
<div>
<h1>${data.count}</h1>
<button onclick=${() => {data.count++}}>+</button>
<button onclick=${() => {data.count--}}>-</button>
</div>
`
}
mount(html`<${counter} />`,document.body)
Proxy：
const data = observe({
count: 0
})
会 生成 一个 全递归的 Proxy 对象，会 自动 去observe，data 更新会 自动 触发 rerender，这个更新是准确
fre 提供 jsX-like 的 tagged template 语法，浏览器原生 支持 ，无需编译
建议根据场景选择，webpack 下 jsX 比较合适，浏览器环境肯定要 tagged template（如后端语言的模板引擎）
html`
<div>
<h1>${data.count}</h1>
<button onclick=${() => {data.count++}}>+</button>
<button onclick=${() => {data.count--}}>-</button>
</div>
`
和 jsx 一样，最终会被转换成 h 函数 ，进而 生成 vdom tree
性能 不会差，可以粗略理解为 vue 的 compile 过程，如果使用 jsx ，将直接省略这个过程
hooks API
其实这里应该叫做functionalCompoent比较合适，一种新的组件化方案。如下，fre 和 vue、react 不同，fre 的组件是无自身状态、可复用的 标记 代码 块
只有根组件拥有全局状态，但这不妨碍你进行多次 render 创造多个根组件
import{ mount,observe } from 'fre'
function counter() {
const data = observe({
count: 0
})
return html`
<div>
${html`<${count} count=${data.count} />`}
<button onclick=${() => {data.count++}}>+</button>
<button onclick=${() => {data.count--}}>-</button>
</div>
`
}
function count(props){
return html`
<h1>${props.count}</h1>
`
}
mount(html`<${counter} />`,document.body)
jsX
默 认也 对外暴露 了 h 函数 ，可以选用 jsX
import { h } from 'fre'
webpack 需配置：
{
"plugins": [
["transform-react-jsx",{ "pragma":"Fre.h" }]
]
}
网站地址 : https://fre.js.org
GitHub: https://github.com/132yse/fre
网站描述: 一个 小而美的前端 MVVM 框架
fre.js官方网站
官方网站： https://fre.js.org
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。