计算属性和侦听器都可以监听到data区数据的变化,当数据变化时可以触发方法的调用,从而在方法内部可以进行相应的逻辑处理。
计算属性的语法格式是:computed: {}
侦听器的语法格式是:watch: {}
一、计算属性
计算属性一般是为了简化模板中的内容,让模板中内容尽可能简洁。如果我们将太多的逻辑写在模板中,模板将会变得难以维护。
下面举一反例,我们将字符串逆序的逻辑写在模板中。
<div id="app"> <div id="example"> {
{ message.split('').reverse().join('') }} div>div><script> let vm = new Vue({
el: '#app', data: {
message: 'Hello World' } })script>
如果我们将字符串逆序的逻辑抽取到计算属性中,模板会更清晰,改造如下:
<div id="app"> <div id="example"> {
{ resMsg }} div>