Vue第5话计算属性和监视_计算属性倒数5-CSDN博客

本文链接：https://blog.csdn.net/weixin_45847167/article/details/105527546

1. 计算属性

在 computed 属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
通过 getter/setter 实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次 getter 计算

2. 监视属性

通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算

3. 编码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_计算属性和监视</title>
</head>
<body>
<div id="app-3">
    姓：<input type="text" placeholder="First Name" v-model="firstName"><br>
    名：<input type="text" placeholder="Last Name" v-model="lastName"><br>
    姓名1（单向）：<input type="text" placeholder="Full Name1" v-model="fullName1"><br>
    姓名2（单向）：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
    姓名3（双向）：<input type="text" placeholder="Full Name3" v-model="fullName3"><br>
    <p>{{fullName3}}</p>
    <p>{{fullName3}}</p>
    <p>{{fullName3}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el: '#app-3',
        data: {
            firstName: 'wu',
            lastName: 'shanghui',
            fullName2: 'wu shanghui'
        },
        //计算属性
        computed: {
            fullName1: function () {
                return this.firstName + ' ' + this.lastName
            },
            fullName3: {
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                //set 方法是监视，不是赋值
                set: function (newValue,oldValue) {
                    //老值未取到
                    console.log('newValue=' + newValue + ', oldValue=' + oldValue)
                    const names = newValue.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        },
        //监视配置
        watch: {
            firstName: function (newValue, oldValue) {
                console.log("oldValue=" + oldValue);
                this.fullName2 = newValue + '' + this.lastName
            }
        }
    });
    // 监视lastName
    //使用这种方式的监控，在vm对象中
    vm.$watch('lastName', function (value) {
        console.log('$watch lastName', value);
        // 更新fullName2
        this.fullName2 = this.firstName + ' ' + value
    })
</script>
</body>
</html>