computed
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '' // **fullname属性定义在computed中**
},
methods: {},
computed: { // 在computed中,可以定义一些属性,称“计算属性”,本质上是一个方法,但在使用时不会被当做方法去调用,在引用的时候不要带(),直接当普通属性用
// 只要计算属性, function内部 所用到的任何data数据发生了变化,就会立即重新计算这个属性的值
// 计算属性的求值结果会被缓存,不会重新对计算属性进行求值。 第一次(发生变化)引用“fullname”会调用一次内部function,后面接着引用的时候不会调用函数,而是直接使用缓存值。即除非依赖的响应式属性发生变化,才会重新计算
'fullname': function() {
return this.firstname + '-' + this.lastname
}
}
})
</script>
watch
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {},
watch: { // 使用这个属性,可以监听data中指定数据的变化,然后触发这个watch中对应的function处理函数
'firstname': function() { // firstname 上的引号可加可不加,但如果是 first-name就一定要加引号
this.fullname = this.firstname + '-' + this.lastname
},
'lastname': function() {
this.fullname = this.firstname + '-' + this.lastname
}
},
// 或者下面这种方法
watch: {
'firstname': function(newVal, oldVal) {
this.fullname = newVal + '-' + this.lastname
},
'lastname': function(newVal) { // 不需要oldVal的时候可以不写
this.fullname = this.firstname + '-' + newVal
}
}
})
</script>
methods
<div id="app">
<input type="text" v-model="firstname" @keyup="getFullname">+
<input type="text" v-model="lastname" @keyup="getFullname">=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
fullname: ''
},
methods: {
getFullname() {
this.fullname = this.firstname + '-' + this.lastname
}
}
})
</script>
总结
1、computed 必须return一个值,主要当做属性来使用;methods表示一个方法,主要书写业务逻辑;watch监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是computed和methods的结合体
2、watch相比于methods虽然有时候显得更繁琐,但是在监听非DOM元素时,显示出优势