生命周期

一个组件从创建到销毁的这个过程就叫做生命周期

1.beforeCreate创建前---------------加载动画loading

beforeCreate当初始化的时候读取生命周期函数， 1.不能进行调用属性2.不能访问到属性和方法

2.created创建后--------------(ajax的请求，接收非父子组件传的值)

created:当beforeCreate初始化完毕以后，会执行created。当执行created的时候会， 1.在created中可以访问到数据（属性）和方法了 2.将vm身上所有的属性和方法并遍历挂载到vue的实例身上，

3.同时，给data中的每一个属性都添加一个getter和setter方法，实现数据的双向绑定 4.属性有getter方法和setter方法才可以进行双向绑定（当属性值发生改变时，凡是关联到该属性的值都会发生改变） 

3.beforeMount挂载前

1.将读取到所有的虚拟DOM,和数据进行结合， 2.但是没有生产真正的DOm结构，这里面是只能访问到虚拟DOM的

4.mounted：挂载完成，---------------插件进行实例化

1.虚拟DOM和数据结合完成后生成真正的DOM结构，可访问到真实DOM 2.可以使用refs进行dom的操作，通过this.$refs.值 来获取真实的dom结构。 3.使用一些插件进行实例化的时候我们都可以在mounted里面进行操作 例如 swiper better-scroll

5.beforeUpdate:修改前

1.当数据进行修改的时候会执行beforeUpdate， 2.但是数据不会立马进行更新，而是数据和模板进行相结合的状态，访问到的dom是更新之前的dom结构 3.重新渲染虚拟 dom,并通过 diff 算法对比 vnode 节点差异更新真实 dom (virtual DOM re-render and patch) （一个页面，先进行 对比，只对需要更新的部分进行更新）

6.updated修改后----------------（瀑布流，计算加载图片后，页面的高度）

1.数据和模板结合完毕生成新的DOM结构

7.beforeDestroy销毁前-----做事件的解绑，移除监听等工作

1.销毁前是可以访问到数据和方法，可以访问到当前dom的元素

8.destroyed销毁后

1.不能访问到真实dom元素了，但能访问到数据，把vm与DOM之间的关联全部断开

 

 

操作虚拟dom

 

              
      
       {
    {message}}
      
 console.log(this.$refs);//{},点击里面有box console.log(this.$refs.box);//输出虚拟dom'

挂载前，挂载后

     
       
        
                
        
         {
     {message}}
        
    
       

 

销毁前   销毁后

 

     
      
        
               
       
        {
    {message}}
       
        
       
        {
    {message}}
       
        
       
        {
    {message}}
       
        
       
        {
    {message}}
       
    
      
     
          销毁

 

vm的方法  $destroy

 

 

修改前，修改后

 

     
      
        
               
       
        {
    {message}}
       
        
        点击修改