彻底明白VUE中的done参数和函数作用，不懂的请进来

最新推荐文章于 2025-04-09 14:15:04 发布

发扬光大

最新推荐文章于 2025-04-09 14:15:04 发布

阅读量1w

点赞数 9

分类专栏： java javascript css 文章标签： VUE done 前端框架钩子函数回调函数

本文链接：https://blog.csdn.net/wzj26638719/article/details/103936381

版权

java 同时被 3 个专栏收录

11 篇文章

订阅专栏

javascript

5 篇文章

订阅专栏

css

2 篇文章

订阅专栏

最近在学习vue.js发现钩子函数这一块，有一个done函数，莫名奇妙难懂，网上翻遍了，整了3个多小时，才弄明白怎么回事。

所以特地写下一个超简单的示例供学习者理解参考。不多说，上代码：后面有图解

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8">
       <title>vue done</title>
       <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
   </head>
   <body>
       <div id="test">
           <button @click="show=!show">点我有讲解</button>
           <transition v-on:before-enter="beforeEnter"
                       v-on:enter="enter"
                       v-on:after-enter="afterXianshi"

                       v-on:before-leave="beforeLeave"
                       v-on:leave="leave"
                       v-on:after-leave="afterXiaoshi"
                       v-bind:css="false">
               <p v-if="show">
                   VUE菜鸟教程 - done函数作用讲解-作者QQ 4-9-8-3-5-777-9
               </p>
           </transition>
       </div>
       <script>
           var vm = new Vue({
               el: '#test',
               data: {
                   show: false
               },
               methods: {
                   beforeEnter: function(el) {
                       console.log("显示之前 beforeEnter 函数被调用");
                       alert("显示之前 beforeEnter函数被调用");
                   },
                   enter: function(el, done) {
                       console.log("enter");
                       alert("现在正在执行enter函数代码，你可以在这里写各种动画实现显示效果……");
                       // 显示过程的动画运行结束了，可以使用done()通知VUE去执行after-Leave函数了(假如有)
                       done();   // 调用这个系统函数，就是告诉vue，动画结束了，如果注释，就不会调afterXianshi
                   },
                   afterXianshi: function(el) { //这里我们把钩子函数enter后的afterenter函数写上
                       console.log("after-enter");
                       console.log("----------");
                       alert("这是 afterXianshi(显示) 函数弹出来的框");
                   },
                   beforeLeave: function(el, done) {
                       console.log("消失之前 beforeLeave 函数被调用");
                       alert("显示之前 beforeEnter函数被调用");
                   },
                   leave: function(el, done) {
                       console.log("leave");
                       alert("现在正在执行leave函数代码，你可以在这里写各种动画实现消失效果……");
                       // 消失的动画运行结束了，可以使用done()通知VUE去执行after-Leave函数了(假如有)
                       done();   // 调用这个系统函数，就是告诉vue，动画结束了，如果注释，就不会调afterXiaoshi
                   },
                   afterXiaoshi(el){
                       console.log("after-leave");
                       alert("这是 afterXiaoshi(消失) 函数弹出来的框");
                       console.log("");
                   }
               }
           })
       </script>
   </body>