vue项目积累

工作记录

---

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.PuppeteerRenderer
 
module.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页面，生成指定的目录静态页面，访问路由和方式不发生变化