elementUI中描述的钩子和事件区别是什么

Question

想问大家，开发vue项目中，elementUI等组件库中，属性经常会有值是函数的情况，就比如upload组件中有大量的这种值为函数的属性。他们称之为钩子函数。我有个疑问，就是说，比如tabs组件中有这么个钩子，：before-leave=“方法名”，事件我感觉也是类似于钩子函数这种概念，某一时刻执行函数中的代码，比如这里的@tab-click=“方法名”

这两种到底应该怎么理解呢，除了写法一个是：，一个是@。源码中的处理方式是什么样的呢

Answer 1

其实在elementui中这两者一个是props属性（Attributes），一个是emit出来的属性（events）。前者绑定的function是在组件初始化时候传递到组件的，一般是给组件一个初始化的状态。而后者绑定的函数是组件初始化完成后监听事件所执行的回调函数，一般是用来给用户自定义操作的。这两者本质上都是为了增强组件的复用行，所以不用太过纠结这两者的区别，其实自己多去封装写组件就能很清楚的明白这块内容了。

Answer 2

之前的回答有问题。

使用钩子时，是通过props传入到组件，组件内的代码执行到钩子地方时，判断对应的props是否是个function，如果是就执行钩子传入的函数，然后执行对应的代码。

而使用事件时，执行到对应的代码时，会调用vue组件实例的$emit 方法，触发事件，vue会查看实例是否注册了对应的事件，调用事件的回调。vue会在调用回调的地方加入try catch。所以如果事件的回调代码出错，不影响之后的代码执行。

两个都是同步的，个人感觉使用的区别是有2点不大一样:
1.回调代码出问题的时候是否影响之后代码的执行;
2.钩子中没法添加额外参数,比如在v-for指令中的item, 如果是事件，可以通过@eventname="handler($event, item)"的方式将循环的内容传到方法里，而钩子的参数完全取决于组件调用的时候传递给钩子什么样的参数。

Answer 3

一个是用户事件触发的，类似点击浮动键盘。

一个是用户事件触发自组件里面的代码变化后产生的。

使用钩子可以更加详细的使用element，控制的粒度更小，多数用于解决产品经理的**需求。