第六 生命周期

Posted 2020-11-28 3526527690qq

一、生命周期

生命周期就是从出生到死亡，从创建到销毁的一个过程。
vue中的生命周期的概念，是我们的一个重点内容。不仅仅是在面试中，在开发项目的过程中。不同的生命周期阶段，数据和希望的逻辑都不太一样。
它在vue中是钩子函数，函数方法。
一共有八大生命周期函数：
创建前 beforeCreate
创建 created
挂载前 beforeMount
挂载 mounted
更新之前 beforeUpdate
更新 updated
销毁之前 beforeDestroy
销毁 destroyed

可查看的网址1、：https://www.jianshu.com/p/3d1c3b194ea5

可查看的网址1、：https://www.cnblogs.com/AlbertP/p/10754880.html

    <div id="app">
        <h1>{{msg}}</h1>
        <div>
            <input type="text" v-model=‘msg‘>
        </div>
    </div>
    <button>点击我销毁</button>
    <script>
      let vm =  new Vue({
            el: ‘#app‘,
            data: {
                msg:‘葡萄美酒夜光杯‘
            },
            //template:‘<h1>我是Template模板</h1>‘,
            // render(createElement){
            //     return createElement(‘h1‘,‘我是render函数渲染的内容‘)
            // },
            watch: {

            },
            computed: {

            },
            methods: {
                getBanner(){
           
                //调取轮播图接口
                $.ajax({
                    url:‘www.zuibang/banner‘,
                    data:{}
                })
                }
            },
            //生命周期，未来在应用的时候也不用每一个都写，你需要谁你就写谁。
            beforeCreate() {
                //初始化---创建之前，没有el元素，data属性也没有值
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----创建之前----‘)
            },
            created() {
                //创建的时候，没有el元素，出现data属性
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----创建----‘)
            },
            beforeMount() {
                //在挂载之前,出现el元素，出现data属性，这个阶段data属性并没有渲染到DOM中，只是出现了{{}},虚拟DOM
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----挂载之前----‘)
            },
            mounted() {
                //生命周期执行到挂载的时候，出现el元素，有data属性，这个时候数据被渲染到了 el元素中。
                //这个生命周期函数，就我们最常用，这里面可以写，轮播图，定时器，存储，调取接口，调用ajax(),调取axios
                //页面一加载肯定走这个函数
                //挂载之前的四个函数，页面一加载就执行，而且只执行一次
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----挂载----‘)
    
               // this.getBanner()
            },
            beforeUpdate() {
                //当数据有变化的时候会触发当前函数。这个时候不会触发整个页面的重新渲染，只是局部数据重新渲染，所以前四个生命周期函数并没有被重新触发。
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----更新之前----‘)
            },
            updated() {
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----更新----‘)
            },
            beforeDestroy() {
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----销毁之前----‘)
            },
            destroyed() {
                console.log(this.$el,‘元素‘)
                console.log(this.$data,‘data属性‘)
                console.log(this.msg,‘定义的属性内容‘)
                console.log(‘----销毁----‘)
            },
        }) 
        //.$mount(‘#app‘) 手动挂载
        console.log(vm,‘vue实例‘)
        //创建一个销毁事件
        let btn = document.querySelector(‘button‘)
        btn.onclick = function(){
            console.log(‘我被触发了‘)
            //调取生命周期销毁方法
            vm.$destroy()
        }
    </script>

 

第一道：页面加载的时候，会触发几个钩子函数（生命周期函数）

触发四个

创建前 beforeCreate

创建 created

挂载前 beforeMount

挂载 mounted

第二道：你经常使用的生命周期函数有哪些？

两个，mounted(){}，挂载。 updated(){}更新

第三道：你如何理解生命周期图示

创建之前所有内容都是undefined，没有el元素也没有data属性。创建的时候依然没有el元素，这个时候出现了data属性。

在挂载之前出现大量的操作，首先判断有没有el,有el生命周期继续执行，没有el分两种情况①什么操作都没有再做，生命周期结束。

②手动去挂载，执行$mount(‘挂载点‘),生命周期继续执行。el元素找到挂载点之后，它判断是否有template模板。如果有template模板，

直接编译渲染,如果这个时候存在render函数，优先走render。如果没有就用外部的html作为模板编译，其实就是你自己定义的那个容器。

（可以看出优先级的比较，render>template>outerHTML）挂载的时候用这个实际内容去替换之前用{{}}去占位的内容。

当data数据被修改的时候，触发更新之前，然后虚拟DOM重新渲染。就更新了。当你想要销毁的时候，就是执行销毁函数，你要调用$destory这个方法

二、动画(过渡动画)

场景：
切换 v-if和v-show
组件之间切换
路由

过渡动画的过程（6种状态）
离开（leave）

离开之前 leave
离开过程中 leave-active
离开之后 leave-to

进入（enter）
进入之前 enter
进入过程中 enter-active
进入之后 enter-to

 <!--  自定义动画-->
 <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 50px;
            top: 100px;
        }

        .aa-leave {
            left: 100px
        }

        .aa-leave-active {
            transition: all 1s;
        }

        .aa-leave-to {
            left: 1100px;
        }

        .aa-enter {
            left: 1200px
        }

        .aa-enter-active {
            transition: all 0.5s;
        }

        .aa-enter-to {
            top: 400px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click=‘getShow‘>点击我有惊喜</button>
        <!-- 想要那个标签块出现动画，就在哪个标签的外面加transition标签 -->
        <transition name=‘aa‘>
            <div v-show=‘flag‘ class="box"></div>
        </transition>
    </div>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                flag: true
            },
            watch: {

            },
            computed: {

            },
            methods: {
                //出现消失事件
                getShow() {
                    this.flag = !this.flag
                }
            }
        })
    </script>

