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是在生命周期的哪个阶段执行的?的主要内容,如果未能解决你的问题,请参考以下文章