vue进阶用法

特征一：模板化

插槽

默认插槽

组件外部维护参数以及结构，内部安排位置

具名插槽

以name标识插槽的身份，从而在组件内部做到可区分

作用域插槽

slot-scope（2.6 before）
v-slot(after)
外部做结构描述勾勒，内部做传参

模板数据的二次加工

watch、computed => 相应流过于复杂（computed赋值）
方案一：函数 - 独立、管道 / 无法响应式
方案二：v-html
方案三：过滤器 - 追问：无上下文
```
 {{ time | format }}
```

jsx 更自由的基于js书写

1. v-model 如何实现 => 双向绑定 => 外层bind:value，内层@input
1. 写jsx的好处、劣势 => vue的编译路径：template->render->vm.render->vm.render() diff => 可以使用性能优化方案

组件化

特征二：组件化

传统模板化

    Vue.component('component', {
        template: '组件'
    })
    new Vue({
        el: '#app'
    })
    // functional components

1. 抽象复用
1. 精简 & 聚合

混入mixin - 逻辑混入

1. 应用：抽离公共逻辑（逻辑相同，模板不同，可用mixin）
1. 缺点：数据来源不明确
1. 合并策略
  a. 递归合并
  b. data合并冲突时，以组件优先
  c. 生命周期回调函数不会覆盖，会先后执行，优先级为先mixin后组件

继承拓展extends - 逻辑拓展

1. 应用：拓展独立逻辑
1. 与mixin的区别，传值mixin为数组
1. 合并策略
  a. 同mixin，也是递归合并
  b. 合并优先级组件 > mixin > extends
  c. 回调优先级 extends > mixin

整体拓展类extend

从预定义的配置中拓展出来一个独立的配置项，进行合并

Vue.use - 插件

1. 注册外部插件，作为整体实例的补充
1. 会除重，不会重复注册
1. 手写插件
  a. 外部使用Vue.use(myPlugin, options)
  b. 默认调用的是内部的install方法

组件的高级引用

1. 递归组件 - es6 vue-tree
1. 动态组件 -
1. 异步组件 - router

nextTick keep-alive
route history hash 导航收尾

vue-cli详解

vue init 包含几个模板
webpack miniwebpack

vue cli 干了什么事情？
1、现在本地找模板，如果有则使用本地，如果没有则在远端找 remote-template
2、拉取模板

vue-init 源码读取

执行 generate：

获取模板配置
初始化 ms，用来后续渲染
做了一个模板的注册，handlebars
询问主流程
渲染模板文件
after 执行

docker
开发者一键部署

FY-7216 8-vue基础知识&vue 进阶&vue-cli