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: