vue整体流程

原创于 2024-04-26 16:13:49 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文概述了Vue框架中的关键步骤，包括数据管理（data劫持），模板到虚拟DOM的转换，响应式系统（依赖检测和$set），以及异步更新（nextTick）和自定义混入（mixin）在实现动态渲染中的作用。

vue整体流程
1.data添加数据劫持
2.模版编译成ast ast转render
3.执行render 生成虚拟dom 虚拟dom转真实dom
页面数据呈现

4.为属性添加dep 组件添加wather dep wather相互依赖实现响应式
5.这样实现会导致数据同步更新页面也会同步渲染所以通过异步更新的方式来实现页面渲染
6.vue 页面异步更新 nextTick实现优雅降级
7.给每一个对象/数组添加dep 实现数组修改页面刷新 $set也会通过对象dep来实现
8.实现vue.mixin混入自定义混入规则