Vue视图响应式更新是如何实现长尾词自动同步的？

本文共计1339个文字，预计阅读时间需要6分钟。

目录+概述+思路+第一步：统一封装更新函数+第二步：监听并触发视图更新+引入Dep管家+实现下语法糖v-model+概述+前言两篇文章已实现数据变化的监听以及模板语法编译初始化

目录

• 概述
• 思路
• 第一步统一封装更新函数
• 第二步监听并触发视图更新
• 引入Dep管家
• 实现下语法糖v-model

概述

前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化，但是当数据变化时，视图还不能够跟随数据实时更新。本文就在之前的基础上介绍下视图响应式更新部分。

思路

统一封装更新函数

待数据发生改变时调用对应的更新函数

这里思考个问题：

在何时注册这个更新函数？

如何找到对应的更新函数？

第一步统一封装更新函数

基于上篇文章compile的部分，将数据初始化的部分统一封装起来。