vue的计算和监视属性,附一小实例
Posted zexin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue的计算和监视属性,附一小实例相关的知识,希望对你有一定的参考价值。
1. 计算属性
在computed属性对象中定义计算属性的方法
在页面中使用{{方法名}}来显示计算的结果
2. 监视属性:
通过通过vm对象的$watch()或watch配置来监视指定的属性
当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
通过getter/setter实现对属性数据的显示和监视
计算属性存在缓存, 多次读取只执行一次getter计算
下面我们来看下代码块,重点我已注释
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName">
名: <input type="text" placeholder="Last Name" v-model="lastName">
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1">
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2">
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el: ‘#demo‘,
data: {
firstName: ‘A‘,
lastName: ‘B‘,
fullName2: ‘A-B‘
},
// 计算属性配置: 值为对象
computed: {//什么时候执行?当fullName1被改变或者与其相关的属性被改变都会执行
fullName1 () { // 属性的get()
console.log(‘fullName1()‘, this)
return this.firstName + ‘-‘ + this.lastName //this 这里代表着vm实例
},
fullName3: {
// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
get () {
console.log(‘fullName3 get()‘)
return this.firstName + ‘-‘ + this.lastName
},
// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
set (value) {// fullName3的最新value值 A-B23
console.log(‘fullName3 set()‘, value)
// 更新firstName和lastName
const names = value.split(‘-‘)
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch: {
// 配置监视firstName
firstName: function (value) { // 相当于属性的set
console.log(‘watch firstName‘, value)
// 更新fullName2
this.fullName2 = value + ‘-‘ + this.lastName
}
}
})
// 监视lastName
vm.$watch(‘lastName‘, function (value) {
console.log(‘$watch lastName‘, value)
// 更新fullName2
this.fullName2 = this.firstName + ‘-‘ + value
})
以上是关于vue的计算和监视属性,附一小实例的主要内容,如果未能解决你的问题,请参考以下文章
Vue -- 监视属性watch VS 计算属性computed & 箭头函数和普通函数的this指向问题