Vue加载页面的工作原理

时间:2024-03-31 09:22:58

一、对于下面的页面vue是如何工作的

Vue加载页面的工作原理

二、原理解析

首先、浏览器对页面代码是解析执行的这毋容置疑,也就是浏览器在解析页面代码的时候,会自上而下进行解析,因此得出第一个结论:上图中和vue相关的插值表达式会原样输出,不会进行插值表达式的解析,所以你会看到页面显示时闪了一下后插值表达式就被替换为了对应的值了。

其次、当解析到vue 框架引入的行后,会将框架代码加载至浏览器内存中。

再次、当加载到new的Vue对象时,对调用框架定义好的构造函数,将参数传递给vue,vue在构造函数中对#app进行解析转换,然后在内存中,将#app中属于vue的语法部分内容进行替换,最终dom从新渲染后,就能得到我们最终想要的效果。