除了自定义方式，我们也可以掉动画库

官网地址：https://daneden.github.io/animate.css/
安装方式推荐NPM ---- npm install animate.css
CDN方式（可以直接引入，也可以打开另存为文件再引入）
https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css
注意点：
一般在项目中我们的过渡动画都不会全写上，会造成眼花缭乱。所以我们就写一种,一般选择进来的动画 enter-active-class

 

<div id="app">
        <button @click=‘getShow‘>点击我有惊喜</button>
        <!-- 想要那个标签块出现动画，就在哪个标签的外面加transition标签 -->
        <transition 
        leave-active-class=‘animated rotateOut‘ 
        enter-active-class=‘animated bounceInRight‘>
        <!-- 建议只写进入的动画否则动画样式过多  容易页面混乱 -->
            <div class="one" v-if=‘flag‘>
                我是第一块内容：举杯邀明月，对影成三人
            </div>
        </transition>

        <transition 
        leave-active-class=‘animated rotateOut‘ 
        enter-active-class=‘animated bounceInLeft‘>
            <div class="two" v-if=‘!flag‘>
                我是第二块内容：五花马，千金裘。。。
            </div>
        </transition>
    </div>
    <script>
        new Vue({
            el:‘#app‘,
            data:{
                flag:true
            },
            watch: {
                
            },
            computed: {
                
            },
            methods: {
                //出现消失事件
                getShow(){
                    this.flag = !this.flag
                }
            }
        })
    </script>

三、过滤器

在vue中提供方法，你可以自己定义过滤去去格式化你的文本。格式化的就是插值表达式的内容。

过滤符：  |    

项目中经常用到的过滤器方法是：时间戳的转换

后端返给前端的事件数据，一定不是你想要的。一般显示时间的格式 2020/02/28 

后端返回来的数据格式是时间戳1582872812927（获取当前时间时间戳，new Date().getTime()）

定义过滤器

过滤器的方法

局部过滤器在vue实例中有一个filters：{

                   //对电话号码进行格式化 188****5566

                toTel(n){

                   // return n.slice(0,3)+"****"+n.slice(7)

                    return n.substr(0,3)+"****"+n.substring(7)

                }

}

2种

第一个是局部过滤器

 <div id="app">
        <h1>{{name | toUpper}}</h1>
        <h1>全是小写---{{name| toLower}}</h1>
        <hr>
        <h2>中奖名单</h2>
        <ul>
            <li v-for=‘item in dataList‘ :key=‘item.id‘>
                <span>姓名：{{item.name}}</span>---
                <span>电话号码：{{item.tel | toTel}}</span>
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:‘#app‘,
            data:{
                name:‘zhangDaDa‘,
                dataList:[
                    {
                        id:1,
                        name:‘李易峰‘,
                        tel:‘18819012345‘
                    },
                    {
                        id:2,
                        name:‘杨幂‘,
                        tel:‘17719018888‘
                    },
                    {
                        id:3,
                        name:‘四字弟弟‘,
                        tel:‘16619444345‘
                    },                    {
                        id:4,
                        name:‘珠穆朗玛峰‘,
                        tel:‘15677823412‘
                    }
                ]
            },
            watch: {
                
            },
            computed: {
                
            },
            methods: {
                
            },
            filters:{
                //转换大写的方法
                toUpper(n){
                    //n是你要转化的内容
                    console.log(n)
                    return n.toUpperCase()
                },
                //转换成小写的方法
                toLower(n){
                    return n.toLowerCase()
                },
                //对电话号码进行格式化 188****5566
                toTel(n){
                   // return n.slice(0,3)+"****"+n.slice(7)
                    return n.substr(0,3)+"****"+n.substring(7)
                }

            }
        })
    </script>

 

第二个是全局过滤器（推荐）

官方提供全局方法 Vue.filter() 这个方法中有两个参数，第一个参数是过滤器的名称，第二个参数是过滤器的所有内容

  <div id="app">
        <h1>当前商品单价是---{{price | toPrice}}</h1>
    </div>
    <script>
        //在项目中我们都用全局过滤器
        Vue.filter(‘toPrice‘,(n)=>{
            return n.toFixed(2)
        })
        new Vue({
            el:‘#app‘,
            data:{
                price:18.889
            },
            watch: {
                
            },
            computed: {
                
            },
            methods: {
                
            }
        })
    </script>

 

过滤器传参

<div id="app">
        <h1>{{msg |toUpper }}</h1>
        <h2>产品需求就转化10个字符 其他的原样输出</h2>
        <h1>{{msg |toUpper(10) }}</h1>  <!--toUpper(这里传入实参)-->
        <h2>产品需求就转化500个字符 其他的原样输出</h2>
        <h1>{{msg |toUpper(500) }}</h1>  <!--toUpper(这里传入实参)-->
    </div>
    <script>
        //第一参数n是要转化的内容，第二个参数是你传递的实参
        Vue.filter(‘toUpper‘,(n,x)=>{
            console.log(n,‘nnnnnn‘)
            console.log(x,‘xxxxxx‘)
            //逻辑优化，首先判断一下n是否有值
            if(x==undefined){
                return n.toLowerCase()
            }
            if(x<n.length){
                return n.slice(0,x).toUpperCase()+n.slice(x)
            }
            return n.toUpperCase()
        })
        new Vue({
            el:‘#app‘,
            data:{
                msg:‘How do I love thee? Let me count the ways.‘
            },
            watch: {
                
            },
            computed: {
                
            },
            methods: {
                
            }
        })
    </script>

 

过滤器案例