VUE学习(四)-计算属性与监视
1 计算属性
1.1 什么是计算属性
计算属性一般就是用来通过其他的数据算出一个新数据。一般用于处理在模板中需要多次使用需要通过计算得到新值的情况。
1.2 语法
computed: {
计算属性名称: function () {
return 返回信息
}
}
1.3 示例
例如:如下所示根据输入各科成绩计算总分数及平均分数
代码:
<div id="app">
成绩:
<hr/>
<p>数学:<input type="text" v-model.number="math"/></p>
<p>语文:<input type="text" v-model.number="chinese"/></p>
<p>英语:<input type="text" v-model.number="english"/></p>
<p>总分数:{{sum}}</p>
<p>平均分数:{{average}}</p>
</div>
<script type="text/javascript" src="../plugins/js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
math:83,
chinese:82,
english:80
},
computed: {
sum:function(){
return (this.math + this.chinese + this.english)
},
average:function(){
return Math.round((this.math + this.chinese + this.english)/3)
}
}
})
</script>
这里我们申明了两个计算属性分别为sum和average,在html标签中可以使用大括号表达式将其显示。JavaScript中可以通过例子中的 vm实例获取值,Eg:console.log(vm.average)
1.4 计算属性的getter和setter
计算属性默认只有 getter,不过在需要时也可以提供一个 setter。
getter用于获取值,当需要读取当前属性值的时候回调
setter用于监视属性值的变化,当属性值发生变化是回调
1.4.1 语法
computed: {
计算属性名称: {
// getter
get: function () {
return ...
},
// setter
set: function (newValue) {
// ...
}
}
}
1.4.2 实例
实现如下输入姓名的双向数据绑定
<div id="app">
<p>姓:<input type="text" v-model="firstName"/></p>
<p>名:<input type="text" v-model="lastName"/></p>
<p>姓名:<input type="text" v-model="name"/></p>
</div>
<script type="text/javascript" src="../plugins/js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName:'张',
lastName:'三'
},
computed: {
name:{
get:function () {
return this.firstName + " " + this.lastName
},
set:function (value) { // value监视计算属性的变化值
let nameArr = value.split(" ")
this.firstName = nameArr[0]
this.lastName = nameArr[1]
}
}
}
})
</script>
1.5 特点
(1)计算属性一般就是用来通过其他的数据算出一个新数据
(2)计算属性存在缓存, 多次读取只执行一次 getter 计算,当其他的数据没有发生改变导致计算数据发生变化,它调用的是缓存的数据
2 监听器
用于响应数据的变化。通常情况下计算属性更合适,但当需要在数据变化时执行异步或开销较大的操作时watch更适合
2.1 语法
watch: {
// 如果监听器属性值发生改变,这个函数就会运行
监听器属性名称: function (新值, 旧值) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
}
2.2 示例
<div id="app">
<p>问题:<input type="text" v-model="question"/></p>
<p>答案:{{answer}}</p>
</div>
<script type="text/javascript" src="../plugins/js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
question:'',
answer:''
},
watch:{
question:function (newValue, oldValue) {
//... 执行ajax请求
this.answer = "'" + newValue + "'问题的答案是:哈,就是上一个问题'" + oldValue + "'的答案"
}
}
})
</script>
3 计算属性理解及与watch的区别
1、计算属性用于描述一个值依赖另一个值,当依赖的值发生变化是计算属性值跟着变化,watch用于监听定义的变量,当定义的变量的值发生变化时,调用对应的方法
2、计算属性在可以使用大括号表达式显示器计算属性的值,watch用于监听定义的变量