1. 本际云推荐 - 专业推荐VPS、服务器，IDC点评首页
  2. 云主机运维
  3. VPS运维

VUE底层结构浅析

小编小本本 • • VPS运维

Vue底层结构浅析

作为本际云服务器推荐网的小编小本本，大家对于Vue的使用已经基本上手，但在项目运用中，对于自定义组件、ElementUI组件和自编写组件，需要我们对Vue的底层有一定了解。

VUE底层结构浅析

JavaScript和Vue

Vue页面由JavaScript语言、Vue标签和CSS语法共同组成，Node.js编译的核心语言也是JavaScript。了解该语言的运行有两个阶段：预解析和从上到下执行。JS运行机制主要有单线程和事件循环。在主线程执行时，会形成一个执行栈以及一个任务队列。异步任务会进入栈开始执行，读取过程会不断重复。

Vue源码构建步骤

第一步是使用new Vue()初始化生命周期并通过observer对data进行监听；第二步是调用$mount来执行挂载函数；第三步是启动编译器compile生成渲染函数，并生成虚拟节点树，数据更新改变的数据即是这个虚拟dom上的数值，更新之前通过diff算法的比较，将新老值进行比较，以实现最小的DOM更新。同时，compile编译渲染函数也会进行依赖收集。第四步是watcher观察数据变化，调用渲染函数。第五步是执行patch更新界面。

响应式数据的核心

Vue在初始化数据时，会给data中的属性通过调用object.defineProperty()来劫持各个属性的getter和setter，在数据变化的时候通知订阅者，并触发相应的回调。3.0版本后开始使用Proxy实现响应式，相比Object.defineProperty，Proxy性能更高，也更加灵活。

总之，compile的主要作用是根据template模板，生成render函数。以上是关于Vue底层结构的浅显分析，希望对大家后续使用Vue开发有所帮助。

原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/5916.html

赞 (0)
小编小本本小编小本本
« 上一篇 2023年4月16日 am8:00
下一篇 » 2023年4月16日 am8:00

相关推荐