Vue入门-计算属性-蒲公英云

Vue入门-计算属性

计算属性, Vue独有的特性

计算属性跟方法的对比

1.写成方法调用,也可以实现功能,但是由于方法是调用的,每当数据更新引起页面更新,每一个方法调用都会再执行一次,当方法很多且逻辑很复杂时,内存开销会很大.
2.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值.所以，对于任何复杂逻辑，你都应当使用计算属性。

小插曲

面试题目:解决在输入框输入内容时,频繁向服务器请求的问题。

答案：引入lodash.js，在请求的方法后面添加_.debounce，即可避免频繁向服务器请求的问题。

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <button @click="a++">a自增</button>
    <button @click="b++">b自增</button>
    <p>a的值为:{
   {a}}</p>
    <p>b的值为:{
   {b}}</p>
    <!-- <p>a+c的结果:{
   {getA()}}</p> -->
    <p>a+c的结果:{
   {getAaddC}}</p>
    <!-- <p>b+c的结果:{
   {getB()}}</p> -->
    <p>b+c的结果:{
   {getBaddC}}</p>
    <hr>
    <p>显示name的结果:{
   {name}}</p>
    <button @click="name='羊驼'">点击改变</button>
    <hr>
    <ul>
        <!-- 通过计算属性实现数组的过滤，而后遍历展示 -->
        <li v-for="num in getResult">{
   {num}}</li>
    </ul>
    <hr>
    <p>面试题目:解决在输入框输入内容时,频繁向服务器请求的问题</p>
    <!--lodash.js中的方法解决问题-->
    <input type="text" @input="doInput">
</div>
</body>
</html>
<script src="lodash.js"></script>
<script>
    /*
     * 计算属性, Vue独有的特性
     *  计算属性跟方法的对比:
     *      1.写成方法调用,也可以实现功能,但是由于方法是调用的,每当数据更新引起页面更新的话,每一个方法调用都会再执行一次,所有的方法很多,且逻辑很复杂,内存开销会很大.
     *      2.计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值.
     */
    let vm1 = new Vue({
        el: '#app',
        data: {
            a: 10,
            b: 20,
            c: 30,
            str: '',
            arr: [13, 22, 35, 42, 57]
        },
        methods: {
            getA() {
                return this.a + this.c;
            },
            getB() {
                return this.b + this.c;
            },
            // 使用_.debounce,可使函数延迟执行
            doInput: _.debounce(function (e) {
                console.log('执行了doInput函数', e.target.value);
            },2000)
        },
        // 优先考虑使用计算属性实现
        computed: {
            // 属性的getter方法,可以把getAaddC看做一个属性
            getAaddC: function () {
                console.log('getAaddC执行');
                return this.a + this.c;
            },
            getBaddC: function () {
                console.log('getBaddC执行');
                return this.b + this.c;
            },
            name: {
                get: function () {
                    return this.str;
                },
                set: function (v) {
                    this.str = v;
                }
            },
            // 通过计算属性，实现数组的过滤。Vue官网推荐计算属性代替过滤器
            getResult: function (v) {
                return this.arr.filter((v) => {
                    return v > 30;
                });
            }
        }
    });
</script>