2022-03-05 vue面试题:methods,computed和watch的区别和各自的使用场景是什么?

一.面试题:methods,watch和computed的异同

2022-02-09 面试题:vue(三) $router和$route的区别,computed和watch的区别

相同点

watch和computed都是观察页面数据变化的

不同点:

• methods不处理数据逻辑关系,只提供可调用的函数
• computed只能当依赖的数据变化时才会计算,当数据没有变化时会读取缓存数据
• watch每次都需要执行函数,适用于数据变化时的异步操作

二.methods,computed和watch的定义和用法回顾

methods

methods不处理数据逻辑关系,只提供可调用的函数

computed

计算属性,会根据所依赖的数据,动态显示新的计算结果并缓存该计算结果
computed的值在getter执行后缓存,若所依赖的数据发生改变会重新调用getter来计算最新结果

watch

是一个对data数据的监听回调,当依赖的data的数据变化时执行回调,
在回调中会传入newVal和oldVal两个参数
vue实例会在实例化时调用$watch(),遍历watch 对象的每个属性

三.从作用机制和性质上看待三者关系

1.作用机制

1.watch和computed的都是已Vue的依赖追踪机制为基础的,它们都视图处理这样一件事情:

当某一数据(称为依赖数据)发生变化时,所有依赖此数据的"相关"数据"自动"发生变化,
也就是自动调用相关的函数,去实现数据的变动

2.methods里面是用来定义函数的,需要手动调用才能执行,而watch和computed是"自动执行"预先定义的函数
总结来说就是,methods里面定义的函数需要主动调用,而watch和computed相关的函数会自动调用,完成我们用户希望完成的作用

2.性质

1.methods里定义的是函数,需要想调用一个函数一样去调用它
2.computed是计算属性,实际上与data对象中的数据属性是一样的
如

computed:{
   
	fullName:function(){
   return this.firstName+this.lastName}
}

在取用时,是用this.fullName去取的,就像取data中的属性一样
3.watch类似于"监听机制"+“事件机制”
如

watch:{
   
fullName:function(val){
   this.fullName=val+this.lastName})
}

firstName的改变时这个特殊"事件"被触发的条件,其对应的函数就相当于监听到事件发生后所执行的回调方法

四.watch 和 computed 的对比

3.1.异同

• 相同点
  都是已Vue的依赖追踪机制为基础的,都是希望在依赖数据发生改变的时候，被依赖的数据根据预先定义好的函数，发生“自动”的变化。
• 不同点:各自处理的数据关系场景不同
  watch擅长处理的场景:一个数据影响多个数据
  computed擅长处理的场景:一个数据手受到个数据影响

3.2.watch擅长处理的场景:一个数据受到多个数据影响

watch使用场景示例

《海贼王》里面，主角团队的名称叫做：“草帽海贼团”，所以我们把船员依次称为：“草帽海贼团索隆”、“草帽海贼团娜美”…
当船团名称发生变更的时候，这艘船上所有船员的名字一起变更(如 “草帽海贼团” 改名为 “橡胶海贼团”)

var vm=new Vue({
   
  el:"#app",
  data:{
   //船员名=海贼团名+名字,数据关系:多个船员名数据依赖于一个海贼团名数据
    ship