Vue中的computed是在生命周期的哪个阶段执行的?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的computed是在生命周期的哪个阶段执行的?相关的知识,希望对你有一定的参考价值。

参考技术A 1.在 new Vue() 的时候, vue\src\core\instance\index.js 里面的 _init() 初始化各个功能

2.在 _init() 中有这样的一个执行顺序:其中 initState() 是在 beforeCreate 和 created 之间

3.在 initState() 做了这些事情:

4.所以 props , methods , data 以及 computed 的初始化都是在 beforeCreated 和 created 之间完成的。

第六 生命周期

一、生命周期

生命周期就是从出生到死亡,从创建到销毁的一个过程。
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>

 

过滤器案例

 

以上是关于Vue中的computed是在生命周期的哪个阶段执行的?的主要内容,如果未能解决你的问题,请参考以下文章

vue生命周期详解

Vue生命周期函数详解解读

关于vue中computed计算属性和mouted生命周期的问题

Vue的生命周期

vue 生命周期钩子的理解 watch computed

前端学习 - Vue 生命周期