1 计算属性
在前边有讲到双括号表达式中,可以使用 JavaScript 表达式,但是这种表达式会让我们的模板变得复杂,降低代码的可读性,且难以维护,例如:
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
为了解决这个问题,我们可以使用计算属性:
<div id="app">
<p>{{ message }}</p>
<p>{{ reversedMessage }}</p>
</div>
<script>
// vm 实例
const vm = new Vue({
el : '#app', // element
data : { // model
message : 'Hello world',
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split(' ').reverse().join(',')
}
}
})
</script>
-
计算属性和方法的区别
通过上边的例子,可能你已经发现,将
reversedMessage
定义为一个方法, 不是一样的效果吗?的确是这样,如果定义为一个方法,最终展示的效果是一样的;区别在于,计算属性是基于它们的依赖进行缓存的,只有依赖发生变化时,才会重新计算求值;也就是说如果 message 没有发生变化,计算属性每次能够直接返回正确的结果,而方法每次都会重新计算。
2 侦听属性
虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过
watch
选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变,这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
},
created: function () {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中,我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识,
// 请参考:https://lodash.com/docs#debounce
this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
},
methods: {
getAnswer: function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
}
}
})
</script>
上边的代码,监听了 question
,当发生变化时,调用 getAnswer
方法,发送一个异步请求;但是,使用 watch 监听,只要对应的属性发生了变化,就会调用相关的方法,因此,如果是发生请求到后台,压力会比较大,因此,一般会配置 lodash
一起使用,lodash
主要作用在于,设置一段时间延迟,再去执行相关方法。
-
watch
: 监听的方法,一般由两个参数(newValue, oldValue)
; -
监听对象的某个属性变化:
data() { a: { b: '' } }, watch() { 'a.b': function(val, oldVal) { } }
深度监听,有时候我们监听对象属性的变化,但是,属性特别多,我们只需要某一个属性变化,就认为对象变化,可以使用深度监听
watch() { a: { handler (val, oldVal) { //... }, deep: true } }
-
计算属性和侦听属性的区别:
根据上边的介绍,好像计算属性和侦听属性类似,那它们的区别在哪呢?计算属性具有缓存,可以计算多个变量;而侦听属性,只能侦听一个特定的值,适用于当一个值发生变化时,执行相关的操作。