一、computed和watch都是vue中用于监听数据变化的属性
二、computed计算属性
1、使用方法和data中的数据一样,但是类似一个执行方法
2、在调用时候不加()
3、必须要有return返回
4、如果函数所依赖的属性没有发生变化,从缓存中读取
三、watch监听
1、watch的函数名称必须和data中的数据名一致
2、watch中的函数有两个参数,第一个是newval,第二个是oldval
3、watch中的函数是不需要调用的
4、watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用
5、immediate:true页面首次加载的时候做一次监听
四、区别
1、computed能完成的功能watch都可以完成,watch能完成的功能computed不一定能完成,比如watch可以进行异步操作
2、computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时都会调用回调函数
3、computed必须要有return,watch可以没有
4、使用场景:computed当一个属性受多个属性影响的时候:比如购物车商品结算的时候;watch当一条数据影响多条数据的时候:比如搜索框
**被Vue管理的函数,最好写成普通函数,这样this的指向才是vue或者组件实例对象,所有不被Vue所管理的函数(定时器回调函数、Ajax回调函数、Promise回调函数)最好写成箭头函数,这样this的指向才是vue或者组件实例对象