學習vue基礎知識（四）

vue的更新隊列

將同一個事件循環內的全部數據操做進行和並 而後統一更新並非數據修改一次就更新一次

Vue.use() 全局註冊

自動執行引入模塊內部的install方法install 方法通常作的是全局註冊組件

雙向數據綁定

v-model 使用場景 1.表單元素上 2.組件上在組件使用v-model 提供可一個叫 value 自定義屬性 提供了一個叫 input 的自定義事件

事件修飾符

將使用事件的方法進行簡化

前端效率優化

分析項目項目須要優化的地方

分析引入文件的大小 ：webpack-bundle-analyzer

1. 下載安裝npm install webpack-bundle-analyzer --save-dev

2. vue.config.js 配置

module.export:{
 ...
 chainwebpack:(config)=>{
   ....
   if (process.env.NODE_ENV === 'production') {
     if (process.env.npm_config_report) {
       config
         .plugin('webpack-bundle-analyzer')
         .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
         .end();
     }
   } else {
   }
 }
}

3. 在package.json 中配置分析指令

{
 ...
 "script":{
     "report": "npm_config_report=true npm run build"
 }
}

4.經過命令使用

npm run report

lighthouse 檢測一個網頁運行效率

1. 下載安裝

npm install lighthouse -g 

2. 使用

lighthouse 要檢測的網址 --view