一、vue 计算属性，方法，侦听器

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_40990854/article/details/88857560

一、计算 属性

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

	注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。
	computed: {
	  aDouble: vm => vm.a * 2
	}

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。

	计算属性：通过已有的属性 可以 计算出 的属性可以省略不定义，用这种方法
	好处：解决 属性的冗杂

举个栗子：这样就可以通过计算属性来得到 fullname 这个属性，不用定义
	var app = new Vue({
		el: "#app",
		data: {
			firstName: 'zhang',
			lastName: 'san',
			// fullName: 'zhangsan'
		},
		// 计算属性
		computed:{
			fullName: function () {
				return  this.firstName + this.lastName;
			}
		}
	})

二、 方法

这里我就说一下 方法 和 计算属性的差异

	如果 是 只要不变的情况下，由于 计算属性有缓存机制，只要 属性不变，方法就不会被再执行
	如果使用 方法的话，每次方法都要执行，所以推荐使用 计算属性

var app = new Vue({
		el: "#app",
		data: {
			firstName: 'zhang',
			lastName: 'san',
			// fullName: 'zhangsan'
		},
		// 方法
		methods:{
			fullName: function () {
				return  this.firstName + this.lastName;
			}
		}
	})

三、侦听器

当 监听 属性发生变化时，监听器才会 被执行，并更新 属性

var app = new Vue({
	el: "#app",
	data: {
		firstName: 'zhang',
		lastName: 'san',
		fullName: 'zhangsan'
	},
	// 监听器
	watch: {
		firstName: function () {
			this.fullName = this.firstName + this.lastName;
		},
		lastName: function () {
			this.fullName = this.firstName + this.lastName;
		}
	}
})