Vue的计算属性和侦听器

1 计算属性：他是根据对象已有的属性计算出新的属性值。具有缓存的功能，如果原始属性不变，则用缓存。否则，重新计算。

前端
<form>
        <label>姓</label><input v-model="firstName">
        <label>名</label><input v-model="lastName">
        <div v-text="fullName"></div>
    </form>


js代码
new Vue({
        el:"#app",
        data:{
            firstName:'',
            lastName:''
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    })

 

2 侦听器：它是侦听属性值或者计算属性的变化，一旦发生变化可以在函数中进行相应的操作。

前端
<form>
        <label>姓</label><input v-model="firstName">
        <label>名</label><input v-model="lastName">
        <div v-text="fullName"></div>
        <div v-text="count"></div>
    </form>


js代码
new Vue({
        el:"#app",
        data:{
            firstName: '',
            lastName: '',
            count: 0
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName;
            }
        },
        watch:{
            fullName:function () {
                this.count ++;
            }
        }
    })