vue知識隨筆

2021-10-06 09:21:48 字數 2135 閱讀 3795

很多時候 , 、store.dispatch('switch_dialog') 這種寫法又長又臭 , 很不方便 , 我們沒使用 vuex 的時候 , 獲取乙個狀態只需要 this.show , 執行乙個方法只需要 this.switch_dialog 就行了 , 使用 vuex 使寫法變複雜了 ?使用 mapstate、mapgetters、mapactions 就不會這麼複雜了

相當於 :

//  parent.vue

dosomething() ,

// child.vue

mounted(),

// 以上輸出順序為:

// 子元件觸發 mounted 鉤子函式 ...

// 父元件監聽到 mounted 鉤子函式 ...

1.**層面的優化

v-if 和 v-show 區分使用場景

computed 和 watch 區分使用場景

v-for 遍歷必須為 item 新增 key,且避免同時使用 v-if

長列表效能優化

事件的銷毀

資源懶載入

路由懶載入

第三方外掛程式的按需引入

2.webpack 層面的優化

webpack 對進行壓縮

減少 es6 轉為 es5 的冗餘**

提取公共**

提取元件的 css

1.router-link

**不帶引數** 

//name,path都行, 建議用name

帶引數// params傳引數 (類似post)

// 路由配置 path: "/home/:id" 或者 path: "/home:id"

// 不配置path ,第一次可請求,重新整理頁面id會消失

// 配置path,重新整理頁面id會保留

// html 取參 $route.params.id

// script 取參 this.$route.params.id

// query傳引數 (類似get,url後面會顯示引數)

// 路由可不配置

// html 取參 $route.query.id

// script 取參 this.$route.query.id

2.this.$router.push() (函式裡面呼叫)

不帶引數 

this.$router.push('/home')

this.$router.push()

this.$router.push()

query傳參

this.$router.push(})

this.$router.push(})

// html 取參 $route.query.id

// script 取參 this.$route.query.id

2.1 params傳參

this.$router.push(})  // 只能用 name

// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,

// 不配置path ,第一次可請求,重新整理頁面id會消失

// 配置path,重新整理頁面id會保留

// html 取參 $route.params.id

// script 取參 this.$route.params.id

2.2 query和params區別

query類似 get, 跳轉之後頁面 url後面會拼接引數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params重新整理頁面id還在 

params類似 post, 跳轉之後頁面 url後面不會拼接引數 , 但是重新整理頁面id 會消失

3.this.$router.replace() (用法同上,push)

4. this.$router.go(n) ()

vue學習隨筆

1 css與style的物件繫結與陣列繫結 2 v if的key語法 3 v for遍歷物件的三個引數 value key index 4 v for的key就地服用原則 5 v for的優先順序比v if更高 6 單選框的value,多選框的true value與false value 7 表單v...

vue隨筆筆記

el menu item.is active data的資料為tabledate渲染的資料 prop設定 字段 index設定索引值 當設定router模式後index相當於to default active route.path main.js import from element ui vue...

隨筆知識2

1.dom同時支援事件捕獲和事件冒泡,但是事件捕獲先發生。2.傳統事件處理程式指派方法 永遠只執行新新增的 原來的會被覆蓋。被廣泛支援 3.現代事件處理程式指派方法 不會產生覆蓋,新 在舊 後面執行 在舊版本ie上執行有問題 4.處理事件程式返回false的效果 1 click 單選按鈕和複選按鈕框...