vue中watch和computed属性作用及区别
watch 作用 :监听值,可监听所有的值,监听指的是只要我所监听的的值发生了改变,就会触发特定的方法,官方案例及写法:var vm = new Vue({el: '#demo',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {//监听了firstNa
·
watch 作用 :监听值,可监听所有的值,监听指的是只要我所监听的的值发生了改变,就会触发特定的方法,
官方案例及写法:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
//监听了firstName这个对象,一旦值发生了改变,就会触发方法体
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
//监听了firstName这个对象,一旦值发生了改变,就会触发方法体
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
});
computed 作用 监听值,也可以计算值
比如:C值 = A值 加 B值,
监听 C值, 如果 A值 或 B值发生了改变,C值就会被改变,或者说是计算,C值不用再data中定义,直接在computed中定义就可以使用了
上代码:
<template>
<div>
<input type="text" v-model="firstName">
<p>{{firstName}}</p>
<input type="text" v-model="lastName">
<p>{{lastName}}</p>
<p>{{fullName}}</p>
</div>
</template>
<script>
// 定义全局过滤器
export default {
data () {
// data中指定两个参数
return {
firstName: 123,
lastName: 456,
}
},
computed: {
// 定义并监听fullName,
// fullName的值 引用了 firstName 和 lastName
// fullName的引用发生了改变,就会触发方法体
fullName: function () {
return +this.firstName + +this.lastName
}
},
mounted () {
this.init();
}
}
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)