Vue进阶

vue 进阶用法

优势一：模板化

插槽 - 模板更加灵活

默认插槽

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

具名插槽

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

作用域插槽

可以接受props（scope-slot）

模板数据的二次加工上

过滤器

    {{ timer | format }}

v-html …… 指令化

jsx

组件

优势二： 组件化

传统模板化组件

    // 注册
    Vue.component('component', {
        template: '<h2>Essential Links</h2>'
    })

    // 创建实例
    new Vue({
        el: '#app'
    })

混入 mixin

• 1. 应用：抽离公共逻辑（逻辑相同，但是模板不一样）

面试题：
合并策略
a. data冲突时，以组件主体为优先
b. 生命周期钩子会先后执行，先mixin后主体
c. 递归合并，递归合并优先级仍以主体优先

• 2. 缺点：数据来源不太明确

继承拓展extends

• 1. 应用：拓展独立逻辑

面试题：
合并策略 - 与mixin相同
a. 合并优先级上 mixin > extends
b. 回调优先级 extends > mixin

整体拓展 —— extend

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

插件 - Vue.use(VueRouter)

• 1. 注册外部插件，作为整体实例能力的补充
• 2. 自动做除重，防止多次重复注册相同插件
• 3. 编写插件
     a. 外部使用Vue.use(myPlugin, options)
     b. 内部默认调用install