一. 關于局部組件組成的三個部分（template, script, style）

1. template? =>? 組件的模板結構? （必選）

• 每個組件對應的模板結構，需要定義到template節點中

<template><!-- 當前組件的dom結構，需要定義到template結構的內部 -->
</template>

• template中使用的指令

<template><!-- 【1.內容渲染指令】 --><span v-text="msg"></span><span>{{msg}}</span><div v-html="html"></div><!-- 【2.屬性綁定指令】 --><img v-bind:src="imageSrc"><!-- 【3.雙向指令綁定指令】 --><select v-model=""></select><!-- 【4.循環渲染指令】 --><div v-for="(item, index) in items"></div><!-- 【5.條件渲染】 --><div v-if="Math.random() > 0.5">Now you see me</div><div v-else-if="type === 'B'"></div><div v-else>Now you don't</div>
</template>

• template定義根節點

注：vue 2.x版本中，<template>節點內dom結構僅支持單個根節點；但在vue 3.x版本中，支持多個根節點

1. script? =>? 組件的javascript行為? （可選）

• script中的data節點（可以定義當前組件渲染期間需要用到的數據對象；data是一個函數）
• script中的methods節點（可以定義組件中的事件處理函數）

1. style? =>? 組件的樣式? （可選）

• style的lang屬性支持可選值css，less，sass，scss
• 當使用less或sass時，要先安裝less或sass依賴，再設置lang的屬性值為less或sass
• scss是sass3.0引入的語法，可以理解scss是sass的一個升級版本，彌補sass和css之間的鴻溝
• 合理使用scoped，因為使用scoped可以讓樣式只對當前組件生效

二. 關于生命周期

• beforeCreate
• created
• beforeMounted
• mounted
• beforeUpdate
• updated
• beforeDestory
• destoryed

created和mounted的區別：created在模板渲染成html前調用，mounted在模板渲染成html后調用

三. 關于父子組件的傳值

封裝出來的通用組件叫子組件，引用通用組件的界面叫做父組件，組件的封裝必須高性能低耦合

1. 父組件向子組件傳參用props

<!-- 父組件 -->
<template><Child :articleList="articleList"></Child>
</template><!-- 子組件 -->
<template><div><ul><li v-for="(value,index) in articleList" :key="index">{{value}}</li></ul></div>
</template><script>export default {name: "Child",props: {articleList: {type: array,default: function () {return []}    }},//接收父組件傳來的數據articleList}
</script>

2. 子組件向父組件傳參用emit

<!-- 父組件 -->
<template><common-dialog @pushId="getId"></common-dialog>
</template>
<script>methods: {getId (id) {}}
</script><!-- 子組件 -->
<template><div><input type="button" @click="emitIndex(id)" value="向父組件發送數據"></div>
</template>
<script>export default {methods: {emitIndex (id) {this.$emit('pushId', id)}}}
</script>

四. 關于computed與watch

1. computed與watch的區別：

• computed是計算屬性，watch是監聽，監聽data中的數據變化
• computed支持緩存，即當其依賴的屬性值發生變化時，計算屬性會重新計算，反之則使用緩存中的屬性值；watch不支持緩存，當對應屬性發生變化的時候，響應執行
• computed不支持異步，有異步操作時無法監聽數據變化；watch支持異步

2. computed與watch的使用場景

• computed的使用

<template><div>{{ changewords }}</div>
</template>
<script>export default {data () {myname: 'aBcDEf'},computed: {changewords(){return this.myname.substring(0,1).toUpperCase()}}   }
</script>

• watch的使用

<template><div><p>FullName: {{fullName}}</p><p>FirstName: <input type="text" v-model="firstName"></p></div>
</template>
<script>export default{data () {firstName: 'Dawei',lastName: 'Lou',fullName: ''},watch: {firstName(newName, oldName) {this.fullName = newName + ' ' + this.lastName;}// firstName: {//     handler(newName, oldName) {//        this.fullName = newName + ' ' + this.lastName;//     },//     immediate: true// }}}
</script>

五. 關于mixin

局部混入中mixin的文件就是一個對象，這個對象可以包含vue組件的一些常見的配置，包括data，methods，生命周期的鉤子函數等等。

不同組件中的mixin是相互獨立的。

• mixin的使用

<!-- 引用mixins的文件 -->
<script>import queryList from "@/common/mixin/queryList";export default{mixins: [queryList]}
</script><!-- mixins的文件 -->
export const mixins = {data() {return {};},computed: {},created() {},mounted() {},methods: {},
};

六. 關于slot的使用

<!-- 子組件使用插槽slot   Link.vue-->
<template><a :href="href" rel="external nofollow"  class="link"><!-- 留個插槽，外界傳入內容放置在這里 --><slot></slot></a>
</template><!-- 父組件調用子組件 -->
<template><div class="app"><Link href="https://baidu.com" rel="external nofollow" > 百度</Link><Link href="https://google.com" rel="external nofollow"  style="margin-top: 10px"><!-- 這里允許放置任意的內容，包括字符串和標簽 --><span>Icon</span>谷歌</Link</Link></div>
</template>

七. 關于vuex

vuex的五個組成部分：state，mulations，action，getters，modules

• state：定義了應用程序的狀態，即要管理的數據

const store = new Vuex.Store({state: {count: 0}
})

• getters：用于獲取state中的狀態，類似vue組件中的計算屬性

const store = new Vuex.Store({state: {count: 0},getters: {doubleCount(state) {return state.count * 2}}
})

• mulations：修改state的數據

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++},add(state, payload) {state.count += payload}}
})

• action：用于異步操作和提交mulations，在actions中可以進行任何異步操作，最后再提交到mulations中同步修改state

const store = new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++}},actions: {incrementAsync(context) {setTimeout(() => {context.commit('increment')}, 1000)}}
})

• modules：用于將store分割成模塊，每個模塊都擁有自己的state, getters, mulations, action和子模塊，以便提高應用程序的可維護性

const store = new Vuex.Store({modules: {cart: {state: {items: []},mutations: {addItem(state, item) {state.items.push(item)}},actions: {addAsyncItem(context, item) {setTimeout(() => {context.commit('addItem', item)}, 1000)}}}}
})