Vue——计算属性和属性监听

计算属性

计算属性，听上去一头雾水，根本不知道是什么？

简单来说，计算属性就是说我们可以在computed里面定义一个函数，对标签需要显示的变量先进行相应操作之后再输出。

实例

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

先来看看HTML结构，这里面我们的标签引用了两个变量进行显示。

接下来看看JS部分代码↓↓↓↓

data(){
	return {
	  message: 'abcdefg'，
	  reversedMessage: ''
	}
},
computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
}

当需要显示reversedMessage的时候，进入到computed的reversedMessage函数，然后它将message的内容进行反转，然后输出。

属性监听

使用watch，监听一个变量，每当变量变化时，进行响应操作。