vue bind和inserted的详细区别

1. 适用

需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令
2. 钩子函数参数

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

3. 动态指令参数

v-mydirective:[argument]=“value”

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

update 和 componentUpdated

共同点：组件更新都会调用，update在componentUpdated之前

不同点：
    update 组件更新前的状态
    componentUpdated 组件更新后的状态

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

update(el, binding,vnode,oldVnode){
    console.log(el.innerHTML);       // 
！
}

componentUpdated(el, binding,vnode,oldVnode){
    console.log(el.innerHTML);       // //
！！
}

// 注意： 区别是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)  // 
...
    console.log('inserted')
}

注意：

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

摘自：https://segmentfault.com/a/1190000019651831