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

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

1.计算属性

本栏会细致的将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);
            })