目录
2) Vue3.0 （选项式API [14个] 、组合式API [13个]）
一、生命周期
1) Vue2.0 （11个）
1、beforeCreate
组件实例刚被创建，组件属性计算之前。
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
2、created
组件实例刚被创建，属性已绑定，但DOM还未生成。
在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：
数据观测 (data observer)属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。
建议数据请求放在这一阶段进行，到了之后的阶段再请求就一定会触发界面的二次渲染
3、beforeMount
模板编译/挂载之前。
在挂载开始之前被调用：相关的 render 函数首次被调用
4、mounted
模板编译/挂载之后。
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂
载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内
5、beforeUpdate
组件更新之前。
数据更新时调用，发生在虚拟 DOM 打补丁之前。
这里适合在更新之前访问现有的 DOM，
比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，
因为只有初次 渲染会在服务端进行
6、updated
组件更新之后
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
7、activated
组件激活时调用。
keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用
8、deactivated
组件停用时调用。
keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用
9、beforeDestroy
组件销毁前调用。
实例销毁之前调用。
在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用
10、destroyed
组件销毁后调用。
Vue 实例销毁后调用。
调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监 听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用
11、errorCaptured（2.5.0+ 新增）
当捕获一个来自子孙组件的错误时被调用。
此钩子会收到三个参数：
错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串，
此钩子可以返回 false 以阻止该 错误继续向上传播
TIPS：
1、页面首次加载过程，会一次触发哪些钩子？
beforeCreate，created，beforeMount，mounted
2、beforeUpdate 、updated中，不能网络请求新数据
不能网络请求新数据，去更新数据源，因为会导致死循环
3、this.$el是什么？它在哪些钩子中才能访问？
它代表了当前组件的真实DOM，要在mounted之后才有
this.$el是指的关联的那个div
4、你用brforeCreate做过什么业务？
这个钩子中可以做网络请求，但是vm没有构建完毕，此时数据方法等等的劫持还没有完成，不能操作this，因此可以做预加载
5、网络请求应该在什么钩子中,为什么?
可以放在data生成以后更新数据之前 的所有钩子中
具体的更具业务需求来 常见的放在created或者mounted中6、你用销毁钩子做过什么?
常常去把一些运行着的代码停下来
本地或者网络请求来记录用户的配置信息或者偏好设置
2) Vue3.0 （选项式API [14个] 、组合式API [13个]）
选项式API
1、beforeCreate
在组件实例初始化完成之后立即调用。
2、created
在组件实例处理完所有与状态相关的选项后调用。
3、beforeMount
在组件被挂载之前调用。
4、mounted
在组件被挂载之后调用。
5、beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。
6、updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。
7、beforeUnmount
在一个组件实例被卸载之前调用。
8、unmounted
在一个组件实例被卸载之后调用。
9、errorCaptured
在捕获了后代组件传递的错误时调用。
10、renderTracked
在一个响应式依赖被组件的渲染作用追踪后调用。
这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
11、renderTriggered
在一个响应式依赖被组件触发了重新渲染之后调用。
12、activated
若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
这个钩子在服务端渲染时不会被调用。
13、deactivated
若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
这个钩子在服务端渲染时不会被调用。
14、serverPrefetch
当组件实例在服务器上被渲染之前要完成的异步函数。
组合式API
1、setup
执行的时机：在beforeCreate之前执行,因为在这个函数中不能通过this来获取实例的；
2、onBeforeMount
注册一个钩子，在组件被挂载之前被调用。
3、onMounted
注册一个回调函数，在组件挂载完成后执行。
4、onBeforeUpdate注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
5、onUpdated
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
6、onBeforeUnmount注册一个钩子，在组件实例被卸载之前调用。
7、onUnmounted
注册一个回调函数，在组件实例被卸载之后调用。
8、onErrorCaptured注册一个钩子，在捕获了后代组件传递的错误时调用。
9、onRenderTracked注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。
这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
10、onRenderTriggered
注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。
这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。
11、onActivated()
注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
这个钩子在服务器端渲染期间不会被调用。
12、onDeactivated()
注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
这个钩子在服务器端渲染期间不会被调用。
13、onServerPrefetch()
注册一个异步函数，在组件实例在服务器上被渲染之前调用。
3) React （9个）
1、constructor（构造函数）
一般在constructor 初始化状态，也可以获取到外界传递进来的属性
2、render函数
1.会返回一个react元素，而且只能有一个根元素；这个返回的元素最终会渲染到root元素中
2. 调用一次setState就会执行一次render;默认也会执行一次
3、componentWillMount
组件将要挂载时触发的函数
在渲染前调用,在客户端也在服务端
4、componentDidMount
组件挂载完成时触发的函数
在**第一次渲染后**调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
5、shouldComponentUpdate
是否要更新数据时触发的函数：
自己判断是否需要刷新
返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
6、componentWillUpdate
将要更新数据时触发的函数：
准备更新
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
7、componentDidUpdate
数据更新完成时触发的函数：
已经更新，数据已经改完了
在组件完成更新后立即调用。在初始化时不会被调用。
8、componentWillUnmount
组件将要销毁时触发的函数：
即将销毁
在组件从 DOM 中移除的时候立刻被调用。
9、componentWillReceiveProps
父组件中改变了props传值时触发的函数：
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
二、事件以及使用
1）点击事件：
onclick：单击事件
ondblclick：双击事件
2）焦点事件
onblur：失去焦点
onfocus:元素获得焦点。
3）加载事件：
onload：一张页面或一幅图像完成加载。
onunload:卸载文件事件
4）鼠标事件：
onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
5）键盘事件：
onkeydown 某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
6）选择和改变事件
onchange 域的内容被改变。
onselect 文本被选中。
7）表单事件：
onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
oninput 表单每次输入触发
8)触摸事件
touchstart：手指触摸到一个 DOM 元素时触发
touchmove：手指在一个 DOM 元素上滑动时触发
touchend：手指从一个 DOM 元素上移开时触发
9) 页面相关事件
onabort：图片在下载时被用户中断时触发的事件。
onbeforeunload：当前页面的内容将要被改变时触发的事件。
是否使用on？
onclick 是原生写法，在 html 代码中用于“条件”触发事件用的属性。即只有对象被“点击”的时候，才会触发 click 事件。
click() 是直接触发事件，在 JavaScript 执行时，直接触发该对象的 click 事件行为。
标签中的事件属性（onclick）的执行优先级大于通过监听方法（addEventListener）添加的事件。
通过 addEventListener 监听方法添加的 Click 事件，是不需要 on 的。
Vue中事件绑定：例如@click