理解 Vue.js 如何工作：从编写代码到显示网页

vue.js 是现在很受欢迎的网页开发框架。它让创建网页变得简单，但背后有很多复杂的工作原理。了解这些原理，能帮助我们写出更好的代码。

两种编程方式：命令式和声明式

开发网页有两种主要方式：

一种是命令式，就像给电脑下达详细的步骤指令：

// 创建一个div元素并设置内容和点击事件
const div = document.querySelector('#app')
div.innerText = 'hello world'
div.addEventListener('click', () => { alert('ok') })

这种方式很直接，但代码多了会很难维护。

另一种是声明式，就像告诉电脑你想要什么结果：

<div @click="() => alert('ok')">hello world</div>

Vue.js 使用声明式方法。你只需要描述网页应该长什么样，Vue.js 负责处理中间的所有步骤。

性能的平衡

声明式方法比直接操作dom要多一个步骤：找出需要改变的地方。这会影响性能。Vue.js 的目标是在保持代码易读易维护的同时，尽量减少性能损失。

选择哪种方法要考虑多个因素：

方法	学习难度	维护性	性能	适用情况
原生JavaScript	高	低	最好	简单页面
虚拟DOM	中	高	中等	复杂应用
innerhtml	低	中	较差	静态内容

Vue.js 的工作方式：运行时和编译时

Vue.js 结合了两种工作方式：

纯运行时：直接提供数据给渲染函数
运行时 + 编译时：Vue.js 使用这种方式，既灵活又能优化性能
纯编译时：提前编译所有代码，性能好但不够灵活

Vue.js 选择中间路线，在构建时编译模板，在运行时处理动态变化。

虚拟DOM：Vue的核心

虚拟DOM是一个JavaScript对象，用来描述真实的网页结构：

const vnode = {
    tag: 'div',           // 标签名
    props: {              // 属性
        onClick: () => alert('ok')
    },
    children: 'hello world' // 子内容
}

在Vue中，我们通常用h函数来创建虚拟DOM：

import { h } from 'vue'

export default {
    render() {
        return h('div', { 
            onClick: () => alert('ok') 
        }, 'hello world')
    }
}

这等同于写模板：

<div @click="() => alert('ok')">hello world</div>

虚拟DOM的好处：

批量更新：合并多次操作
跨平台：同一套代码可以在不同环境运行
智能更新：只更新变化的部分

组件：构建块

组件是Vue的基础 building block。一个组件可以是一个对象或函数，返回要显示的虚拟DOM。

编译器：从模板到代码

编译器把Vue模板转换成JavaScript代码。例如这个组件：

<template>
    <div @click="handler">
        hello world
    </div>
</template>

<script>
export default {
    methods: {
        handler: () => alert('ok')
    }
}
</script>

会被编译成：

export default {
    methods: {
        handler: () => alert('ok')
    },
    render() {
        return h('div', { onClick: handler }, 'hello world')
    }
}

Vue 3 的优化技巧

Vue 3 引入了几个重要优化：

静态提升：把不变的部分提到函数外面，避免重复创建
补丁标记：给动态内容加标记，更新时更快找到变化
Tree-shaking：移除没用到的代码，减小文件大小

渲染器：从虚拟到真实

渲染器负责把虚拟DOM变成真实的网页元素。它的工作步骤：

创建对应类型的DOM元素
设置属性和事件
处理子元素
把元素添加到页面中

更新时，渲染器会比较新旧虚拟DOM，只更新变化的部分。

完整的渲染过程

当我们创建一个Vue项目并运行时：

启动阶段

npm create vue@latest
npm install
npm run dev

编译阶段
- Vite 开发服务器启动
- @vitejs/plugin-vue 处理 .vue 文件
- 编译器把模板转换成渲染函数
运行时阶段

浏览器加载JavaScript代码
创建Vue应用
执行渲染函数
生成虚拟DOM
渲染器把虚拟DOM变成真实DOM

热更新：开发时的便利

在开发过程中，当你修改代码保存后，Vue能够立即更新页面而不需要刷新。这是通过Vite的热更新功能实现的：

检测文件变化
重新编译改变的组件
替换旧的组件实例
保持当前状态不变

实际开发建议

合理使用模板：对于大多数情况，模板比手写渲染函数更易维护
注意性能：在列表渲染中使用key属性，帮助Vue识别元素
利用组合式api：Vue 3的组合式API让代码组织更灵活
理解响应式：知道什么情况会触发重新渲染

总结

Vue.js 通过智能的架构设计，在易用性和性能之间找到了很好的平衡。从你写代码到网页显示，Vue处理了很多复杂的工作：

编译器把模板转成渲染函数
响应式系统跟踪数据变化
虚拟DOM描述页面结构
渲染器高效更新真实DOM

理解这些原理不仅有助于解决实际问题，还能帮助我们在合适的场景做出合适的技术选择。无论是简单的展示页面还是复杂的单页应用，Vue.js 都提供了相应的工具和模式来高效完成开发工作。

最重要的是，Vue的设计让开发者可以专注于业务逻辑，而不是底层细节，这正是它如此受欢迎的原因。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13005