vue自定义指令update-和-componentUpdated及bind-和-inserted区别

jiezi

5 年前

需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

除了 el 之外，其它参数都应该是只读的，切勿进行修改

    <div v-if="show" v-my-directive:arguments.modification="1+1" class="focus">

name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=”1 + 1″ 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 + componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=”1 + 1″ 中，表达式为 “1 + 1″。== 注意字符串的表达式 ==
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。== 注意字符串的 foo 是固定值，不是变量 ==
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 {foo: true, bar: true}。== 注意表示有 foo、bar 修饰符值为 true==

    v-mydirective:[argument]="value"

argument 可以是动态变化的，并且在钩子里面实时更新的

update 和 componentUpdated

共同点：组件更新都会调用，update 在 componentUpdated 之前
不同点：
- update 组件更新前的状态
- componentUpdated 组件更新后的状态

场景：点击事件，div 的内容追加！；

    update(el, binding,vnode,oldVnode){console.log(el.innerHTML);       // <div>！</div>
    }
    
    componentUpdated(el, binding,vnode,oldVnode){console.log(el.innerHTML);       // //<div>！！</div>
    }
    
    // 注意：区别是 div 里面的！数量

bind 和 inserted

共同点：dom 插入都会调用，bind 在 inserted 之前
不同点：
- bind 时父节点为 null
- inserted 时父节点存在。
- bind 是在 dom 树绘制前调用，inserted 在 dom 树绘制后调用

    bind: function (el) {console.log(el.parentNode)  // null
        console.log('bind')
    },
    inserted: function (el) {console.log(el.parentNode)  // <div class="directive-box">...</div>
        console.log('inserted')
    }

注意：

1. 自定义指令的钩子里面没有 vue 实例，this 指向 undefined；

vue自定义指令update-和-componentUpdated及bind-和-inserted区别

1. 适用

2. 钩子函数参数

3. 动态指令参数

4. 钩子区别

注意：