工作記錄

---

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頁面，生成指定的目錄靜態頁面，訪問路由和方式不發生變化

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。