vue的计算属性

vue 计算属性：
有的时候我们需要在模板中使用数据，这个时候就需要用到表达式，但是有的地方我们需要对数据进行一些简单的处理后才能使用，那么我们就会在表达式中写一些js逻辑运算，如下

<div id="example">
	    {{ message.split('').reverse().join('') }}
	</div>

如果表达式过长，或逻辑复杂时，代码就会变得难以阅读和维护，在遇到复杂的逻辑时不应该使用表达式而是使用计算属性

<div id="app">
	<!-- {{ message.split('').reverse().join('') }} -->
	<p>{{message}}</p>
	<p>{{inverted}}</p>
</div>

<script type="text/javascript">
			let vm = new Vue({
				el:"#app",
				data:{
					message:'123456789'
				},
				//计算属性
				computed:{
					inverted(){
						  return this.message.split('').reverse().join('')
					}
				}
			})
		</script>

计算属性虽然也是使用的函数但是文本插值函数 后面不能加()

<div id="app">
	 使用 <p>{{inverted}}</p>没问题
	 使用  <p>{{inverted()}}</p>会去methods找，而methods什么都没有，就会报错
</div>

computed:{
	inverted(){
		return this.message.split('').reverse().join('')
			  }
		}，
methods:{
		}

计算属性和方法
我们可以在methods设置一个方法，它和计算属性的结果是相同的，但是使用方法每次渲染的时候都会执行这个函数，而计算属性有缓存，只有相关依赖发生变化才会重新进行求值，否则会返回之前的结果

计算属性的 set
一般来说计算属性是默认get但是也能使用set，这时候就应该使用对象的方式

<div id="app">
			<input type="text" v-model="examine"/>
			<h2>{{message}}</h2>
		</div>

<script type="text/javascript">
			let vm = new Vue({
				el:"#app",
				data:{
					message:"你好"
				},
				computed:{
					examine :{
						get(){
							return  this.message
						},
						set(val){
							 this.message = val
						}
					}
				}
			})
		</script>