作为前端开发者,vue应该是经常使用的,脚手架是做项目的部署方便的利器。 经常用,所以会思考,比如从安装开始,我们会下载nodejs,有没有疑问为啥要下载,因为我们要开启web服务器。然后我们会在下载nodejs的时候,下载一堆的内置模块文件,nodejs是基于Google的引擎,包含了很多内置的模块,比如HTTP,文件读取,流,路径,等等,这些功能,正是因为这些模块,推动了express,与koa 等等web框架的出现。 vue脚手架是用express来启动服务器的,所以下载完nodejs我们需要安装vue脚手架,而安装需要安装依赖,依赖是用来解析编译成浏览器能编译的代码,我们安装成功之后输入npm run dev等等启动npm指令会让vue跑起来,出现localhost的提示。 通过main.js的配置,启动vue渲染的HTML页面,HTML页面包含css,js,HTML。而vue脚手架存在对应编译的依赖,在编译vue组件的时候,比如template部分的时候,会使用webpack的预编译将vue文件转化成js文件,把模板里面的类似html标签转化成虚拟节点,通过diff算法与vue核心的render函数,实现真正dom节点来渲染页面, 在vue组件里面编译到模板部分nodejs会读取文件,转化节点,把静态的部分与动态的部分分开处理,在2.0的vue会处理id与class 但3.0就不再处理,而是注重于动态的处理,来提高性能,而重复过多的HTML会转化成字符串来让vue更快。 遇见指令绑定与{{}}这样的动态部分,会在读取的时候,使用对应的依赖来解析成对应节点的内容与js事件,与css样式。 编译到script的时候,完全采用js的语法来实现内容,通过将script分成规定的属性,比如data,methods,computed等等vue规定的写法,从而把里面的函数方法属性数据实现双向数据绑定,从而实现响应式数据。 把data的数据使用data(){return{}}函数的方法返回之后,使用object.defindprototype来重写成get与set,在初始化加载template模板的时候进行判断里面的动态部分使用的变量是否在data里面,如果不在就报错,在就进行依赖收集,因为第一次加载会渲染内容会触发get depend 而等你改变data触发set的时候会触发通知依赖改变的方法,来让依赖重新加载,从而让观察者通知视图更新,每一个组件都有一个观察者。 那些指令绑定的东西也是这样当改变的时候,观察者会通知视图改变属性。 下面的css样式有less sass 与css之类的写法,如果使用预编译的写法,需要下载预编译的依赖,实现也差不多,在开启写法就会加载预编译,lang=什么,从而使里面的样式字符串在编译的会根据不同的写法来触发正则,判断编译成css标准样式,然后把标准样式打包成css文件在服务器加载的时候来渲染样式 webpack是先把所有的预编译都进行解析编译所以第一次加载会很慢,而且每次加载都会把所有的东西都编译,突出了慢的缺点,所以我们在使用路由组件我们会使用路由懒加载来把组件转化成一个个js文件来实现需要加载什么的时候就采用script src的形式导入,从而让第一次加载的时候不那么慢 随着webpack的使用到现在第四版,出现了vite。 vite也是部署环境的一个东西,相比起来第一次加载快,是因为第一次只启动服务而不编译组件,我们需要编译什么组件的时候就加载请求什么组件,每一次修改都只会重新加载请求修改的东西,这个是使用koa的web服务器与webpack其他方面都差不多。vue率先使用了在3.0 我们要做一个不仅要知道怎么使用,还要去研究里面的东西。 vue3.0通过动态编译组合式api 树摇按需导入从而提高性能,从render函数的修改编译提升更快,更小,把proxy作为响应式的使用,弥补了vue2.0不能检测数组和对象的变化