第四十一篇指令中的VNode

最新推荐文章于 2025-04-21 19:55:21 发布

原创

最新推荐文章于 2025-04-21 19:55:21 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #vue.js #前端

VNode

前面讲到了自定义指令的引入使用，以及结合封装swiper组件一起进行结合使用，还记在inserted 指令生命周期当中使用的参数吗？第一个参数是可以拿到DOM节点（el），第二个参数是可以拿到使用自定义指令绑定的值（binding），那么它还有第三个参数，就是本篇内容要讲的这个 VNode ，那么当听到这个虚拟DOM，VNode，虚拟节点和 vdom这些词其实指的是在Vue中虚拟DOM其实是一个js对象来模拟真实DOM节点跟 diff 算法搭配方便做比对，最后Vue会进行哪些节点能否被复用的复用，不能复用的删除创建，以此达到更好的用户体验。那么下面来简单的自定义一个指令来使用这个三个参数：

<div id="app">
    <div v-custom = "'customVal'">
        {
  
  {mytext}}
    </div>
</div>
<script>
    Vue.directive("custom",{
        inserted(el,binding,vnode){
            console.log(el);
            console.log(binding.value);
            console.log(vnode);
        }
    })
    new Vue({
        el:'#app',
        data:{mytext:'自定义指令'}
    })
</script>