03-vue中补充(渲染方式SSR与CSR,nuxt[简单说安装,路由,视图,异步数据,生命周期],vuex简单说,keepalive)

最新推荐文章于 2023-07-18 22:57:27 发布

大力99

最新推荐文章于 2023-07-18 22:57:27 发布

阅读量596

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/Tangoneone/article/details/106961738

版权

笔记专栏收录该内容

67 篇文章 7 订阅

订阅专栏

关于优化

01 - SPA

在 vue 这个阶段中我们所学的：黑马面面项目 & 黑马头条项目。其实都是单页应用

全称：Single Page Application （单页面应用）

概念：

网站的效果都是显示在一个静态页面中的
在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改
在网站的源代码中是看不到任何数据（关键字）的

特点：

优点：
- 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
- 基于上面一点，SPA 相对对服务器压力小；
- 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
- 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
- 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；（vue-router 已经解决了这个问题）
- SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。
  - 因为单页应用的所有内容都在 index.html 中，页面的切换是通过 js 动态切换的
  - 由于所有的内容切换都是通过 js 动态切换的，所以在页面的源代码中是看不到任何的数据的
  - 由于源代码中看不到任何数据，这是非常不利于 SEO 的，所以我们说 SPA 在 SEO 上有其天然的弱势。
  - vue 中的 SSR 就可以用来解决这个问题。

02 - SEO

总结: 用户在搜索关键字时，让我们的网站排名更加的靠前，这个过程叫做 SEO 优化

全称： Search Engine Optimization （搜索引擎优化）

作用：

提高网站关键字的排名
当我们在搜索引擎上搜索一些关键字，SEO 可以让我们的网站排名尽可能的靠前

具体的实现：

1.0 花钱买排名（与程序员无关）
2.0 可以广发外链（与程序员无关）
3.0 结构语义化（与程序员相关）
- 搜索引擎在搜索关键字时，会有自己的一套算法（网络爬虫）：
  - 网络爬虫会去目标网站上去抓取与关键字有联系的信息
  - 网络爬虫抓取的方式是：浏览网站的源代码，寻找与关键字相匹配的信息，最终将与关键字匹配度最高的网站进行显示。
- 总结：如果要提高网站的排名，必须在源代码中有关键字信息。

渲染方式

SPA 的渲染特点：页面上的数据，是通过 js 动态渲染的，所以在源代码是看不到数据的（像这种渲染方式，叫做：客户端渲染：CSR）

01 - CSR

在这里插入图片描述
全称：Client Sider Render（客户端渲染）=> 前后端分离

特点：

1.0 完成实现了前后端分离
- 后端：提供数据接口
- 前端：调用接口，渲染数据
2.0 由于数据的渲染是在前端完成了，并且是通过 js 动态完成的：所以在操作过程中网站的源代码中看不到任何数据。

案例：

步骤：
- 1.0 创建一个服务器
- 2.0 响应一个客户端
- 3.0 在服务器中提供一个数据响应的接口
- 4.0 在客户端中通过异步请求去请求这个接口
- 5.0 通过 js 将数据动态渲染到页面上

02- SSR

在这里插入图片描述
全称：Server Sider Render（服务端渲染）=> 混合式开发

特点：

1.0 没有前后端的分离：
- 只有后端
  - 得到静态页面
  - 得到动态数据
  - 将页面与数据进行结合，形成一个完整的 html 结构，最终将 html 结构响应回浏览器
- 没有前端
2.0 由于数据是在服务端直接渲染完成的，所以在源代码中可以看到数据的。
3.0 相对 CSR，它对于 SEO 更加友好

案例：

步骤：
- 1.0 创建一个服务器
- 2.0 设置一个接口：用来返回一个完整的 html 页面（数据+结构）
- 3.0 在浏览器中请求这个接口就可以了

03-vue 中的 SSR

在这里插入图片描述

vue 自身提供了 SSR 的第三方包，我们可以直接使用这些第三方包来开启 SSR
传送门: 点这里.

注意点：

由于 vue 中自带的 SSR 对于其它的知识点要求过高，学习成本太大
vue 的官方建议，可以直接学习 nuxt.js

在这里插入图片描述

// 以 SSR 的方式来渲染实例
const server = require('express')()
// 1.0 创建一个 vue 实例
const Vue = require('vue')

// 创建一个服务器渲染的对象
const renderer = require('vue-server-renderer').createRenderer()

