面试官:你真的弄懂了Vue的响应式原理吗?

fezl
  • 35

面试被问到 Vue 的 响应式原理。本以为是信手拈来了。在我说完 WatcherDepObserver 后,面试官给出了以下代码,问了以下问题:

  1. template里写了两个 {{a}},为什么 dep 里只有一个 awatcher
  2. 执行this.b = false 后,再更改 a 的值,不会重新出发渲染。Vue 是怎么做到这一点的?
<template>
    <div v-if="b">
        {{a}}
        {{a}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                a: 'text',
                b: true,
            }
        },
        mounted() {
            this.b = false;
            setTimeout(() => {
                this.a = 'text2';
            }, 1000);
        }
    }
</script>
回复
阅读 396
1 个回答
✓ 已被采纳

从源码分析
1、使用id判断是否已经存在依赖,已经存在不会在添加
image.png

2、组件重新渲染会运行cleanupDeps清空依赖,并重新收集依赖
image.png
image.png
image.png

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