vue進(jìn)階用法

特征一：模板化

插槽

默認(rèn)插槽

組件外部維護(hù)參數(shù)以及結(jié)構(gòu)，內(nèi)部安排位置

具名插槽

以name標(biāo)識插槽的身份，從而在組件內(nèi)部做到可區(qū)分

作用域插槽

slot-scope（2.6 before）
v-slot(after)
外部做結(jié)構(gòu)描述勾勒，內(nèi)部做傳參

模板數(shù)據(jù)的二次加工

1. watch、computed => 相應(yīng)流過于復(fù)雜（computed賦值）
2. 方案一：函數(shù) - 獨(dú)立、管道 / 無法響應(yīng)式
   方案二：v-html
   方案三：過濾器 - 追問：無上下文

    {{ time | format }}
   

jsx 更自由的基于js書寫

• 1. v-model 如何實(shí)現(xiàn) => 雙向綁定 => 外層bind:value，內(nèi)層@input
• 2. 寫jsx的好處、劣勢 => vue的編譯路徑：template->render->vm.render->vm.render() diff => 可以使用性能優(yōu)化方案

組件化

特征二：組件化

傳統(tǒng)模板化

    Vue.component('component', {
        template: '<h1>組件</h1>'
    })
    new Vue({
        el: '#app'
    })
    // functional components

• 1. 抽象復(fù)用
• 2. 精簡 & 聚合

混入mixin - 邏輯混入

• 1. 應(yīng)用： 抽離公共邏輯（邏輯相同，模板不同，可用mixin）
• 2. 缺點(diǎn)： 數(shù)據(jù)來源不明確
• 3. 合并策略
     a. 遞歸合并
     b. data合并沖突時(shí)，以組件優(yōu)先
     c. 生命周期回調(diào)函數(shù)不會覆蓋，會先后執(zhí)行，優(yōu)先級為先mixin后組件

繼承拓展extends - 邏輯拓展

• 1. 應(yīng)用： 拓展獨(dú)立邏輯
• 2. 與mixin的區(qū)別，傳值mixin為數(shù)組
• 3. 合并策略
     a. 同mixin，也是遞歸合并
     b. 合并優(yōu)先級 組件 > mixin > extends
     c. 回調(diào)優(yōu)先級 extends > mixin

整體拓展類extend

從預(yù)定義的配置中拓展出來一個(gè)獨(dú)立的配置項(xiàng)，進(jìn)行合并

Vue.use - 插件

• 1. 注冊外部插件，作為整體實(shí)例的補(bǔ)充
• 2. 會除重，不會重復(fù)注冊
• 3. 手寫插件
     a. 外部使用Vue.use(myPlugin, options)
     b. 默認(rèn)調(diào)用的是內(nèi)部的install方法

組件的高級引用

• 1. 遞歸組件 - es6 vue-tree
• 2. 動(dòng)態(tài)組件 - <component :is='name'></component>
• 3. 異步組件 - router

nextTick keep-alive
route history hash 導(dǎo)航收尾

vue-cli詳解

vue init 包含幾個(gè)模板
webpack miniwebpack

vue cli 干了什么事情？
1、現(xiàn)在本地找模板，如果有則使用本地，如果沒有則在遠(yuǎn)端找 remote-template
2、拉取模板

vue-init 源碼讀取

執(zhí)行 generate：

1. 獲取模板配置
2. 初始化 ms，用來后續(xù)渲染
3. 做了一個(gè)模板的注冊，handlebars
4. 詢問主流程
5. 渲染模板文件
6. after 執(zhí)行

docker
開發(fā)者一鍵部署