// 设置路由
server.get('*', (req, res) => {
    // 创建的 vue 实例
    const app = new Vue({
        data: {
            url: req.url,
            myname: 'xjj'
        },
        template: `
            <div>
                <div>访问的 URL 为： {{ url }}</div>
                <div>{{ myname }}</div>
            </div>
        `
    })
    // 将 vue 实例渲染为 html
    renderer.renderToString(app, (err, html) => {
        if (err) return
        res.setHeader('Content-Type', 'text/html;charset=utf-8')
        res.end(`
            <!DOCTYPE html>
            <html lang="en">
                <head>
                    <title>Hellow</title>
                </head>
                <body>
                    ${html}
                </body>
            </html>
        `)
    })
})

// 开启服务器
server.listen(3000, () => {
    console.log('running')
})

Nuxt.js

官网： https://zh.nuxtjs.org/

说明：nuxt.js 是 vue 中的一个服务端渲染框架

总结：

它是一个基于 vue2.x 的一个服务端渲染框架

01 - 安装

从头开始新建项目

步骤：
- 1.0 创建一个文件夹 & 进入这个文件夹
  $ mkdir <项目名>
  $ cd <项目名>
- 2.0 初始化这个项目npm init -y 出现package.json文件
- 3.0 设置启动指令：
```
// package.json
{
	"scripts": {
		"dev": "nuxt"
	}
}
```
- 4.0 安装 nuxt
```
npm i --save nuxt 
```
- 5.0 创建 pages 目录 $mkdir pages
- 6.0 在 pages 目录下新建一个 index.vue 项目
- 7.0 启动项目
```
npm run dev
```

02 - 路由

基础路由
在这里插入图片描述

 <!-- pages 下面的结构 -->
 pages/
 --| user/
 -----| index.vue
 -----| one.vue
 --| index.vue
 <!-- 生成路由,直接在浏览器照着路径打就可以出来相应路由出来的页面不用自己配置响应的路由 -->
 router: {
   routes: [
     {
       name: 'index',
       path: '/',
       component: 'pages/index.vue'
     },
     {
       name: 'user',
       path: '/user',
       component: 'pages/user/index.vue'
     },
     {
       name: 'user-one',
       path: '/user/one',
       component: 'pages/user/one.vue'
     }
   ]
 }

动态路由
在这里插入图片描述

// 结构
pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
// 生成的路由
router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}

03 - 视图

nuxt.js 允许我们定义一些类似于模板之间的结构，供所有的页面来使用

在这里插入图片描述

模板
- 作用：可以给页面提供默认的结构
- 用法：根目录下创建一个 app.html 的文件
- 注意点：创建之后，需要重启服务器
布局：
- 作用：与模板基本一致，但是布局中可以使用逻辑代码
- 用法：根据目录下创建一个 layouts 文件夹，在文件夹下创建一个 default 文件

04 - 异步数据

在这里插入图片描述

使用 SSR 的方式为渲染数据

在这里插入图片描述

asyncData 函数：
- 作用：asyncData中的代码就相当于我们在中台服务器中执行的,可以让渲染数据变为 SSR 的方式
- 注意点：
  - 1.0 asyncData 中无法使用 this
  - 2.0 如果需要将 asyncData 中的数据返回给外界使用，需要通过 return
  - 3.0 asyncData 中返回的数据用法与 data 中的数据一样

Nuxt - nuxt 生命周期钩子函数

nuxt 中生命周期钩子函数的执行时机
- 有一套自己的周期：
  - asyncData
  - beforeCreate
  - created
- 再是 vue 的生命周期

Vuex

基本介绍：

是 vue 的状态管理模式

运行流程：
在这里插入图片描述

keep-alive

基本介绍：

vue 中提供的一个组件，可以用来将动态组件 & 路由页面中的内容进行缓存，防止页面重复渲染

补充：

activated：被缓存的组件显示时执行
deactivated：被缓存的组件切换时执行

大力99

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
03-vue中补充(渲染方式SSR与CSR,nuxt[简单说安装,路由,视图,异步数据,生命周期],vuex简单说,keepalive)

关于优化01 - SPA在 vue 这个阶段中我们所学的：黑马面面项目 & 黑马头条项目。其实都是单页应用全称：Single Page Application （单页面应用）概念：网站的效果都是显示在一个静态页面中的在页面切换时，其实并没有从一个页面中跳转到另一个页面中，只是通过 js 动态的将内容进行了修改在网站的源代码中是看不到任何数据（关键字）的特点：优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA
复制链接

扫一扫