当前位置：首页 > news >正文

vue3框架的响应式依赖追踪机制

news 来源：原创 2025/5/22 2:04:17

当存在一个响应式变量于视图中发生改变时会更新当前组件的所以视图显示，但是没有视图中不写这个响应式变量就就算修改该变量也不会修改视图，这是为什么？我们能否可以理解宽泛的理解为vue组件的更新就是视图的更新，单当视图中不存在响应式变量时，就算组件数据更新，视图也不会更新，确实，我们发现在Vue3中，组件的更新与视图更新的关系需要结合响应式依赖追踪机制来理解。我们的观察是正确的：当响应式变量未被组件渲染逻辑依赖时，即使变量被修改，视图也不会更新。以下是具体原因和机制分析：

核心原理：依赖追踪与渲染触发

响应式系统的触发条件
Vue3通过Proxy代理数据，当组件渲染时（如模板解析、计算属性计算等），会自动进行依赖收集。只有被访问过的响应式变量才会被记录为依赖。
• 示例：若模板中使用了{{ count }}，count会被标记为依赖；若未使用，则不会被追踪。
视图更新的触发逻辑
当响应式变量被修改时，Vue会检查该变量是否仍有活跃的依赖（即是否被当前组件或子组件使用）。若无依赖，则不会触发视图更新。
• 示例：若父组件修改了传递给子组件的非响应式数据，但子组件未使用该数据，子组件视图不会更新。

具体场景分析

场景1：响应式变量在模板中被使用

<template>
  <div>{{ count }}</div> <!-- count被访问，触发依赖收集 -->
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

• 修改count时：Vue检测到count被访问过，触发依赖更新，视图重新渲染。

场景2：响应式变量未被模板使用

<script setup>
import { ref } from 'vue';
const count = ref(0);
// 仅在JavaScript逻辑中修改，未在模板中使用
count.value = 1;
</script>

• 修改count时：由于count未被渲染逻辑依赖，Vue不会触发视图更新。

示例：

<!-- 父组件A -->
<template>
  <div class="wrapper">A</div>
  {{ list }}
  <hr>
  <B :list="list"></B>
</template>

<script setup>
import { ref } from 'vue';
import B from './B.vue';
let list = [1,2,3,4,5,6,7,8,9,10];
let count = ref(0);
setTimeout(()=>{
  list = [1,2,3,4,5,6,7,8,9,10].reverse();
  console.log("func",list);
  count.value = 1;
},2000)
</script>

<!-- 子组件B -->
<template>
  <div class="wrapper">B</div>
  {{ props.list }}
  <hr>
</template>

<script setup>
import { onBeforeMount ,defineProps} from 'vue';
let props = defineProps(['list','count']);
setTimeout(() => {
  console.log("三秒后",props.list)
  console.log(props.count);
}, 3000);
</script>