Vue 原理
date
Feb 3, 2022
slug
vue-core
status
Published
tags
原理
summary
MV* 框架已经是前端开发的基石,Vue 属于 MVVM 模型数据响应流。
type
Post
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F19e70c3d-bb81-4c2b-8a13-4b3cac21334b%2F3f7f2026-4ede-448b-ae42-865024ace7d8%2F202192-04920.png%3Fid%3D19360237-bcec-4536-a0ba-eb5e3d1c361d%26table%3Dblock%26spaceId%3D19e70c3d-bb81-4c2b-8a13-4b3cac21334b%26expirationTimestamp%3D1722052800000%26signature%3D9NzmjiydT3Y8QGfGD11lIjnKGI6T47jcD-ZvmzGKaxo?table=block&id=19360237-bcec-4536-a0ba-eb5e3d1c361d&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2F19e70c3d-bb81-4c2b-8a13-4b3cac21334b%2F81f76e4f-f6ef-4e45-adee-7063bbb52c11%2FUntitled.png%3Fid%3Dc4c05d0b-8dc3-44d4-b003-8c4815bb2629%26table%3Dblock%26spaceId%3D19e70c3d-bb81-4c2b-8a13-4b3cac21334b%26expirationTimestamp%3D1722052800000%26signature%3DnBLZoi9uH-WUdqUIhGPWDxbzB2BgEIHd2Ty5BJOw16o?table=block&id=c4c05d0b-8dc3-44d4-b003-8c4815bb2629&cache=v2)
- 对组件的模板进行编译生成渲染函数
- 对组件的数据进行响应式
- 渲染器调用 → 渲染函数 → 绑定响应式数据 → VNode
- 挂载阶段 → VNode → 真实 DOM → 挂载页面
- 当数据变化时将会再次执行 3. 阶段,进行新老 VNode 对比
© jianxiaoBai 2021 - 2024