生命周期讲解，过滤器，局部过滤器

一.Vue生命周期

一：简介：生命周期
a：又名生命周期回调函数、生命周期函数、生命周期钩子
b：是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
c：生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
d：生命周期函数中的 this 指向是vm或组件实例对象

简述：

Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

二.如图我们可以简单了解vue的生命周期

三.简述生命周期中的一些属性

属性值如下：

1.beforeCreate初始化之前,不能获取data中的数据

2.created初始化之后,获取data中的数据

3.beforeMount解析前|挂载前

4.mounted解析后|挂载后

5.beforeUpdate更新前

6.updated更新后

7.beforeDestroy销毁前（（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件等等…’)）

8.destroyed销毁后（）

四.代码示例：

 <h1 v-show="bool" class="box">{{userName}}</h1>
        <button @click="func()">点击</button>
        <hr>
        <h1 :style="{opacity}">我是测试文本</h1>
        <button @click="opacity=1">点击显示</button>
        <button @click="stop()">停止</button>

 Vue.config.productionTip = false;
 var vm = new Vue({
        el:"#app",
        data() {
            return {
                time:Date.now(),
                userName:"张三",
                bool:true,
                // opacity:"opacity:1",
                opacity:1,
                timeValue:"",
            }
        },
  methods: {
            sum(){
                return 100;
            },
            func(){
                this.userName = "9999"
            },
            stop(){
                this.$destroy();
            }
        },
        // beforeCreate初始化之前,不能获取data中的数据
        beforeCreate() {
            // console.log(this.userName);
            // console.log(this.sum());
        },
        // created初始化之后,获取data中的数据
        created() {
            // console.log(this.userName);
            // console.log(this.sum());
        },
        // beforeMount解析前|挂载前
        beforeMount() {
            // this.bool = false;
            // document.getElementsByClassName("box")[0].style.color = "red";
        },
        // mounted解析后|挂载后
        mounted() {
            // this.userName = "王五";
            // document.getElementsByClassName("box")[0].style.color = "red";
            this.timeValue = setInterval(()=>{
                this.opacity-=0.01;
                if(this.opacity<=0){
                    this.opacity=1;
                }
            },10)
        },
        // beforeUpdate更新前
        beforeUpdate() {
            // setTimeout(()=>{
            //     this.userName = "李四";
            // },1000)
        },
        // updated更新后
        updated() {
            // this.userName = "王五";
        },
        // beforeDestroy销毁前
        beforeDestroy() {
            clearInterval(this.timeValue);
            console.log("触发了销毁前");
        },
        // destroyed销毁后
        destroyed() {
            console.log("触发了销毁后");
        },

五.组件生命周期函数的分类图

通过前面的讲解，我这还有一张图 大家可以看看

二.过滤器

一、Vue中的过滤器是什么

过滤器（filter）是输送介质管道上不可缺少的一种装置,大白话，就是把一些不必要的东西过滤掉,过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数。

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

但是：Vue3中已废弃filter

注意：过滤器分为全局过滤器，局部过滤器

二.全局过滤器

全局过滤器语法：

Vue.filter("名称",function(value){})

代码示例：

 <h1>{{time}}</h1>
        <h1>{{time|times}}</h1>
        <h1>{{time|times|myTime}}</h1>

 Vue.filter("myTime",function(value){
        // console.log(value);
        // return value.slice(0,11);
        // return value.substring(0,11);
        return value.substr(0,11);
    })

三.局部过滤器

语法：

new Vue({filters:{名称(value){}}})，

代码示例：

 filters:{
            times(value,str="YYYY年MM月DD日 HH:mm:ss"){
                // console.log(value);
                return dayjs(value).format(str);
                // return new Date(value);
                // let a = new Date(value);
                // return a.toISOString();
                // let day = parseInt(value/1000/60/60/24);
                // let days = day;
                // let year = 1970;
                // while (day>=366) {
                //     if(year%4==0){
                //         day-=366;
                //     }else{
                //         day-=365;
                //     }
                //     year+=1;
                // }
                // let month = 1;
                // while(day>=28){
                //     if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
                //         if(day<31){
                //             break;
                //         }
                //         day-=31;
                //     }else if(month==4||month==6||month==9||month==11){
                //         if(day<30){
                //             break;
                //         }
                //         day-=30;
                //     }else if(month==2&&year%4==0){
                //         if(day<29){
                //             break;
                //         }
                //         day-=29;
                //     }else{
                //         if(day<28){
                //             break;
                //         }
                //         day-=28;
                //     }
                //     month+=1;
                // }
                // console.log(year+"年"+month+"月"+(day+1)+"日");
            }

四.总结过滤器

局部过滤器优先于全局过滤器被调用
一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右

过滤器

    1.局部过滤器new Vue({filters:{名称(value){}}})，

    全局过滤器Vue.filter("名称",function(value){})

    2.返回一个新的数据

    3.使用时|名称, 多个过滤器串联，拿取的值是前一个

让我们来试试官方案例：

如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
	</head>
	<body>
		<div id="root">
			<h2>时间</h2>
            <h3>当前时间戳：{{time}}</h3>
            <h3>转换后时间：{{time | timeFormater()}}</h3>
			<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
			<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		// 全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,11)
		})
		new Vue({
            el:'#root',
            data:{
                time:1626750147900,
            },
			// 局部过滤器
            filters:{
                timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
                    return dayjs(value).format(str)
                }
            }
        })
	</script>
</html>