watch属性的使用

watch，是一个键值对，键是要要监测的表达式，可以是props元素也可以是data元素等，
值可以是string， Function， Object， Array。他的作用就是监听表达式变化，并且根据变化
进行相应的操作。

简单使用：

<template>
	<div>{{ text }}</div>
</template>
<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				text: ''
			}
		},
		watch: {
			text: function (newData, oldData) {
				console.log('监听到text变化---', oldData, newData)
			}
		},
		mounted() {
			let _this = this
			function clock() {
				let i = 0
				return setInterval(function() {
					i++
					_this.text = i.toString()
				}, 1000)
			}
			let timer = clock()
		}
	}
</script>

其他使用

<template>
	<div>{{ content.text }}</div>
</template>
<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				content: {
					text: ''
				}
			}
		},
		watch: {
			content: {
				handler(newData, oldData) {
					console.log('watch监听---', newData.text, '---', oldData)
				},
				immediate: true, // 注释一
				deep: true // 注释二
			}
		},
		mounted() {
			let _this = this
			function clock() {
				let i = 0
				return setInterval(function() {
					i++
					_this.content.text = i.toString()
				}, 1000)
			}
			let timer = clock()
		}
	}
</script>

注释一

immediate为true时，当组件初始化时就已经开始监听（即beforeCreate阶段）

immediate为false时，只有改变时才会监听

注释二
deep可以检测到对象内部属性的变化，数组除外。
1、deep为true时

2、deep为false

特别注意：

watcher定义函数不可以使用箭头函数。箭头函数绑定了父级作用域的上下文章，
而不会指向vue示例。