Vue第5话 计算属性和监视

逆流者 2020年01月04日 45次浏览

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>