vue 高级用法vue 进阶用法优势一：模板化插槽 - 模板更加灵活默认插槽组件外部维护参数以及结构，内部安排放

vue 进阶用法

优势一：模板化

插槽 - 模板更加灵活

默认插槽

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

具名插槽

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

作用域插槽

可以接收props (scope - slot)

模板数据的二次加工上

过滤器

    <div>{{ timer | format }}</div>
    
    ...
    filters:{
        //声明过滤器
        format(time){
            // filter过滤器是没有this ，或者说this不指向实例（指向全局）
            return time
        }
    }

v-html - 指令化

jsx

    <MyComp></MyComp>
    
    //MyComp render和template不能共存
    data(){
        return {
            options:[{
                value:1,
                text:'1'
            },{
                value:2,
                text:'2'
            }]
        }
    }
    render(h){
        //手写节点
        const myNode=(
            <p>{ this.myParam > 0? '1':'2' }</p>
        )
        //返回值是个node => script(return node)
        return (
        <ul > 
        {
            //jsx实现数组遍历
            this.option.map((item, index)=>{
                return ( 
                    //<li>{ item.text }</li>
                    <content
                        item={item}
                        value={item.value}
                        key={index}
                        onClick={this.handleClick}
                    >{ myNode }</content>
                )
            })
        } 
        </ul> )
    }

组件

优势二：组件化

传统模板化组件

    Vue.component('component',{
        template : '<h1>hahaha</h1>'
    })
    
    //创建实例
    new Vue({
        el:'#app'
    })

混入 mixin

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

合并策略

a. data冲突时，以组件主体优先

b. 声明周期钩子会先后执行，先mixin后主体

c. 递归合并，递归合并优先级仍以主体优先

1. 缺点：数据来源不太明确，后期维护成本高 -> 定位问题等

继承拓展extends

1. 应用：拓展独立逻辑

合并策略 - 与mixin相同 a. 合并优先级上 mixin > extends

b. 回调优先级 extends > mixin

整体拓展 - extend

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

插件 Vue.use(VueRouter)

1. 注册外部插件，作为整体实例能力的补充

    export default {
        install:(Vue, options)=>{
        
        },
        Vue.directive('my-directive',{
            bind(el, binding, vnode){},
            inserted(el, binding,vnode){},
            update(el, binding, vnode, oldVnode){},
            componentUpdated(el, binding, vnode){},
            unbind(el, binding, vnode){}
        });
        Vue.mixin({
            created(){
                console.log('plugin mixin created');
            }
            
        });
        Vue.prototype.$yyMethod = function(options){
        
        };
    }

1. 自动做除重，防止多次重复注册相同插件
1. 编写插件
a. 外部使用Vue.use(myPlugin,options)

b. 内部默认调用install方法

vue 高级用法