vue3 源码解析（3）— computed 计算属性的实现

奔雷手.文泰来

已于 2024-05-14 13:26:37 修改

阅读量1.9k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： Vue 源码解析文章标签： vue.js 前端 javascript 前端框架源码解析

于 2024-01-10 15:46:07 首次发布

本文链接：https://blog.csdn.net/AXBNMD/article/details/133919593

前言

computed 是 vue3 的一个特性，可以根据其他响应式数据创建响应式的计算属性。计算属性的值会根据依赖的数据变化而自动更新，而且具有缓存机制，提高了性能。在这篇文章中，我们将深入探讨 computed 的实现原理，并通过源码分析来理解其工作机制。

computed 的基本用法

在 vue3 中，computed 的基本用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed</title>
</head>
<body>
<script src="../packages/reactivity/dist/reactivity.global.js"></script>
<script>
  let {
   
    reactive, computed } = VueReactivity;
  const state = reactive({
   
   
    count: 0
  });
  const double = computed(() => state.count * 2);
  console.log(double.value); // 0
  setTimeout(() => {
   
   
    state.count++;
    console.log(double.value); // 2
  }, 1000);
</script>

</body>
<</