# 2019.06.24
[文章] 《微前端技术如何落地》：https://mp.weixin.qq.com/s/I2Y4N0hwugNV2d6Zk6AdMg (opens new window)
[文章] 最近 Vue 社区，因为新的 RFC《Vue3.0 Function API 的 RFC》 (opens new window) 展开了多次激烈的争论：https://news.ycombinator.com/item?id=20237568 (opens new window)
[类库] vue-function-api 通过这个类库可以提前享受到 Function API：https://github.com/liximomo/vue-function-api (opens new window)
[工具] mitmproxy 一个开源的抓包工具，支持 Terminal 和交互界面，相比于 Charles 它使用起来很简单：https://github.com/mitmproxy/mitmproxy/ (opens new window)
# 配图 - 微前端技术如何落地
# 配图 - mitmproxy
# 示例 - vue-function-api
import Vue from 'vue';
import { plugin, value, computed, watch, onMounted } from 'vue-function-api'
Vue.use(plugin);
new Vue({
template: `
<div>
<span>count is {{ count }}</span>
<span>plusOne is {{ plusOne }}</span>
<button @click="increment">count++</button>
</div>
`,
setup() {
// reactive state
const count = value(0);
// computed state
const plusOne = computed(() => count.value + 1);
// method
const increment = () => {
count.value++;
};
// watch
watch(
() => count.value * 2,
val => {
console.log(`count * 2 is ${val}`);
}
);
// lifecycle
onMounted(() => {
console.log(`mounted`);
});
// expose bindings on render context
return {
count,
plusOne,
increment,
};
},
}).$mount('#app');