vue总结

Posted 2021-02-16 lucky-fellow1

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的指令

vueRouter