<li>最開始的value值：{{ name }}</li>
<li>computed計算后的值：{{ computedName }}</li>
<li>
	watch修改后的值：{{ watchName }}
	<input type="text" v-model="watchName" />
</li>
<li><button @click="handleNumber">修改名字</button></li>

data() {
	return {
		name: "zhangsan",
		watchName: "張三",
	};
},
watch: {
	watchName(newVal, oldVal) {
		console.log("舊的值---->", newVal);
		console.log("新的值---->", oldVal);
		console.log("watch下所有的狀態(tài)都會監(jiān)聽this.name---->", this.name);
		console.log(
			"watch下所有的狀態(tài)都會監(jiān)聽this.computedName---->",
			this.computedName
		);
		this.watchName = newVal;
	},
},
computed: {
	computedName: function (currentThis) {
		console.log(
			"和計算屬性無關的狀態(tài)發(fā)生更改時,不會執(zhí)行，只要依賴的狀態(tài)發(fā)生更改，緩存才會更新",
			currentThis
		);
		return `依賴于name，：${this.name}`;
	},
},
methods: {
	handleNumber() {
		this.name = "lisi";
	},
},

vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做點什么
})
// 函數(shù)
vm.$watch(
  function () {
    // 表達式 `this.a + this.b` 每次得出一個不同的結果時
    // 處理函數(shù)都會被調(diào)用。
    // 這就像監(jiān)聽一個未被定義的計算屬性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做點什么
  }
)

var unwatch = vm.$watch('a', cb)
// 之后取消觀察
unwatch()