工作记录
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页面,生成指定的目录静态页面,访问路由和方式不发生变化