难度级别:中高级及以上 提问概率:70%
二者都是用来监听数据变化的,而且在日常工作中大部分时候都只是局限于简单实用,所以到了面试中很难全面说出二者的区别。接下来我们看一下,二者究竟有哪些区别呢?
先说computed,它的主要用途是监听其他数据变更后,最终返回新的值;它内部包含set和get方法,当监听数据发生变化时,会调用内部的set方法,当业务组件中读取computed某个计算属性的时候,则会调用get方法;computed可以监听data数据依赖,也可以监听props数据;最重要的是由于computed内部的set/get机制,使得它具有缓存性,也就是说如果监听数据不发生变化的情况下,可以直接取缓存中的计算结果。
再说watch,watch的主要用途是监听某个数据变更后,根据值的变化具体做出一些业务逻辑上的处理,甚至可以发送异步请求;它接收两个参数,分别是newVal(更新后的新值)和oldVal(更新前的旧值),不过oldVal是非必须的;它可以监听data数据依赖,可以监听父组件传递过来的props数据,还可以监听computed计算属性值;由于watch的主要目的是做业务逻辑,那么它并不支持对数据的缓存;但需要注意的是,如果监听的是复杂数据类型,就需要在watch方法中添加deep属性,如果监听基本数据类型的变量则不需要添加deep属性。
所以,综合来看,computed监听一个或多个依赖值的变化,最终返回一个值;watch监听一个依赖值的变化,并且可以做出更多复杂的操作。
刷题思考
其实computed和watch在使用上并不难,面试中除了将本小节的内容做为参考答案以外,computed内部是如何实现缓存的,这一点要着重了解一下。面试官不一定会让求职者当场写代码,但描述一下实现过程还是很有可能的。
类似考点
这一节主要说的是组件内监听数据变化的相关知识,与之类似,面试官很可能还会问以下这些问题,例如页面中有一个区域,当这个区域滚动到页面顶部的时候就做吸顶处理,请问该如何实现?例如请知道computed内部实现缓存的工作原理吗?例如你知道watch中的deep属性有什么作用吗?