【Vue入门】4、基础API--计算属性、监听属性、声明周期

前言

🌟 上一篇幅我们介绍了虚拟DOM、DIFF算法以及v-for中key的使用，同时也学习了过滤器并实现了数据的处理

🌟 现在让我们继续来学习一下vue中的计算函数、监听属性、生命周期

🌟开始咯~

1、计算属性computed

🍊 场景：当变量的值，需要依赖另外一些数据计算而来时

🍊 特点：函数内使用的变量改变，重新计算结果返回

语法：

computed:{

​ 计算属性名:function(){

​ 业务处理

​ return 结果

​ }

}

注意：计算属性是一个有返回值的函数，也是vue数据变量，所以不要和data里重命，用法和vue数据变量一样，例如：{{计算属性名}}

示例1：基本使用

<div id="app">
    <!-- 使用计算属性 跟使用vue变量一样 -->
    {{toUp}}
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        // 计算属性
        computed: {
            toUp: function () {
                return this.msg.toUpperCase();
            }
        }
    })
</script>

计算属性基于依赖项的值进行缓存，依赖的变量不变，不会再调用计算属性的函数，而是直接从缓存取结果

示例2：计算属性-缓存

<div id="app">
    <!-- 第一次使用计算属性，调用toUp()函数 -->
    <p>{{toUp}}</p>
    <!-- 后面在使用时，不再调用，而是从缓存中取值 -->
    <p>{{toUp}}</p>
    <p>{{toUp}}</p>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'hello world'
        },
        // 计算属性
        computed: {
            toUp: function () {
                console.log("----------------调用了toUp()")
                return this.msg.toUpperCase();
            }
        }

    })
</script>

计算属性除了可以完成上述基本操作外，还可以用它来完成查询的效果，一起来看一下吧

示例3：计算属性-完成模糊查询

<div id="app">
    <input type="text" placeholder="请输入英雄名字" v-model="hName">
    <table border="1" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>描述</th>
        </tr>
        <!-- 由于我们模糊查询是通过计算属性实现的，所以这里循环要写计算属性selectHero，
表示遍历的是计算属性函数返回的结果；
如果直接写Vue变量heros的话，页面初始化没问题，但是实现不了模糊查询的数据刷新效果，切记！
-->
        <tr v-for="hero in selectHero" :key="hero.id">
            <td>{{hero.id}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.desc}}</td>
        </tr>
    </table>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            heros: [
                { id: 1, name: '墨子', desc: '这个法师有点六啊，打又打不过，跑又跑不了' },
                { id: 2, name: '孙尚香', desc: '滚来滚去就把你送走了' },
                { id: 3, name: '安琪拉', desc: '远离玩火少女，远离草丛' }
            ],
            hName: ''   //英雄名字
        },
        // 计算属性
        computed: {
            // 查找英雄
            selectHero: function () {
                //将Vue实例存到变量_this中，这样在下面使用时不会冲突
                let _this = this;
                // 通过filter方法过滤出我们想要的数据，h表示数组中的元素
                return _this.heros.filter(function (h) {
                    // 这里要使用_this表示Vue实例，不要用this，因为此时是在filter过滤器中，this表示的是过滤器对象
                    // 这也就是我们上面为什么要通过 let _this = this 将Vue实例放在变量_this中的原因，就是防止
                    // 在这里使用this时冲突。
                    return h.name.indexOf(_this.hName) != -1;
                })
            }
        }
    })
</script>

效果如下：

2、监听属性watch

🍊 特点：监听属性可以侦听data、computed属性值的改变。

语法：

watch:{

​ data数据项名:function(参数,[参数]){

​ 业务处理

​ }

}

监听属性也是函数形式，函数可以有一个参数，也可以有两个参数，一个参数代表新值，两个参数时，第一个表示新值，第二个表示旧值

示例1：购买图书

<style>
    .red {
        color: red;
    }

    .isShow {
        display: none;
    }
</style>

<div id="app">
    <p>
        书名：<input type="text" v-model="bName">
        <span :class="{red:bNameMsg,isShow:!bNameMsg}">请填写书名</span>
    </p>
    <p>
        单价：<input type="text" v-model="price">
        <span :class="{red:priceMsg,isShow:!priceMsg}">请填写价格</span>
    </p>
    <p>
        数量：<input type="text" v-model="num">
        <span :class="{red:numMsg,isShow:!numMsg}">请填写数量</span>
    </p>
    <p>
        您购买了{{num}}本《{{bName}}》,共计&yen;{{zj}}元
    </p>
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            bName: '',
            price: '',
            num: '',
            zj: '',
            bNameMsg: true,
            priceMsg: true,
            numMsg: true
        },
        // 监听属性
        watch: {
            // 监听data中数据项，如果新数据不为空，表示输入了数据，提示的信息就可以不显示
            bName: function (newBName) {
                this.bNameMsg = newBName == ""
            },
            price: function (newPrice) {
                this.priceMsg = newPrice == ""
                // 总价
                this.zj = parseInt(newPrice) * parseInt(this.num)
            },
            num: function (newNum) {
                this.numMsg = newNum == ""
                // 总价
                this.zj = parseInt(newNum) * parseInt(this.price)
            }
        }
    })
