生命周期:事物从诞生到消亡的整个过程 。 vue 生命周期: vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就是一个组件所谓的生命周期 。 官方解释: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。 生命周期钩子函数:
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed在vue 的生命周期中,这些钩子函数都发挥着各自的作用,在生命周期的不同时刻中进行着不同的操作,下面我们一个一个来看:
beforeCreate: 在实例初始化之后,在这个钩子函数里,只是刚开始初始化实例,你拿不到实例里的任何东西,比如data和methods和事件监听等。
created:实例已经创建完成之后被调用,这里,实例已经完成以下配置:数据观测,属性和方法的运算,watch/event 事件的回调。注意,挂载还没有开始, $el 属性是不可见,获取不到的,但是this 可指向实例。这是最早能拿到实例里面的数据和方法的一个钩子函数,应用场景:异步数据的获取和对实例数据的初始化操作都在这里面进行。
beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。不论是created还是beforeMount在它们里面都拿不到真实的dom元素,如果我们需要拿到dom元素就需要在mounted里操作。该钩子在服务器渲染期间不被调用。
mounted:el 被新创建的 vm.el 替换,并挂在到实例上去之后调用该钩子函数,如果root 实例挂载了一个文档内的元素,当mounted 被调用时 vm.el 也在文档内。mounted可以拿到dom元素,但也只是能拿到初始化数据里的dom元素,如果是存在异步对dom元素数据进行更改我们就只能在updated里获取,另外$children子组件的获取也需要在mounted里,应用场景:初始数据(在data中有的)的dom渲染完毕,可以获取dom。该钩子在服务器渲染期间不被调用。
beforeUpdate:数据更新时调用,这个钩子函数里拿到的是更改之前的数据,发生在虚拟dom 重新渲染和打补丁之前。你可以在这个钩子中进一步更改状态,修改data,不会触发附加的重新渲染过程。该钩子在服务器渲染期间不被调用。
updated:由于数据更改导致的虚拟dom 重新渲染,在这之后会调用该钩子。当这个钩子被调用时,组件已经更新,可以执行依赖于dom 的操作。 然而在大多数情况下,你应该避免在此期间更改状态,不要在当前钩子里修改当前组件中的data,否则会继续触发beforeUpdate、updated,这可能会导致更新无限循环。 虽然能在update里拿到更改后的数据,但是并不建议在这里面进行对异步数据得到的dom操作,因为有可能你当前的数据不止更改一次,而update只要相关的数据更改一次就会执行一次。 注意:updated是指mouted钩子后(包括mounted)的数据更改,在created里的数据更改不叫更改叫做初始化,所以我们下面在created里修改数据是通过一个异步来确保updated可以执行的。我们一般都是在事件方法里更改数据,然后通过updated对其操作,应用场景:如果dom操作依赖的数据是在异步操作中获取,并且只有一次数据的更改 ,也可以说是数据更新完:如果对数据更新做一些统一处理在updated钩子中处理即可。
activated:keep-alive 组件活跃的时候调用, 该钩子在服务器端渲染期间不被调用。 deactivated :keep-alive 组件不活跃的时候调用。该钩子在服务器端渲染期间不被调用。 beforeDestroy:实例销毁之前调用,实例仍然完全可用。 destroyed :vue 销毁后调用, Vue实例指示的所有东西都会解除绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
updated,watch和nextTick区别: updated:对所有数据的变化进行统一处理 watch:对具体某个数据变化做统一处理 nextTick: 是对某个数据的某一次变化进行处理 beforeDestroy和destroyed只能通过手动触发$destroy来调用 如果实例里面没写el挂载点你就需要在实例后面通过.$mount('#app')来手动触发这是对vue官方图的一个翻译。 总而言之,vue 的生命周期在网上一搜一大把的资料,如果你能深刻理解vue官网对此作出的解释,那是最好,网上的资料也是对官网做的更为详细解释,不同人理解有所不同,但是道理都是一样的。