mixin混入

mixin混入:
1.组件data优先级高于mixin data优先级

2. 生命周期函数，先执行mixin里面的，再执行组件里面的

const myMixin={
        data(){
            return{
                number:2,
                count:1
            }
        },
        created() {
            console.log('mixin created');
        },
        methods:{
            handleClick(){
               console.log('mixin handleClick');
            }
        }
    }
    const app = Vue.createApp({
        data(){
            return{
              number:1
            }
        },
        created() {
            console.log('created');
        },
        mixins:[myMixin],
        methods: {
            handleClick(){
               console.log('handleClick');
            }
                
        },
        template:`
            <div>
                <div>{{number}}</div>
                <div>{{count}}</div>
                <button @click="handleClick">增加</button>
            </div>
        `
    });

 const myMixin={
        data(){
            return{
                number:2,
                count:1
            }
        },
        created() {
            console.log('mixin created');
        },
        methods:{
            handleClick(){
               console.log('mixin handleClick');
            }
        }
    }
    const app = Vue.createApp({
        data(){
            return{
              number:1
            }
        },
        created() {
            console.log('created');
        },
        mixins:[myMixin],
        methods: {
            handleClick(){
               console.log('handleClick');
            }
                
        },
        template:`
            <div>
                <div>{{number}}</div>
                <div>{{count}}</div>
                <child />
                <button @click="handleClick">增加</button>
            </div>
        `
    });

全局mixin

app.mixin({
        data(){
            return{
                number:2,
                count:1
            }
        },
        created() {
            console.log('mixin created');
        },
        methods:{
            handleClick(){
               console.log('mixin handleClick');
            }
        }
    }
    )
    app.component('child',{
        //mixins:[myMixin],
        template:
        `
            <div>{{count}}</div>
        `
    });

自定义的属性，组件的属性优先级高于mixin中的

 const myMixin={
        number:1
    }
    const app = Vue.createApp({
        number:2,
        mixins:[myMixin],
        template:`
            <div>
                <div>{{this.$options.number}}</div>
            </div>
        `
    });
    //改变自定义属性优先级
    app.config.optionMergeStrategies.number = (mixinVal,appValue) => {
        return mixinVal ||appValue;
    }
    

自定义指令directive

const app = Vue.createApp({
        number:2,
        template:`
            <div>
                <input v-focus />
            </div>
        `
    });
    app.directive('focus', {
        beforeMount(el) {
            console.log('beforeMount');
        },
        mounted(el) {
            console.log('mounted');
            el.focus();
        },
        beforeUpdate() {
            console.log('beforeUpdated');
        },
    });

const app = Vue.createApp({
        data(){
            return{
                distance:110
            }
        },
        template:`
            <div>
                <div v-pos:left="distance" class="header">
                     <input />
                </div>
            </div>
        `
    });
    app.directive('pos',(el,binding)=>{
        //console.log(binding.arg,'binding');
        el.style[binding.arg]=(binding.value+'px');
    });

app.directive('pos',(el,binding)=>{
        //console.log(binding.arg,'binding');
        el.style[binding.arg]=(binding.value+'px');
    });

等价于

app.directive('pos', {
        
        mounted(el,binding) {
            el.style.top=(binding.value+'px');
        },
        updated(el,binding) {
            el.style.top=(binding.value+'px');
        },
        
    });
    

teleport传送门

<style>
        .area{
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%,-50%);
            width: 200px;
            height: 300px;
            background: green;
        }
        .mask{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: #000;
            opacity: 0.5;
            color: #fff;
            font-size: 100px;
        }
    </style>

<body>
    <div id="root"></div>
    <div id="hello"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return{
                show:false,
                message:'hello',
            }
        },
        methods: {
            handleClick(){
                this.show=!this.show;
            }
        },
        template:`
            <div class="area">
                <button @click="handleClick">按钮</button>
                <teleport to="#hello">
                    <div class="mask" v-show="show">{{message}}</div>
                </teleport>
            </div>
        `
    });
   
   const vm = app.mount("#root");
</script>

render函数

render函数h(标签，标签的属性，标签上的内容)
1.render function:
template -> render -> 虚拟DOM(JS对象)-> 真实DOM -> 展示到页面上

 const app = Vue.createApp({
        
        template:`
            <my-title :level="2">
                hello 
            </my-title>
        `
    });
   app.component('my-title',{
       props:['level'],
       render(){
        const { h }=Vue;
        //虚拟DOM
        //<div>hello</div>
        // {
        //     tagName:'div',
        //     text:hello,
        //     attribution:{}

        // }
        return h('h'+this.level,{},[
            this.$slots.default(),
            h('h4',{},['dell'])
        ]);
       },
    //    template:`
    //    <h1 v-if="level===1"><slot /></h1>
    //    <h2 v-if="level===2"><slot /></h2>
    //    <h3 v-if="level===3"><slot /></h3>
    //    `
   });

插件plugin

1.plugin插件:把通用型的功能封装起来

const myPlugin={
        install(app,options){
            app.provide('name','dell lee');
            app.directive('focus',{
                mounted(el) {
                    el.focus();
                },
            });
            app.mixin({
                mounted(){
                    console.log('mixin');
                }
            })
            console.log(app,options);
            app.config.globalProperties.$sayHello = "hello world";
        }
    }
    const app = Vue.createApp({
        
        template:`
            <my-title >
                hello 
            </my-title>
        `
    });
   app.component('my-title',{
      inject:['name'],
      mounted(){
        console.log(this.$sayHello);
      },
       template:`
       <div>{{name}}<input v-focus /></div>
       `
   });

   app.use(myPlugin,{name:'dell'});

2.实例：对数据作校验的插件

const myPlugin={
        
    }
    const app = Vue.createApp({
        data(){
            return{
                name:'dell',
                age:28
            }
        },
        rules:{
            age:{
                validate:age => age>25,
                message:'too young,too simple'
            },
            name:{
                validate:name => name.length>=4,
                message:'too short'
            }
        },
        template:`
            <div>name:{{name}},age:{{age}}</div>
        `
    });

    const validatorPlugin=(app,options)=>{
            app.mixin({
                    created() {
                        for(let key in this.$options.rules){
                            const item = this.$options.rules[key];
                            this.$watch(key,(value)=>{
                                console.log(value);
                                const result = item.validate(value);
                                if(!result) console.log(item.message);
                            });
                            //console.log(key,item);
                        }
                        
                    },
                });
    };
    app.use(validatorPlugin);