VUE初学--关于VUE的计算属性computed

计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

	<div id="app">
		<div>{{ cityList.split('').reverse().join('-') }}</div>
	</div>
	var vm = new Vue({
		el:'#app',
		data:{
			cityList:'广东 深圳'
		}
	})
	// 输出的结果为深圳-广东

所以，对于任何复杂逻辑，你都应当使用计算属性。
在 computed 属性对象中定义计算属性的方法，在页面中使用 {{ 方法名 }} 来显示计算的结果。
计算属性的用法， 例子：

	<div>Original:message----->{{ message }}</div>
	<div>Computed reversed message----->{{ ReverseMessage }}</div>
	// 注：vm.ReverseMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所依赖的 vm.reversedMessage 的绑定也会更新。
	// vm.reversedMessage 的值始终取决于 vm.message 的值，在控制台输出 vm.message = '难忘南墙' 修改 ReverseMessage
	var vm = new Vue({
		el:'#app',
		data:{
			message:'南墙已撞 故事难忘'
		},
		// 计算属性
		computed:{
			ReverseMessage: function() {
				// this 指向 vm 实例
				return this.message.split('').reverse().join(',');
			}
		}
	})
	// DOM 输出 Original:message----->南墙已撞 故事难忘  Computed reversed message----->忘,难,事,故, ,撞,已,墙,南 

1、计算属性还可以依赖多个Vue 实例的数据， 例子：

	<button @click="f1">点击</button>
	<div>数值Num------>{{ ReverseNum }}</div>
	<div>Methods Message---->{{ MethodReverseMessage() }}</div>
	var vm = new Vue({
		el:'#app',
		data:{
			message:'南墙已撞 故事难忘',
			number:{
				num1:2,
				num2:2
			},
			number1:{
				num3:2,
				num4:2
			}
		},
		computed:{
		// computed 计算属性则会对数据进行绑定，储存在缓存中，意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果
			ReverseNum: function() {
				// this 指向 vm 实例
				return this.number.num1 * this.number.num2 + this.number1.num3 * this.number1.num4  // 数字会随着点击不停改变
			}
		},
		methods:{
			f1:function() {
				this.number.num1++
			},
			// 每当重新触发时 总会 重新渲染
			MethodReverseMessage: function() {
				return this.message.split('').reverse().join(',')
			}
		}
	})
	// Methods Message：---- 忘,难,事,故, ,撞,已,墙,南

2、 计算属性还可以依赖多个Vue 实例的数据

	<div id="app1">{{ message}}</div>
	<div id="app1">{{ reverText }}</div>
	var vm = new Vue({
		el:'#app',
		data:{
			message:'南墙已撞 故事难忘'
		}
	})
	var vm1 = new Vue({
		el:'#app1',
		computed:{
			reverText:function() {
				return vm.message.split('').reverse().join('-')
			}
		}
	})
	// DOM输出 忘--难--事--故-- --撞--已--墙--南

3、侦听属性
Vue 提供的一种更通用的方式来观察和响应 Vue 实例上的数据变动 ，数据需要随着其它数据变动而变动（实时更新）

	<div>
		// input 中输入时，p 中的文案相应的发生改变
		messageFirst-----><input type="text" v-model="messageFirst">
		<p>{{ messageSecond }}</p>
		<p>{{ fullName }}</p>
	<div>
	var vm = new Vue({
		el:'#app',
		data:{
			messageFirst:'',
           	messageSecond:''，
           	firstNmae:'lewis',
           	lastName:'liu',
           	fullName:'lewis.liu'
		},
		watch:{
			messageFirst:function(val) {
				this.messageSecond = val
			},
			firstName:function(val) {
				this.fullName = val + '.' + lastName 
			},
			lastNmae:function(val) {
				this.fullName = firstName + '.' + val
			}
		},
		computed:{
			/*fullName: function() {
                   return this.lastName  + '.'+this.firstName
			}*/
		}
	})

4、计算属性的 setter
计算属性的 setter 计算属性默认只有 getter 需要是可以提供一个 setter

	<div>fullName------>{{ MsgFullName }}</div>
	var vm = new Vue{
		el:'#app',
		data:{
			firstName:'成都',
			lastName:'赵雷',
			// fullName:'成都 赵雷'
		},
		computed:{
			MsgFullName:{
				// 计算属性默认 回调函数 当需要读取当前属性值是执行，根据相关数据计算并返回当前属性的值
				get:function(){
					return this.firstName +' ' + this.lastName // 成都赵雷
				},
				set:function(val){
					console.log(val) // val就是MsgFullName的最新属性值
					var names = val.split(' ')
					this.firstName = names[1]
					this.lastName = names[0]
				}
			}
		}
	}
	// 在控制台输出vm.MsgFullName = '我曾 隔壁老樊'  ;set:监视当前属性值的变化，当属性值发生变化时执行，更新相关的属性数据

5、附：Vue之computed(计算属性)详解get()、set()
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：Vue之computed(计算属性)详解get()、set()

	<div>
        <p>La-->名：<input type="text" v-model="firstName1"></p>
        <p>Lb-->姓：<input type="text" v-model="lastName1"></p>
        <p>Lc-->姓名1: <input type="text" v-model="fullName2"></p>
        <p>Ld-->姓名2： <input type="text" v-model="fullName3"> </p>
    </div>
	var vm = new Vue{
		el:'#app',
		data:{
			firstName1:'画',
            lastName1:'赵雷',
            // fullName:'画 赵雷'
		},
		computed:{
			fullName2: function() {
               return this.firstName1 + ' ' + this.lastName1
            },
            fullName3: {
                get:function() {
                    return this.firstName1+ ' ' + this.lastName1
                },
                set:function(val) {
                    var names = val.split(' ')
                    this.firstName1 = names[1]
                    this.lastName1 = names[0]
                }
            }
		}
	}

1、修改La和Lb时，Lc和Ld都会发生相应的变化
2、修改Lc时， La、Lb、Ld都不会发生改变
3、修改Ld时，La、Lb、Lc都会发生改变

关于VUE.js的计算属性文档参考链接：计算属性和侦听器：https://cn.vuejs.org/v2/guide/computed.html