工作記錄

---

1.修飾符及其使用

最近項(xiàng)目上看到這樣的代碼：
child組件隱藏模態(tài)框觸發(fā)以下事件

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

查閱資料發(fā)現(xiàn)，這是以修飾符的方式實(shí)現(xiàn)了“雙向綁定”，避免了真正的雙向綁定會(huì)帶來維護(hù)上的問題。
父組件可以通過下面實(shí)現(xiàn)綁定：

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

為方便起見，可以縮寫如下，也就是 sync 修飾符

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

2.單頁面預(yù)加載

vue生成的單頁應(yīng)用，極大優(yōu)化了開發(fā)，但是也帶來了問題，比如seo。SSR又太過顛覆性。
這樣的條件下，部分頁面做預(yù)加載，剩下的做單頁面就是一個(gè)很不錯(cuò)的選擇了。
而prerender-api-plugin就適用于這樣的場(chǎng)景。
基本使用：

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// 需要預(yù)加載的路由routes: [ '/', '/about', '/some/deep/nested/route' ],renderer: new Renderer({inject: {foo: 'bar'},// debug下設(shè)置為true，渲染時(shí)打開瀏覽器headless: false,// 需要和main.js 下mounted 里面的 document.dispatchEvent(new Event('render-event')) 時(shí)間名一致renderAfterDocumentEvent: 'render-event'})})] }

源碼解讀，大致是通過chromie無頭瀏覽器遍歷你的routes頁面，生成指定的目錄靜態(tài)頁面，訪問路由和方式不發(fā)生變化

總結(jié)

以上是生活随笔為你收集整理的vue项目积累的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。