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 等),最终要实现的目的是一样的,性能上可能要差点