Vue - watch computed

watch主动监听data中数据的变化，当data中数据发生变化时，触发事件

html

<input v-model='name'>

js

vm = new Vue({
    el: '#app',
    data: {
        name: '',
        watchname: ''
    },

    watch: {
        name (newValue, oldValue) {
            console.log(newValue, oldValue)
            
            this.watchname = newValue + ' - hello'
        }
    }
})

watch对象中监听的属性以函数形式存在，函数由两个参数，newValue与oldValue，在watch对象的函数中，可以使用this对data数据进行操作

computed计算属性，在computed对象中声明的属性（这个属性以函数的形式存在）受data中属性被动影响，当data中属性发生变化，computed计算属性也发生变化

html

<div id="app">
    <input v-model='name'>
    <p>{{ cptname }}</p>
</div>

js

vm = new Vue({
    el: '#app',
    data: {
        name: '',
        watchname: ''
    },
    computed: {
        cptname () {
            return this.name + ' - vue'
        }
    }
})

computed中的属性需要return一个值，在html直接使用属性名cptname，不需要加()