【学Vue跟玩一样】什么是计算属性？什么使监视属性？

Aic山鱼

已于 2023-02-01 23:52:49 修改

阅读量1.8k

点赞数 31

文章标签： vue.js javascript 前端

于 2023-01-03 15:45:52 首次发布

本文链接：https://blog.csdn.net/zhaochen1127/article/details/128532696

版权

本栏会细致的将Vue划分为两大模块，基础篇，进阶篇。想要顺利通关vue篇首先要拥有三剑客，当然node ajax法宝也会辅佐你通关的，在学习的途中如果遇到了问题，可以试着回顾一下之前的情节，以便于更好的推进主线剧情，准备出发!

1.计算属性

计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。在Vue中有多种方法为视图设置值：使用指令直接将数据值绑定到视图; 使用简单的表达式对内容进行简单的转换; 使用过滤器对内容进行简单的转换（晦涩难懂的很）

举个例子

我们要实现这样一个需求：说有个人啊叫山鱼，我们要把他的名和姓分开，来渲染到页面种，这该怎么做呢？

方法1：直接使用插值语法

直接再data里面写个姓写个名在使用插值语法插进去就可以了，虽然看起来非常简单，但是一旦传入的数据多了起来，就会使代码看起来很臃肿，后期进行维护也比较艰难

<body>
    <!-- 容器 -->
    <div class="user">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名：<span>{{firstName}}-{{lastName}}</span>
    </div>
    <script>
    new Vue({
        el:'.user',
        data:{
            firstName:'山',
            lastName:'鱼'
        }
    })
    </script>
</body>

方法二：使用计算属性

我们在这里定义了一个计算属性fallName。

更改此应用的data中firstName和lastName值后，可以看到 fallName也会随之改变。

在模板中使用计算属性的方式和一般的属性并无二致。Vue 会检测到this.fallName依赖于this

.firstName和lastName所以当所以data数据改变时，任何依赖于this.fallName的绑定都将同时更新。这种计算属性可以很好的将代码臃肿的问题解决掉也利于维护。

<body>
    <!-- 容器 -->
    <div class="user">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '.user',
            data: {
                firstName: '山',
                lastName: '鱼'
            },
            // 计算属性
            computed: {
                fullName: {
                    // 当ful1Name被读取时，get就会被调用，且返回值就作为fullName的值，而且get有个缓存效果
                    // 这里的get在初次读取fullName时会被调用，在所依赖的数据进行改变时也会调用
                    // 这里所依赖的数据有俩分别是firstName和lastName
                    get() {
                        return this.firstName +"-" +this.lastName
                    },
                    // 当fullName被修改时调用
                    set(value){
                        console.log('set被执行');
                        const arr = value.split('-');
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>
</body>

简写方式

<body>
    <!-- 容器 -->
    <div class="user">
        姓：<input type="text" v-model="firstName"><br>
        名：<input type="text" v-model="lastName"><br>
        姓名：<span>{{fullName}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '.user',
            data: {
                firstName: '山',
                lastName: '鱼'
            },
            // 计算属性
            computed: {
                // 简写
                fullName() {
                    return this.firstName + "-" + this.lastName
                }
            }
        })
    </script>
</body>

2.监视属性

2.1监视属性

1.当被监视的属性变化时，回调函数自动调用，进行相关操作

2.监视的属性必须存在，才能进行监视

3.监视的两种写法:

(1) . new Vue时传入watch配置

(2) .通过vm. $watch监视

举个小例子


<body>
    <div class="user">
        <h1>今天我很{{info}}</h1>
        <button @click='changeMood'>点击切换心情</button>
    </div>
    <script>
        new Vue({
            el: '.user',
            data: {
                mood: true
            },
            computed: {
                info() {
                    return this.mood ? '开心' : '不开心'
                },
            },
            methods: {
                changeMood() {
                    this.mood = !this.mood
                }
            },
            watch: {
                // 被监视的是谁
                mood: {
                    immediate: true,// 初始化时 让handler调用一次
                    // handler有俩参数分别是修改前的值和修改后的值
                    handler(newValue, oldValue) {
                        console.log('mood被修改了', newValue, oldValue);

                    }
                },
                // 这个监视属性也可以监视计算属性
                info: {
                    immediate: true,// 初识化时 让handler调用一次
                    // handler有俩参数分别是修改前的值和修改后的值
                    handler(newValue, oldValue) {
                        console.log('info被修改了', newValue, oldValue);
                    }
                },

            }
        })
        // 也可以用vm.$watch进行监视 => vm.$watch(监视对象，如何监视)
        vm.$watch('mood', {
            immediate: true,// 初识化时 让handler调用一次
            // handler有俩参数分别是修改前的值和修改后的值
            handler(newValue, oldValue) {
                console.log('info被修改了', newValue, oldValue);
            }
        })
    </script>
</body>

2.2深度监视

(1)Vue中的watch默认不监测对象内部值的改变(层)

(2)配置deep:true可以监测对象内部值改变(多层)。

(3)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

(4)使用watch时根据数据的具体结构，决定是否采用深度监视

 watch: {
                // 完整写法
                // mood: {
                // deep:true
                //     handler(newValue, oldValue) {
                //         console.log("mood被修改", newValue, oldValue);

                //     }
                // }
                // 简写（但是不能配置immediate:true,deep:true）
                mood(newValue, oldValue) {
                    console.log('mood被修改', newValue, oldValue);
                }
            }
        })
         // 正常写法
        vm.$watch('mood',{
                immediate:true,
                deep:true,
                handler(newValue, oldValue) {
                    console.log('mood被修改', newValue, oldValue);
                }
            })
            // 简写(但是不能配置immediate:true,deep:true)
            vm.$watch('mood',function(newValue, oldValue){
                console.log('mood被修改', newValue, oldValue);
            })