前端经典面试题 | Vue的computed 和 watch的区别

🖥️ 前端经典面试题专栏：Vue的computed 和 watch的区别
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

---

目录

一、回答点

二、深入回答

1.实现原理

2.适用场景

---

一、回答点

侦听 响应变化 属性 

computed是模版表达式的声明式描述,会创建一个新的响应式数据.而watch是响应式数据的自定义侦听器,用于响应数据的变化.computed具有缓存性及可依赖多个属性,getter函数没不良作用等特点.watch更适合异步或开销大的操作.

总结:

        computed计算属性:依赖其他属性值,computed有缓存,只有它依赖的值发生改变,下次获取computed的值时才会重新计算它.

        watch侦听器:更多的是起到了观察的作用,无缓存.类似于某数据的监听回调,每当数据发生变化时,就会执行回调进行之后的操作.

二、深入回答

1.实现原理

        computed等同于为属性设置getter函数(也可以设setter),而watch等同于为属性的setter设置回调函数,监听深度deep及相应速度immediate

        1.1 computed原理(四阶段)

        初始化阶段:为computed属性创建lazy watcher (这里watch指向双向绑定中的监听器.)

        模版渲染阶段:渲染watcher检测到computed属性时,调用computed属性的getter方法,而computed属性的getter方法会调用依赖属性的getter,而形成链式调用,并保存引用关系来进行之后的更新.取得结果后,lazy watcher将结果进行缓存,并返回给渲染watcher进行模版的渲染.

        多次模版渲染阶段:直接取lazy watcher中的缓存值给渲染watcher进行渲染

        依赖属性更新阶段:根据模版渲染阶段构建的依赖关系(链式调用)向上通过lazy watcher进行重新计算,缓存计算结果并通过 渲染watcher 对页面进行重新渲染

        1.2 watch原理

        watch本质是为每个监听属性的setter创建了一个watcher,当被监听的数据更新时,调用传入的回调函数.常见的参数有:deep和immediate,对应原理如下:

        deep:深度监听对象,为对象的每个属性创建一个watcher 确保对象的每个属性更新时都会触发传入的回调函数. 主要在于 对象属于引用类型,单个属性的更新并不会触发对象的setter,因此引入deep能够更好的解决监听对象的问题.同时也引入判断机制,在多个属性更新时回调函数仅触发一次,避免浪费资源.

        immediate:在初始化时直接调用回调函数,可以通过created阶段,手动进行调用回调函数实现相同效果

2.适用场景

        当需要进行数值计算,并依赖于其他数据时,使用computed,因为可以利用computed的缓存特性,避免每次获取值都要重新进行计算

        当需要在数据变化时执行异步或开销大的操作时,使用watch,使用watch选项运行执行异步操作,限制执行该操作的频率,并在拿到最终的结果前,设置中间状态.