不是全网最详细computed对比watch属性

前话不说，我们直接上讲解。

我们先通过一个案例分别用computed和watch来实现。

computed实现（上H5部分，下Vue部分）：

 watch实现：

对比之后，我们可以看到computed比watch更加方便，代码量更少，而且watch当中，有几乎重复的代码。

在官方文档中官方也是说computed更好，但是官方还提出疑问：不是吗？   

那我们再来提一个新的需求：‘姓发生改变的时候，延迟一秒之后全名发生变化’

watch增加一个setTimeout

那我们去给computed增加一个setTimeout

结果：

 

 失败了  fullName直接不见了

我们来分析一下失败原因

setTimeout中有个回调函数，我们return返回到的是回调函数里面，对不对，那不是在fullName里面就不会呈现在页面上，对不对。我们return一下

  

说明确实是computed没有收到返回值，那这样也可以说明computed需要return才能拿到值。

我们来仔细体会一下：

watch是靠自身代码修改去改变结果，但是computed通过return去改变结果。

那是不是可以这样说 在计算属性里面不能开启异步操作去维护数据

结论：computed可以做的事情，watch也可以做

        （在他们两个都能做的时候 我们选择conputed）

           watch能做的事情，computed不一定能做（eg:watch可以进行异步操作）

那我们这里又涉及到了一个隐藏的小细节

在methods，computed，watch里面不能使用箭头函数

什么意思呢 我们还是通过案例来说明（使用watch监视天气案例）

使用的是普通函数

 

打印出来的也是vm 

使用箭头函数

 

打印出来的已经变成了Window

在coding中，会需要用到vm里面包含的值，我们需要拿到它再进行。所以我们使用箭头函数和普通函数分别拿进行对比。（当然，如果说不需要使用到vm，例如弹出对话框 1）那使用什么函数的可以

在methods等里面使用箭头函数会找到window（methods，computed，watch本身就是被vm管理的） 因为在他里面没有找到this指向，那他就会往外面找

那我们就会奇怪了 为什么在watch里面的定时器我们使用了箭头函数 

因为setTimeout确实属于Vue下面的firstName管理，但是setTimeout中包含的回调函数不属于Vue管理，属于浏览器定时管理。那如果没有写箭头函数，this就是window，写了箭头函数，就像上面说的那样，找不到会去外面找，就会找到firstName，而firstName没有写箭头函数，而且他是Vue管理的函数（普通函数），这个时候this就会指向vm了

可能又有疑问了 这么多我们都看迷糊了 这里做了总结：

1.所被Vue管理的函数（computed，methods，watch）最好写成普通函数，this的指向才会到vm或者组件实例化对象。

2.那不被Vue管理的函数（定时器的回调函数，ajax的回调函数）最好写成箭头函数，this指向才会是vm或者组件实例化对象。

不对的地方指出来，学习改正。

本人的学习总结，帮到你了就收藏点个赞吧！