Vue基础知识(三)

一 丶声明周期

(1) 生命周期的概念

概念 : 在前端页面中,生命周期一般用来描述一个组件从创建到销毁的过程,一般组件会经过

(加载 → 渲染 ←→ 更新页面 → 卸载 → 销毁 ) 这几个阶段

目的 : 如何有效的利用Vue中的组件/对象,从而达到提高程序的效率与性能

(2) 生命周期的三大阶段

在Vue中将组件从创建到销毁的过程分为的三个阶段 : 创建阶段 运行阶段 销毁阶段 , 并且内置了函数用来监控各个阶段并进行事件处理

创建阶段 : 一个页面试图组件加载到内存 , 开始构建数据对象的阶段 : 包含一些处理函数监听发生的操作

① beforeCreate(){}

② Created(){}

③ beforeMount(){}

④ mounted(){}

    <div id="app">
        <h1 id="a">原本DOM节点</h1>
        <div v-html="info"></div>
        <input type="text" v-model="info">
    </div>

        <script>
        const vm = new Vue({
        el: "#app",
        data: {
            info: "<h1 id='b'>创建阶段</h1>"
        },
        // 声明周期创建阶段
        beforeCreate() {
            console.log("beforeCreate调用~~~~~~~~~~~~~~~~~~~");
            console.log(document.querySelector("#a"));// <h1 id="a">原本DOM节点</h1>
            console.log(this.info);                   // undefined
            console.log(document.querySelector("#b"));// null
        },
        created() {
            console.log("created调用~~~~~~~~~~~~~~~~~~~");
            console.log(document.querySelector("#a")); // <h1 id="a">原本DOM节点</h1>
            console.log(this.info);                    // <h1 id='b'>创建阶段</h1>
            console.log(document.querySelector("#b")); // null
        },
        beforeMount() {
            console.log("beforeMount调用~~~~~~~~~~~~~~~~~~~");
            console.log(document.querySelector("#a")); // <h1 id="a">原本DOM节点</h1>
            console.log(this.info);                    // <h1 id='b'>创建阶段</h1>
            console.log(document.querySelector("#b")); // null
        },
        mounted() {
            console.log("mounted调用~~~~~~~~~~~~~~~~~~~");
            console.log(document.querySelector("#a")); // <h1 id="a">原本DOM节点</h1>
            console.log(this.info);                    // <h1 id='b'>创建阶段</h1>
            console.log(document.querySelector("#b")); // <h1 id='b'>创建阶段</h1>
        }
    })

运行阶段 : 一个页面获取到数据 , 将数据渲染到页面更新的阶段 : 包含一些处理函数监听发生的操作

① beforeUpdate(){} 页面数据发生更新前调用的函数

② updated(){} 页面数据发生后调用函数

    const vm = new Vue({
            el: "#app",
            data: {
                info: "<h1 id='b'>创建阶段</h1>"
            },
            // 运行阶段
            // 实例中任意数据发生更新时，更新之前调用
            beforeUpdate() {
                console.log("数据将要开始更新");
            },
            // 实例中任意数据发生更新时，更新之后调用
            updated() {
                console.log("数据更新完毕");
            }
        })

销毁阶段 : 一个页面组件被切换隐藏时 , 可能会被从内存中删除的过程

① beforeDestroy(){}

② destroyed(){}

    const vm = new Vue({
            el: "#app",
            data: {
                info: "<h1 id='b'>创建阶段</h1>"
            },
            // 销毁阶段
            // 销毁开始前调用
            beforeDestroy() {
                console.log("数据即将开始销毁");
            },
            // 销毁完成后调用
            destroy() {
                console.log("数据销毁完毕");
            }
        })

生命周期图例 :

 二 丶侦听器

网页中需要监听页面中某个数据的变化,对网页进行局部更新操作,Vue中提供的watch方法可以很好的实现

基本语法 : 监听普通数据 

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "你好"
            },
            watch: {
                info: {
                    handler(newval, oldval) {
                        console.log("当监听的数据发生变化执行该函数");
                    }
                }
            }
        })
    </script>

监听对象数据 :

    const vm = new Vue({
            el: "#app",
            data: {
                info: "你好",
                isinfo: { id: 1, name: "张三" }
            },
            watch: {
                isinfo: {
                    handler(newval, oldval) {
                        console.log("当监听的数据发生变化执行该函数");
                    },
                    // 开启深度监测
                    deep : true
                }
            }
        })

三 丶计算属性

项目需要监听某个变量的数据变化,当发生变化时会同步进行视图更新或数据计算,为了提高加载效率和数据运算,Vue中提供了计算属性computed组件,例如购物车中随商品个数发生变化而需要立即运算的总计金额,但计算属性本质还是函数

基本语法 : 

    const vm = new Vue({
            el: "#app",
            data: {
                a: 45,
                b: 6
            },
            computed: {
                info() {
                    return a * b
                }
            }
        })

计算属性的特点 : 

(1) 计算属性就时声明在computed中的函数

(2) 计算属性可以当成变量属性一样 , 可以在插值表达式中直接调用

(3) 计算属性计算的结果会进行存储 , 当数据发生变化时会先与内存中的数据进行比较 , 如果结果相同便不会再进行计算直接将内存的结果拿来使用 ,否则才会进行运算

四 丶过滤器

Vue中提供的一个在页面数据展示格式的工具,便于数据在页面中更规范的进行展示

基本语法 : 全局过滤器

    <div id="app">
        <h1>商品价格 : {{ info | price }}</h1>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        Vue.filter("price", function (val) {
            return "$" + val + "元"
        })
        const vm = new Vue({
            el: "#app",
            data: {
                info: "1999"
            }
        })
    </script>

注意 :

(1) 全局过滤器必须声明所有Vue实例前面

(2) 过滤器所执行的处理函数中的第一个形参永远是是管道符(" | ")前面的数据,第二参数才是在调用是传递的参数

私有过滤器/局部过滤器 : 

    <div id="app">
        <h1>商品价格 : {{ info | price(a,b) }}</h1>
    </div>
    <script src="../vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                info: "1999",
                a : 4,
                b : 5
            },
            filters: {
                price(val, a, b) {
                    return "$" + val + "元"
                }
            }
        })
    </script>