这是我参与「第五届青训营 」伴学笔记创作活动的第 14 天
前言
在之前的学习中，我们已经对HTML，CSS和JavaScript有了充分的了解。理论上我们已经能够完整开发web网页的前端部分，但使用原生的三种工具进行开发会出现文件数量大，代码重复率高，造轮子次数过多等情况。JavaScript拥有的dom操作虽然简单易懂，但任何细小的操作都要我们手动获取dom执行的话，既是对程序员技术的极大考验，也大大降低的浏览器的运行效率，在这种情况下，我们就又需要对原生的开发环境进行封装，让开发变得更加简便，vue框架应运而生。
组件化开发流程
Vue的核心思路是组件化开发，那么什么是组件化开发？组件指将一部分能够实现完整功能并且相对独立的HTML，CSS和JavaScript代码分离出来组成一个模块，在vue中以vue文件体验。vue文件能够同时编写这三种语言，这使我们在项目管理上更具有逻辑性。
<templete>
<div>hello world</div>
<!-- html部分 -->
</templete>
<script setup>
//js代码部分
</script>
<style>
/* css部分 */
</style>
响应式数据
Vue采用响应式设计，我们无需直接使用原生dom操作也能对操作节点，大部分情况下我们甚至无需操作节点。
const a = ref(1)
a.value = 2
例如，vue中ref能够构造出响应式变量，我们通过ref的返回对象中的value属性获得我们声明的值。与原生代码不同，我们在修改数据后无需使用dom操作渲染页面，ref函数声明的变量在值修改后能够自动渲染页面。
虚拟dom和diff算法
vue我们做出的数据修改并不是简单的dom操作封装，vue在真实dom的基础上生成了虚拟dom，我们的所有修改都是对虚拟dom进行修改。在我们做出修改后，vue通过diff算法比对的方式，找到我们修改的部分，并只对该部分的虚拟dom重新渲染，这规避了我们通过dom操作导致浏览器中所有元素都被重新渲染的情况。
总结
响应式框架已经成为了当今前端开发的主流，它不仅大大减轻了我们的开发负担，优化了我们的开发体验，也通过采用虚拟dom技术和diff算法比对尽可能减少了重新渲染的次数，提升了浏览器的效率。框架技术也早已成为前端人员的必修课