</script>

侦听属性在加载时不会执行，如果想让侦听属性在加载时也去执行，语法如下：

watch:{

​ data数据项名:{

​ handler:function(参数,[参数]){

​ 业务处理

​ },

​ // 立即执行

​ immediate:true

​ }

}

示例2：立即执行侦听

bName: {
    handler: function (newBName) {
        this.bNameMsg = newBName == ""
    },
    immediate: true
}

3、生命周期

❓什么是生命周期

1️⃣一个人从出生到逝去的过程，就是人的生命周期

3️⃣时间的齿轮从未停止转动，它用一种最冷酷和理智的方式，让每个生命得以平行前进。有低落，有欢跃，保持这种弹性的生命状态，快乐经历风雨🌈，笑对人生😄

3.1 钩子函数

🍊 概念：Vue框架的内置函数，随着组件的生命周期阶段，自动执行

🍊 作用：特定的时间点，执行特定的操作

🍊 场景：组件创建完毕后，可以在created生命周期函数中发起Ajax请求，从而初始化data数据

分类：4大阶段8个方法

阶段	方法名（之前）	方法名（之后）
初始化	beforeCreate	created
挂在	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

3.2 初始化阶段

1️⃣new Vue() – Vue实例化(组件也是一个小的Vue实例)

2️⃣Init Events & Lifecycle – 初始化事件和生命周期函数

3️⃣beforeCreate – 生命周期钩子函数被执行

4️⃣Init injections&reactivity – Vue内部添加data和methods等

5️⃣created – 生命周期钩子函数被执行, 实例创建

6️⃣接下来是编译模板阶段 –开始分析

7️⃣Has el option? – 是否有el选项 – 检查要挂到哪里 没有：调用$mount()方法 有：继续检查template选项

3.3 挂载阶段

1️⃣template选项检查，有 - 编译template返回render渲染函数 无 – 编译el选项对应标签作为template(要渲染的模板)

2️⃣虚拟DOM挂载成真实DOM之前

3️⃣beforeMount – 生命周期钩子函数被执行

4️⃣Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

5️⃣真实DOM挂载完毕

6️⃣mounted – 生命周期钩子函数被执行

3.4 更新阶段

1️⃣当data里数据改变, 更新DOM之前

2️⃣beforeUpdate – 生命周期钩子函数被执行

3️⃣Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

4️⃣updated – 生命周期钩子函数被执行

5️⃣当有data数据改变 – 重复这个循环

3.5 销毁阶段

1️⃣当$destroy()被调用 – 比如组件DOM被移除(例v-if)

2️⃣beforeDestroy – 生命周期钩子函数被执行

3️⃣拆卸数据监视器、子组件和事件侦听器

4️⃣实例销毁后, 最后触发一个钩子函数

5️⃣destroyed – 生命周期钩子函数被执行

3.6 常用的钩子函数

✏️ 常用钩子函数 ✏️

​ created ：一般用来数据初始化

​ mounted：一般可以用来访问el挂载实例

​ beforeDestroy：一般用来清除定时器等

示例：文字播放

<div id="app">
    {{title}}
</div>
<script src="../vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '',
            idx: 0,
            ts: []
        },
        created: function () {
            // 初始化数据
            this.ts = [
                '前不见古人',
                '后不见来者',
                '念天地之悠悠',
                '独怆然而涕下'
            ];
            this.title = this.ts[this.idx];
        },
        mounted: function () {
            // 访问挂载的实例，业务处理
            let _this = this;
            this.timer = setInterval(function () {
                if (_this.idx < _this.ts.length - 1) {
                    _this.idx++;
                } else {
                    _this.idx = 0;
                }
                _this.title = _this.ts[_this.idx];
            }, 1000)
        },
        beforeDestroy: function () {
            // 清除定时器
            if (this.timer) {
                clearInterval(this.timer);
            }
        },
    })
</script>

效果如下：

Vue文字滚动

4、总结

好了，大家赶快去试试吧😄
能够给大家带来价值的话，给个三连哦😘
祝各位看官万福金安😊

---

⭐️徒手摘星，爱而不得，世人万千，再难遇我。⭐️