Vue之侦听属性

8、侦听属性

当你有一些数据需要随着其它数据变动而变动时，可以使用侦听属性

例1：

data: {
    firstName: '道格拉斯',
    lastName: '狗剩'
    fullName: '道格拉斯 狗剩' 
},
watch: {
    firstName(val){
        console.log('firstName changed...')
        this.fullName = val + ' ' + this.lastName
    },
​
    lastName(val){
        console.log('lastName changed...')
        this.fullName = this.firstName + ' ' + val
    }
}

 
<label>名：<input type="text" v-model="firstName"></label>
<label>姓：<input type="text" v-model="lastName"></label>
{{fullName}}

例2：
实际上，上一个例子是对 watch 的滥用。我们完全可以用计算属性更高效的完成同样的操作

data: {
    firstName: '道格拉斯',
    lastName: '狗剩'
    // fullName: 'Foo Bar' //既然fullName需要被计算，那么将此属性放在计算属性中
},
computed: {
    fullName () {
        return this.firstName + ' ' + this.lastName
    }
}

例3：

<p>
    Ask a yes/no question:
    <input v-model="question">
    <button @click="getAnswer()">提问</button>
</p>
<p>{{ answer }}</p>
 
var app = new Vue({
    el: '#app',
    data: {
        question: '',
        answer: '请提问!'
    },
    methods: {
        getAnswer: function () {
​
            this.answer = '我想想...'
            var vm = this
            $.ajax({
                url: 'https://yesno.wtf/api',
                type: 'get',
                success(data) {
                    // console.log(this);
                    vm.answer = data.answer
                },
                error (error) {
                    vm.answer = '网找不到API接口. ' + error
                }
            })
        }
    }
})

使用watch：
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
        this.answer = '等待您停止输入...'
        this.getAnswer()
    }
}