vue总结

vue的生命周期(beforeCreate-created-brforeMount-mounted-beforeUpdate-updated-beforeDestroy-destroy

  1.实例和组件通过new Vue()创建出来之后会初始化事件和生命周期,然后执行beforeCreate这个钩子函数,这个时候数据还没有挂载,只是一个空壳,无法访问到数据和真实的dom,一般不做任何操作。

  2.绑定事件,挂载数据等,然后执行created这个钩子函数,这里可以使用到数据和更改数据,这是渲染前第二次可以更改数据的机会,不会触发updated函数,一般做初始化数据的获取。

  3.接下来开始寻找实例组件对应的模板,编译虚拟dom到render函数中进行渲染,然后执行beforeMount这个钩子函数,在这个函数中虚拟dom已经创建完成,这是渲染前最后一次更改数据的机会,也不会触发updated函数。

4.接下来开始render,渲染出真实的dom,然后执行mounted这个钩子函数,这个时候组件已经出现在页面中,数据真实的dom都已经创建好了,事件已经挂载好了,可以在这里操作真实的dom。

5.当组件或实例的数据更改之后,会立即执行beforeUpdate这个钩子函数,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

6.当更新完成之后,执行updated函数,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom。

7.当经过某种途径调用$destory方法后,立即执行beforeDestroy,一般在这里做一些善后的工作,例如清除计时器,清除非绑定事件等等。

8.组件的数据绑定,监听去掉之后只剩下dom空壳,一般会执行destroy这个钩子函数,也是做一些善后的工作。

vue的组件传值

 1.父组件向子组件传值

     子组件在propd中创建一个属性,用以接受父组件传过来的值

     父组件中注册子组件

      在子组件标签中添加props中创建的属性

     把需要传给子组件的值赋给该属性

  2.子组件向父组件传值

     子组件需要以某种方式例如点击事件的方法来触发自定义事件

      将需要传的值作为$emit的第二个参数,将该值作为实参传给响应自定义事件的方法

      在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

  3.非父子组件传值

     event-bus

 4.多组件之间传值

   vuex

vue的指令

  v-for v-if   v-show v-else v-bind v-on v-text  v-html

vueRouter

https://segmentfault.com/a/1190000014822765

posted @ 2019-04-14 15:06  火炎焱燚&  阅读(181)  评论(0编辑  收藏  举报