IT入门 > 面试题 > vue题库 > vue基础 >

IT入门 > 面试题 > vue题库 > vue基础 >

实现 Vue SSR

  你会看到这个提示,那是因为你的系统无法识别某栏目的模型信息,或者你新建模型后,没为这个模型设计单独的模板。不同模型的文档浏览页的模板为:article_模型名字标识.htm 如“article_article.htm”,更多的信息你可以在频道模型管理的地方查看。
附加标题 内容:
模板调用标记:
题型:1单选,2多选,3填空,4问答,5排序 内容:
模板调用标记:
4
选项A 内容:
模板调用标记:
选项B 内容:
模板调用标记:
选项C 内容:
模板调用标记:
选项D 内容:
模板调用标记:
答案 内容:
模板调用标记:

其基本实现原理

  • app.js 作为客户端与服务端的公用入口,导出 Vue 根实例,供客户端 entry 与服务端 entry 使用。客户端 entry 主要作用挂载到 DOM 上,服务端 entry 除了创建和返回实例,还进行路由匹配与数据预获取。
  • webpack 为客服端打包一个 Client Bundle ,为服务端打包一个 Server Bundle
  • 服务器接收请求时,会根据 url,加载相应组件,获取和解析异步数据,创建一个读取 Server BundleBundleRenderer,然后生成 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 等),最终要实现的目的是一样的,性能上可能要差点
难度:1入门级,2初级,3中级,4高级 内容:
模板调用标记:
3
专业分类 内容:
模板调用标记:
(责任编辑:zengmumu)
    广告位API接口通信错误,查看德得广告获取帮助