vue 問題整合

vue 問題整合

本文主要整合了自己在平常開發過程中遇到的一些vue相關的問題的總結

---

2020/4/19 add生命週期鉤子函數

---

2020/4/20 add混入

---

2020/4/21 add 環境變量

---

2020/4/22 add 動態組件component

---

動態組件 component

component

渲染一個“元組件”爲動態組件。依 is 的值，來決定哪個組件被渲染。
更多的可以參考我在github上的項目：vue_prac

process.env

vue項目使用.env文件配置全局環境變量

只需要記住以下幾點：(更加詳細的可以參考上面的references)

• 無需專門手動控制加載哪個文件，嚴格命名
• 本地運行加載env.development

混入

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項

當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合併”。

比如，數據對象在內部會進行遞歸合併，並在發生衝突時以組件數據優先。

混入

created和mounted生命週期函數的區別

vue中created鉤子函數與mounted鉤子函數的使用區別

created

在實例創建完成後被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)， 屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

=====>
模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的

mounted

el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

=====>
mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的

computed 計算屬性

通常來講計算屬性會在初級面試中和methods進行對比，計算屬性更加的"智能"，它總是根據它依賴的值的變化而變化，因此也基於這個原因，爲了避免出現死循環，通常不建議在computed計算屬性中修改data中的值

template標籤的使用

官方的解釋中：

一個字符串模板作爲 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發插槽。

也就是說個人覺得可以認爲是在標籤裏面又插進來一個模版。

可以首先參考這篇文章：

關於template標籤用法總結(含vue中的用法總結)

Vue中的template標籤的使用和在template標籤上使用v-for

vuex使用

關於vuex的討論已經是老生常談了，但因爲好久不用未免生疏，個人覺得理解起來一定要從原理入手

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jBSZNNdH-1588678861327)(http://vuex.vuejs.org/vuex.png)]

state===>獲取狀態

mapState不同用法

// 在單獨構建的版本中輔助函數爲 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,

    // 傳字符串參數 'count' 等同於 `state => state.count`
    countAlias: 'count',

    // 爲了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
// 當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。
computed: mapState([
  // 映射 this.count 爲 store.state.count
  'count'
])
// 而下面這段代碼的意思是：b:state=>state.a.b
...mapState('a', ['b']),

getter===>類似於computed計算屬性 依賴於state的變化

mutation===>
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。

// mutations必須是同步函數
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
// 你可以在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（需要在根節點注入 store）。

action===>
Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意異步操作。

vue清理console

references：

vue-cli – build時自動清除console

babel-plugin-transform-remove-console