Vue2系列-computed和watch

117 阅读3分钟

面试了许多求职者,很多求职者只知其然,而不知所以然,写此文章为广大前端小伙伴指引迷津。纯干货!纯干货!纯干货!

目录

computed和watch

什么是computed?

答:computed是Vue的一个计算属性,并将该属性挂载到Vue实例上。

为什么使用computed?

答:过多的逻辑运算会让模板变得重且难以维护,而且这种转化无法复用,与method相比,它的优势在于缓存,只要依赖的数据未发生变化,则多次访问计算属性对应的函数只会执行一次。

computed的实现原理?

在依赖的读取时,触发get劫持函数,将computedWatcher放进dep依赖里面。

在依赖的更新时,一级一级往上触发更新。会触发computedWatcherupdate,触发 dep.notify(),就会触发watch的update方法,从而更新视图。

什么是watch?

答:watch是Vue的一个监听属性。

为什么使用watch?

答:允许我们执行异步操作(访问一个 API)或高消耗性能的操作,限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态,而这些都是计算属性无法做到的。

watch的实现原理?

在读取监听属性时,触发get劫持函数,将watchWatcher放进dep依赖里面。

在依赖的更新时,触发watchWatcherupdate方法,去更新值之前,先把旧值保存起来,然后把新值和旧值一起通过调用callback函数交给外部

computed面试大白话

答:首先,Template将该属性挂载到Vue实例上一个计算属性其主要目的也是为了过多的逻辑运算会让模板变得重且难以维护,而且这种转化无法复用,与method相比,它的优势在于缓存,只要依赖的数据未发生变化,则多次访问计算属性对应的函数只会执行一次。它的原理就是在依赖的读取时,触发get劫持函数,将computedWatcher放进dep依赖里面,在依赖的更新时,一级一级往上触发更新。会触发computedWatcherupdate,触发 dep.notify(),就会触发watch的update方法,从而更新视图。我们项目里面一般就是一个数据被多个数据影响时,会使用computed。

watch面试大白话

答:首先,watch将该属性挂载到Vue实例上一个监听属性其主要目的也是为了允许我们执行异步操作(访问一个 API)或高消耗性能的操作,限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态,而这些都是计算属性无法做到的。它的原理就是在读取监听属性时,触发get劫持函数,将watchWatcher放进dep依赖里面。在依赖的更新时,触发watchWatcherupdate方法,去更新值之前,先把旧值保存起来,然后把新值和旧值一起通过调用callback函数交给外部。我们项目里面一般就是一个数据影响多个数据,会使用watch。

小白也是新手面试官,欢迎领导莅临指导工作,提出建议,小白不胜感激,不喜勿喷,点赞收藏随机送程序媛小姐姐一枚哦!!!