Vue-可复用技术

1.混入

混入规则： (1)数据模型中的数据，会进行递归合并，出现同名属性，以组件中的数据为准 (2)同名的构造函数会合并成数组，其中的函数都会调用，混入的钩子执行在前，组件的钩子执行在后 (3)内部对象的合并，类似于components、methods回合并为一个对象，发生冲突时，以组件中的为准 全局混入 Vue.mixin({}) 局部混入 mixins: [mixin]

<div id="app">
        {
 {msg}}-{
 {obj}}-{
 {attr}}
    </div>
    <script>
        // 声明一个混入对象
        let mixin = {
            data() {
                return {
                    msg: '我是混入数据',
                    obj: {     name: 'zhangsan'   }
                }
            },
            methods: {
                foo() {    return '我是混入方法'   }
            },
            created() {
                console.log('this is mixin created');
            }
        }
        // 2.1全局混入
        //  Vue.mixin(mixin)
​
        let vm = new Vue({
            el: '#app',
            data: {
                attr: '我是vue根实例数据',
                obj: {   age: 20  }
            },
            methods: {},
            created() {
                console.log('vue根实例钩子函数');
            },
            // 局部混入
            mixins: [mixin]
        })
    </script>

​2.自定义指

指令内部有5个钩子函数

  bind(){}
  inserted(){}
  update(){}
  componentUpdated(){}
  unbind(){}

每个钩子函数内部都有4个形参 bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

bind(el,binding,vnode,oldNode){} inserted:被绑定