methods
methods是方法，也就是函数，是通过事件驱动来执行函数的是被动的。
methods不进行缓存，每次都重新执行
案例：
<template>
<div>
<button @click="getMethodsDate">methods</button>
</div>
</template>
<script>
export default {
methods: {
getMethodsDate(){
alert(new Date())
}
}
}
</script>
image.png
image.png
每次都会重新执行new Date()，不会进行缓存。
computed
computed是计算属性。
特点：
1、有缓存，data不变不会重新计算
2、不支持异步
3、适合多对一，也就是多个属性计算出一个值
4、在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
例子：
<template>
<div>
<button @click="getMethodsDate">methods</button>
<button @click="getComputedDate">computed</button>
</div>
</template>
<script>
export default {
methods: {
getMethodsDate() {
alert(new Date());
},
getComputedDate() {
alert(this.computedDate); // 弹出computedDate的内
},
},
computed: {
computedDate: function () {
return new Date();
},
}
};
</script>
image.png
不刷新页面，computedDate值永远都是这个，computed缓存
watch
watch是监听，和computed类似，监听的数据发生变化才会触发。
特点：
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、适合一对多，一个属性变化影响多个属性
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。
比如
info: { city: '北京'
}
不加deep就监听不到city值的变化
所以，watch适合异步或开销大的数据操作。
例子：
<template>
<div>
<input v-model="name" />
<input v-model="info.city" />
</div>
</template>
<script>
export default {
data() {
return {
name: "jack",
info: {
city: "北京",
},
};
},
watch: {
name(oldVal, val) {
console.log("watch name", oldVal, val); // 值类型，可正常拿到 oldVal 和 val
},
info: {
handler(oldVal, val) {
console.log("watch info", oldVal, val); // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
},
deep: true, // 深度监听,可以监听子属性
},
},
};
</script>
输入框只有变动了就会触发watch监听
