vue基础学习(1.2)：vue的计算属性和监视-CSDN博客

本文链接：https://blog.csdn.net/qq_39198749/article/details/104071347

1. 计算属性

使用computed属性去定义计算属性的方法；
html页面中，可以使用{{方法名}}显示计算结果；
高级用法：可以使用get()和set(value)方法实现对属性数据的展示和监视，
注意：计算属性存在缓存，多次读取只执行一次get计算。

2. 监视属性

watch可以来监视指定的属性；
vm的对象$watch()也可以用来监视；
所谓监视，就是说当监视的属性发生变化时，回调函数将自动调用。

3. 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>
<body>
<div id="name">
    姓: <input type="text" v-model="firstName"><br>
    名: <input type="text" v-model="lastName"><br>
    姓名（计算属性实现 单向）: <input type="text" v-model="fullName1"><br>
    姓名（监视属性实现 单向）: <input type="text" v-model="fullName2"><br>
    姓名（监视属性实现 双向）: <input type="text" v-model="fullName3"><br>
</div>
<script src="./js/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#name",
        data: {
            firstName: "Xiao",
            lastName: "Ming",
            //如果有了计算属性，data中就不用写了
            // fullName1:"Xiao Ming",
            fullName2: "Xiao Ming"
        },
        //计算属性
        computed: {
            //调用：初始化显示调用一次，当相关的data属性的数据发生变化时就会调用
            fullName1() {  //计算属性中的一个方法，方法的返回值作为属性值
                return this.firstName + " " + this.lastName;
            },
            fullName3: {
                //回调函数，需要展示时，调用；当相关的属性数据改变时，调用
                get() {
                    return this.firstName + " " + this.lastName;
                },
                //回调函数，value是fullName3的最新属性值，当属性值改变时，调用去更新相关的属性值
                set(value) {
                    let split = value.split(" ");
                    this.firstName = split[0];
                    this.lastName = split[1];
                }
            }
        },
        //监视属性
        watch: {
            firstName: function (value) {
                this.fullName2 = value + " " + this.lastName;
            },
            lastName: function (value) {
                this.fullName2 = this.firstName + " " + value;
            }
        }
    });
    //第二种监听方式   监听方法
    // vm.$watch("lastName", function (value) {
    //     this.fullName2 = this.firstName + " " + value;
    // })

</script>

</body>
</html>