利用vue脚手架先搭建一个vue开发环境
npm install -g vue-cli vue init webpack my-project cd my-project npm run dev
这是官网vue组件的生命周期图 https://cn.vuejs.org/v2/api/
(1) beforeCreate:从打印的结果来看我们知道:beforeCreate --- 在vue实例完全被创建出来之前(意思就是说vue实例还没有被完全创建出来)被调用,此时数据还没有被初始化,所以无法访问数据,
(2) created:从打印的结果来看我们知道:created --- 在vue实例创建完成后被调用,这个过程已完成了数据的初始化,可以被访问得到,也能获得methods方法;这个过程可以修改数据,这也是渲染之前修改数据的机会。
beforeMount:beforeMount --- 这个过程是在模版已经在内存中编译完成,挂载之前被调用,render函数也是首次被调用,此时完成了虚拟Dom的构建,但并未被渲染,这也是最后一次修改数据的机会。
(5) beforeUpdate:这个钩子函数是在重新渲染之前(更新前)调用,这个过程是不能更改数据的;如果在调用这个钩子函数之前数据没有改变的话,是无任何变化的;当数据发生改变之后,此时实例中的数据是最新的,而页面中的数据还是之前旧的,两者并没有达到同步;这个过程会再次调用render函数,它会重新构建虚拟Dom,然后与上次生成的虚拟Dom树利用diff算法进行对比找出差异,为下次的重新渲染做准备。
(6) updated:这个过程在重新渲染之后(更新后调用)被调用,已渲染完成,页面更新,此时实例中的数据与页面中的数据是同步的。
(7) beforeDestroy:这个过程是vue实例销毁之前被调用,在这个过程中我们可以做一些事情,比如 清除计时器或事件等等。
(8) destroyed:vue实例销毁后调用,并且vue实例中所有的东西都会解绑,所有的事件监听器都会被移除,所有的子实例也会被销毁。
这只是我个人的一些简单认识,如有错误,请帮忙指出!!!