如果要做好所有准备才开始写学习心得,我发现是不可能的,因为感觉不管是简单的东西还是复杂的东西,学到一定时候都一样复杂,到最后也都一样简单,然后不管什么时候都会觉得自己学的东西还不够,还有。。。。(好多)木有学!
所以,有了一定收获就先记下来吧!
学了三个星期的vue了,也试着边学边写了一个项目(应该还有很多地方需要更改);
不过,写到这时候,发现简单的都会了,但是高阶一点的东西,还没有用到,也有些难理解(比如vuex);
不过,不急,一步步来,先把生命周期理一下,免得之后搞不清楚根本的东西!
【其实,经常用到的就是created()和mounted()】
【比如,created()就相当于还没有渲染DOM,此时可以让异步函数什么的排着队,因为异步函数不知道什么时候会返回结果,越早开始越好;】
【又比如,mounted()就相当于DOM已经渲染,此刻可以获取到DOM了(比如可以知道有几个li了)。】
【别的生命周期钩子可能就是特殊时刻会很有用,但是还不知道是什么时候??之后再慢慢总结吧!】
1、beforeCreate()
官方:数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
也就是说:在此期间,【data中的数据和methods中的方法无法读取到】
也就是此时如果想要使用data中的数据,或想要调用methods中的方法是不行的。
因为此期间,vue实例化还没有对数据进行检测
2、created()
官方:在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。
也就是说:在此期间,【可以使用实例中的数据(data中的)和方法(methods中的)了】。
例如:可以在此期间获取服务器数据;可以初始化vue实例的一些操作,比如,加载本地的缓存,读取URL上的路由
获取数据,调用方法,调用异步方法
【主要是在此期间,可以将数据赋值给this,可以对内部实例进行操作】
【在别的地方也可以做这些操作,比如全局也可以,反正生命周期一个个都会走的,那什么时候可以用就用就可以了,不过在created期间做的话,就刚刚好,较方便。】
3、beforeMount()
官方:在挂载开始之前被调用:相关的 render
函数首次被调用。(ps:此刻可以搜索了解【独立构建以及运行时构建】,在之前刚开始学的时候连要搜索什么关键字都不知道,哈,可能有人会和我一样,所以提供关键字)
也就是说:在此期间,【如果读取DOM的话是不行的。】
4、Mounted()
官方:el
被新创建的 vm.$el
替换,并挂载到实例上去之后调用该钩子。
也就是说:【相应的初始数据已经在DOM树上渲染完毕了。可以读取DOM上的信息了。可以操作DOM了。】
【其中,初始数据就是在data中本来就有的数据,没有更新过的数据。】
(ps:mounted可以和updated进行对比一下。)
5、beforeUpdate()
官方:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
也就是说:【此时只能得到数据更新之前的结果。】
6、updated()
官方:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
也就是说:【此时可以得到所有数据更新完后的结果。如果有多次数据更新,并不会每次都马上得到一个结果,得到的是多次更新完后的每一次的结果。】
【如果想要每次数据更新都得到一个结果,或者每次更新都想要马上执行某个函数,则需要使用nextTick()函数】
【将nextTick()函数写在数据更新的异步函数中,会使得函数在等待DOM更新之后再执行。】
【如果不使用nextTick()函数的话,只会按照异步函数队列中的顺序执行一遍,不会等待DOM更新。如果每次更新都有相应处理函数的话,最后会呈现每一次的结果,并不会每一次更新都呈现一次。】
例如:想对每一次数据更新做处理,则写在nextTick函数中,如果想对所有数据做统一处理,则写在updated中。
补充:updated是只要vue实例中的数据更新,就会执行相应操作;但是watch针对的是某个具体的数据。(二者有些相似之处,顺便区分一下,区分有助于腾出更多大脑空间来思考接下来的问题。)
7、activated()
官方:keep-alive 组件激活时调用。
8、deactivated()
官方:keep-alive 组件停用时调用。
9、beforeDestroy()
官方:实例销毁之前调用。在这一步,实例仍然完全可用。
也就是说:可以在销毁之前用vue实例再做些预备工作。
10、destroyed()
官方:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
也就是说:DOM还在,只是不受vue控制了。
例:【从vue2.0开始,可以有多个vue实例,就是可以有多个根节点,有的实例只用一次就不再用了,就可以把它销毁。】