methods、computed、watch的区别

methods

methods是方法，也就是函数，是通过事件驱动来执行函数的是被动的。
methods不进行缓存，每次都重新执行
案例：

image.png

image.png

每次都会重新执行new Date()，不会进行缓存。

computed

computed是计算属性。
特点：
1、有缓存，data不变不会重新计算
2、不支持异步
3、适合多对一，也就是多个属性计算出一个值
4、在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。
例子：

image.png

不刷新页面，computedDate值永远都是这个，computed缓存

watch

watch是监听，和computed类似，监听的数据发生变化才会触发。
特点：
1、不支持缓存，数据变，直接会触发相应的操作；
2、watch支持异步；
3、监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4、适合一对多，一个属性变化影响多个属性
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
immediate：组件加载立即触发回调函数执行，
deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。
比如
info: { city: '北京'
}
不加deep就监听不到city值的变化

所以，watch适合异步或开销大的数据操作。
例子：

输入框只有变动了就会触发watch监听