Vue_1-9_生命周期函数

最新推荐文章于 2024-06-13 17:19:27 发布

陪你去流浪_

最新推荐文章于 2024-06-13 17:19:27 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/jokerxiuka/article/details/118494972

版权

Vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{isShow}}
        <button @click="destroyVM">destroy vm</button>
        <p v-show="isShow">奋发图强</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                isShow:true,
                a:1,
                // intervalId:''        
            },
            //生命周期的三个阶段，除了更新阶段，其他阶段都是执行一次
            //常用的生命周期方法：
            // mounted():发送ajax请求，启动定时器等异步任务
            // beforeDestroy():做收尾工作，如：清除定时器等
            //1.初始阶段
            beforeCreate () {
                console.log("beofreCreate()");    
            },
            created(){
                console.log('created()');
            },
            beforeMount () {
                console.log('beforeMount ()');
            },
            
            mounted () {//初始化显示之后立即调用
                //函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。
                this.intervalId = setInterval(() =>{
                    console.log(this.isShow);
                    this.isShow = !this.isShow;//更新数据操作实际上在这里
                },1000)
                this.huz=setInterval(() => {
                    this.a=this.a+1;
                    // console.log(this.a);
                    var a=this.a+1;
                    console.log(a);
                }, 1000);
            },
            //2.更新阶段
            beforeUpdate () {
                console.log('beforeUpdate');
                //更新几次执行几次
            },
            updated () {
                console.log('Update');      
                //更新几次执行几次
            },
            //3.死亡阶段
            beforeDestroy () {//死亡之前调用一次
              //清除定时器
              console.log('beforeDestroy');
              clearInterval(this.intervalId)//定时器需手动清理  
              clearInterval(this.huz)  
            },
            destroyed () {
                console.log('destroyed');
            },
            methods: {
                destroyVM(){
                    //干掉VM
                    this.$destroy();
                }
            }
        })

        var person = {
                name:'李四',
                age:18,　　
                fav:function(){        
                    console.log(this)
                    console.log(this.name)  //李四
                }
        };
        person.fav();
        var person2 = {
            name:'李四',
            age:18,
            fav: ()=>{
                // 当前this指向了定义时所在的对象（window）
                console.log(this);  // window
            },
            sum : (num1, num2) => {
                console.log(num1 + num2);
                return num1 + num2;
            }
        }
        person2.fav();
        person2.sum(1,5);
    </script>
</body>
</html>