功能不同
- computed是计算属性,会根据依赖数据的变化动态的显示新的计算结果
- watch是监听一个值的变化,执行相应的回调,在方法中传入新值和老值
- methods是挂载在对象上的函数,不处理数据逻辑,只提供可手动调用的函数
是否调用缓存不同
- computed的计算结果会被缓存,如果依赖的属性值没有变化,会从缓存中取,只有当依赖的属性值发生改变时才会重新调用对应的getter计算
- watch在每次监听的值发生变化时,都会执行回调
默认监听不同
- computed默认在第一次加载时就开始监听
- watch默认第一次加载不做监听,如果想要第一次加载就做监听,主要添加immediate的属性为ture
是否调用return
- computed中的函数必须要用return返回
- watch中的函数不是必须使用return
使用场景不同
- computed:由于vue的{{}}中也可以写一下简单的js计算,但如果在页面中使用太多的逻辑表达去处理数据时,会影响页面的可维护性,适用于比较费时但不需要重复计算的环境,如果一个数据依赖于其他的属性,可以把这个数据设计成computed
- watch:在某个数据变化时需要执行一些操作,使用watch来观察变化