Vue组件的计算属性和普通属性区别、属性侦听器的作用

1、Vue组件的计算属性和普通属性有什么区别?

(1)计算属性

计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。

(2) 声明计算属性

计算属性需要以 function 函数的形式声明到组件的 computed 选项中。

(3)methods选项

• methods:Vue自动为methods绑定this ，以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的this 指向。在定义methods 时应避免使用箭头函数，因为这会阻正Vue绑定恰当的this指向。
• 这些methods和组件实例的其它所有property -样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用:
• methods方法会每次在调用方法时候，都执行一次方法。

(3)区别

• computed 属性是vue的计算属性，是数据层到视图的数据转化映射；

• 计算属性是基于他们的依赖进行缓存的，只有在相关依赖发现改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不在执行函数。只要计算属性依赖的数据项不发生改变，计算属性只会执行一次，然而methods里的方法调用几次就执行几次。

computed	methods
computed 是响应式的	methods并非响应式
调用方式不一样，computed定义的成员像属性一样访问	methods定义的成员必须以函数形式调用。
computed是带缓存的，只有依赖数据发生改变，才会重新进行计算	methods里的函数在每次调用时都要执行。
computed中的成员可以只定义一个函数作为只读属性，也可以定义get/set变成可读属性	这点时methods中的成员做不到的
computed不支持异步当computed内有异步操作时无效，无法监听数据的变化。	可以异步

如果声明的计算属性计算量非常大的时候，而且访问量次数非常多，改变的时机却很小，那就需要用到computed；缓存会让我们减少很多计算量。

2、watch属性侦听器的作用是什么?

Vue内watch侦听器详解:

watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。
vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时，推荐使用该方法。
Vue侦听器是提供给开发者可以用来监测某些数据的变化，从而针对这些数据的变化进行某些操作。
但是要注意：侦听器本质上是一个函数，如果要监听哪一个数据的变化，就把那个数据作为函数名

Vue侦听器的基本语法

Vue侦听器提供了两种语法格式。一种是方法格式的写法，另一种是对象格式的写法。下面我们分别来看：

(1)普通数据类型(方法格式的侦听器)：

		 <input type="text" v-model="userName"/>  
		//监听   当userName值发生变化时触发
		watch: {
			userName (newName, oldName) {
				console.log(newName)
			}
		}
		
		watch: {
			userName: {
				handler (newName, oldName) {
					console.log(newName)
				},
				immediate: true
			}
		}

方法格式的监听器有两个缺点：

1)只有一个缺点 就是当值第一次绑定的时候 不会执行监听函数，只有当值改变的时候 才会执行
2)如果我们想在第一次绑定的时候执行此监听函数 则需要 设置 immediate为true

(2) 对象类型( 对象格式的侦听器)：

当需要监听对象的改变时，此时就需要设置deep为true

<input type="text" v-model="cityName.name" />
		data (){
			return {
				cityName: {name:'北京'}
			}
		},
		watch: {
			cityName: {
				handler(newName, oldName) {
					console.log(newName)
				},
				immediate: true,
				deep: true
			}
		}

对象格式的侦听器有两个优点：

1）可以通过immediate属性，控制侦听器自动触发一次（默认是false）
2）可以 通过deep属性，控制侦听器深度监听到对象中每一个属性的变化

注意点：如果对象的属性较多，可以之监听某一个属性 ‘cityName.name’

注意： 数组类型：

数组的变化不需要深度监听