Vue工程

vue-cli 工程技术集合介绍 –

vue.js:vue-cli工程的核心,主要特点是 双向数据绑定 和 组件系统。
vue-router:vue官方推荐使用的路由框架。
vuex:专为 Vue.js 应用项目开发的状态管理器,主要用于维护vue组件间共用的一些 变量 和 方法。
axios( 或者 fetch 、ajax ):用于发起 GET 、或 POST 等 http请求,基于 Promise 设计。
vuex:数据共享管理
创建一个emit.js文件,用于vue事件机制的管理。
webpack:模块加载和vue-cli工程打包器。

vue complier 实现

模板解析这种事,本质是将数据转化为一段 html ,最开始出现在后端,经过各种处理吐给前端。
随着各种 mv* 的兴起,模板解析交由前端处理。
总的来说,Vue complier 是将 template 转化成一个 render 字符串。

可以简单理解成以下步骤: ​

  • parse 过程,将 template 利用正则转化成 AST 抽象语法树。 ​
  • optimize过程,标记静态节点,后 diff 过程跳过静态节点,提升性能。
  • generate 过程,生成 render 字符串

什么是vue-loader?

  • vue-loader就是一个加载器,把vue组件转换成js模块
  • 为何要转译此模块?

可以动态的渲染一些数据
对三个标签做了优化
template 写虚拟dom
script 写es6语法
style 默认可以用scss语法,提供了作用域
并且开发阶段提供了热加载功能

实现 Vue SSR

其基本实现原理
​		app.js 作为客户端与服务端的公用入口,导出 Vue 根实例,供客户端 entry 与服务端 entry 使用。
客户端 entry 主要作用挂载到 DOM 上,服务端 entry 除了创建和返回实例,还进行路由匹配与数据预获取。
​	
​		webpack 为客服端打包一个 Client Bundle ,为服务端打包一个 Server Bundle 。
​	
​		服务器接收请求时,会根据 url,加载相应组件,获取和解析异步数据,创建一个读取 Server Bundle 
的 BundleRenderer,然后生成 html 发送给客户端。
​	
​		客户端混合,客户端收到从服务端传来的 DOM 与自己的生成的 DOM 进行对比,把不相同的 DOM 激活,
使其可以能够响应后续变化,这个过程称为客户端激活 。为确保混合成功,客户端与服务器端需要共享同一套数据。
在服务端,可以在渲染之前获取数据,填充到 stroe 里,这样,在客户端挂载到 DOM 之前,可以直接从 store 里取数据。
首屏的动态数据通过 window.__INITIAL_STATE__ 发送到客户端

​	
​		Vue SSR 的实现,主要就是把 Vue 的组件输出成一个完整 HTML, vue-server-renderer 就是干这事的
		Vue SSR 需要做的事多点(输出完整 HTML),除了 complier -› vnode,还需如数据获取填充至 HTML、
		客户端混合(hydration)、缓存等等。 相比于其他模板引擎(ejs, jade 等),最终要实现的目的是一样的,性能上可能要差点


猜你喜欢

转载自blog.csdn.net/qq_45271323/article/details/105719460