工作记录

---

1.修饰符及其使用

最近项目上看到这样的代码：
child组件隐藏模态框触发以下事件

	closeHandler () {this.$emit('update:open', false)},

查阅资料发现，这是以修饰符的方式实现了“双向绑定”，避免了真正的双向绑定会带来维护上的问题。
父组件可以通过下面实现绑定：

	<parent :open="open"v-on:update:open="open = $event"/>

为方便起见，可以缩写如下，也就是 sync 修饰符

<parent :open.sync="open" />

2.单页面预加载

vue生成的单页应用，极大优化了开发，但是也带来了问题，比如seo。SSR又太过颠覆性。
这样的条件下，部分页面做预加载，剩下的做单页面就是一个很不错的选择了。
而prerender-api-plugin就适用于这样的场景。
基本使用：

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderermodule.exports = {plugins: [...new PrerenderSPAPlugin({// webpack打包后的路径staticDir: path.join(__dirname, 'dist'),	// vue-cli 2 需要写成 ..dist// 需要预加载的路由routes: [ '/', '/about', '/some/deep/nested/route' ],renderer: new Renderer({inject: {foo: 'bar'},// debug下设置为true，渲染时打开浏览器headless: false,// 需要和main.js 下mounted 里面的 document.dispatchEvent(new Event('render-event')) 时间名一致renderAfterDocumentEvent: 'render-event'})})]
}

源码解读，大致是通过chromie无头浏览器遍历你的routes页面，生成指定的目录静态页面，访问路由和方式不发生变化