vue----生命周期

生命周期

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

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之间的关联全部断开

<script>
    var vm = new Vue({
        el:"#app",
        //创建前
        beforeCreate(){
            console.log("beforeCreated………………");
            console.log(this.message);//undefined 访问不到属性
            // this.handleClick();//报错  访问不到方法
        },
        //创建后
        created(){
            console.log("created…………");
            console.log(this.message);//访问到属性
            this.handleClick();//访问到方法
        },
        data:{
          message:"文本"  //message有set和get方法
        },
        methods:{
            handleClick(){
                console.log("这是个方法");
            }
        }
    })
    vm.age=32;//age没有get 和 set 方法，不能实现双向
    console.log(vm);
</script>

操作虚拟dom

<!-- ref的值必须唯一 -->
        <div ref="box">{{message}}</div>
 
console.log(this.$refs);//{},点击里面有box
 console.log(this.$refs.box);//输出虚拟dom'

挂载前，挂载后

<body>
 
    <div id="app">
        <!-- ref的值必须唯一 -->
        <div ref="box">{{message}}</div>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        beforeCreate(){
            console.log("beforeCreated………………");
            console.log(this.message);
        },
        //创建后
        created(){
            console.log("created…………");
            console.log(this.message);
            this.handleClick();
        },
        data:{
          message:"文本"
        },
        methods:{
            handleClick(){
                console.log("这是个方法");
            }
        },
        beforeMount(){
            console.log("beforeMount…………");
            //$refs访问虚拟dom节点
            console.log(this.$refs);//{},点击里面有box
            console.log(this.$refs.box);//undefined,挂载前，访问不到虚拟dom
            
        },
        mounted(){
            console.log(this.$refs);//{box}
            console.log(this.$refs.box);//<div>文本</div>访问到虚拟dom
        }
    })
 
</script>

销毁前销毁后

<body>
 
    <div id="app">
        <!-- ref的值必须唯一 -->
        <div ref="box">{{message}}</div>
        <div ref="box">{{message}}</div>
        <div ref="box">{{message}}</div>
        <div ref="box">{{message}}</div>
    </div>
 
    <!-- 在app外 -->
    <button onclick="destroy()">销毁</button>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
          message:"文本"
        },
        beforeDestroy(){
            // alert
            console.log("beforeDestroy…………");
            console.log(this.$refs);
            console.log(this.$refs.box);//<div>box</div>可访问到bom元素
        },
        destroyed(){
            console.log("destroyed…………");
            console.log(this.$refs);
            console.log(this.$refs.box);//undefined访问不到bom元素
        }
    })
 
    function destroy(){
        alert(1);
        // vm的一个方法,销毁
        vm.$destroy();
    }
 
</script>

vm的方法 $destroy

修改前，修改后

<body>
 
    <div id="app">
        <!-- ref的值必须唯一 -->
        <div ref="box">{{message}}</div>
        <button @click="handleClick()"> 点击修改</button>
    </div>
</body>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        
        data:{
          message:"文本"
        },
        methods:{
            handleClick(){
                this.message = "我是修改的数据";
            }
        },
        beforeUpdate(){
            alert(1);
            console.log("boforeUpdate…………");
            console.log(app.innerHTML);
        },
        updated(){
            console.log("updated…………")
            console.log(app.innerHTML);
        }
    })
 
</script>

vue----生命周期

推荐阅读