vue有哪些生命周期钩子函数?
一共有八种命周期函数:
四大阶段 八大方法
-----------总共分为8个阶段。创建前/后,载入前/后,更新前/后,销毁前/后。----------
1.初始化之前
beforeCreate(实例创建前) ---这个时候this还不能使用,data中的数据、methods中的方法,以及watcher中的事件都不能获得。
2.初始化之后
created(实例创建后)---这个时候可以操作vue中的数据和方法,但是还不能对dom节点进行操作。
3.挂载前
beforeMoute(元素挂载前)---此时已经完成了模板的编译,但是还没有挂载到当前页面中
4.挂载后
mouted(元素挂载后)---此时已经将编译好的模板挂载到页面的指定容器中,在mouted中可以操作dom元素了
5.实例更新前
beforeUpdate(实例更新前)---状态更新前执行此函数,此时data中的状态值是最新的,
但显示界面的数据还是旧的,因为此时还没有开始重新渲染dom节点
6.实例更新后
updated(实例更新后)---这个实例化更新后,调用此函数,此时date中的 状态值和界面上显示的数据,都已经更新完毕了,界面也已经被渲染好了
--------注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick替换掉 updated:
7.实例销毁前
beforeDestory(实例销毁前)---在这一步的时候 实例销毁之前调用,在这一步,实例仍然完全可用。
8.实例销毁后
destory(实例销毁后) 这个表示的 是vue实例销毁前调用,
调用后,Vue实例指示的所有内容都会解除绑定,所有的事件监听器都会被移除,所有的子实例也会被销毁。
执行destroy方法后,对data的改变不会再触发周期函数,此时的vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。
-------------------------------------- 精简 ----声明周期指的是 四大阶段 八大方法--------
创建前/后: 在beforeCreated阶段,vue实例的挂载元素$el和数据对象 data 都为undefined,还未初始化。在 created阶段,vue实例的数据对象data有了,$el还没有。
载入前/后: 在beforeMount阶段,vue实例的$el和data都初始化了,但还是挂载之前为虚拟的dom节点,data.message还未替换。在mounted阶段,vue实例挂载完成,data.message成功渲染。
更新前/后: 当data变化时,会触发beforeUpdate和updated方法。
销毁前/后: 在destroy阶段,对data的改变不会再触发周期函数,
说明此时vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。destroyed阶段,组件销毁
-----以下是一些其他的补充------
Window.confirm 提示框
箭头函数里面加花括号的话要加return---要注意的
因为数组已经改变,所以回不去以前的数据,所以要弄过一个变量,当做中间件---用它来中转
侦听器的用法就是数据发生改变的时候
本地只能存字符串
然后 取值的时候要转换成对象
父传子,简单不能改,复杂数据类型可以改
钩子就是函数
不同的时期,就自动调用这个函数