js初化加载页面时ajax会调用两次的原因_聊聊Nuxt.js

首先我们来了解两个概念——客户端渲染和服务端渲染。

一、客户端渲染 VS 服务端渲染 1. 客户端渲染

简单理解就是，在服务端放一个html 页面，客户端发起请求，服务端把页面发送过去。客户端从上到下依次解析，如果发现ajax请求就再发送新的请求，拿到ajax 响应结果以后渲染模板引擎。整个过程至少要发起两次请求。如图：

但是，这种渲染方式存在的弊端也是不容忽视的，比如请求量大时首屏渲染慢，不利于seo等问题。服务端渲染恰好弥补了这些不足。

2. 服务端渲染

也称SSR，即server side render的缩写。在服务端渲染出完整的首屏dom结构，直接发送到浏览器；前端拿到的内容包括首屏及完整spa结构，应用激活后依然按照spa方式运行。整个过程只向服务端发起一次请求。如图：

服务端渲染有两大优点： 一是更利于SEO。因为爬虫只会爬取源码，不会执行脚本。使用了MVVM框架之后，页面的大多数DOM元素是在客户端根据js动态生成的，可供爬虫抓取分析的内容很少。而且浏览器爬虫不会等数据加载完成之后再去抓取。服务端渲染返回已经获取了异步数据并执行js脚本的最终HTML，爬虫就可以抓取完整的页面信息。

二是更利于首屏渲染。对服务端渲染而言，首屏渲染是node发送过来的html字符串，不依赖于js文件，这样用户就能更快地看到页面内容。尤其是大型单页应用，资源请求量大，造成首屏渲染加载缓慢，使用服务端渲染就可以在很大程度上解决首页的白屏等待问题。

Nuxt.js作为Vue.js的通用框架，就常被用来作SSR。

二、nuxt.js nuxt是一个专注于ui渲染的应用框架，可以快速搭建项目，还提供了服务端渲染的功能。

1. 安装

直接用vue-cli安装

vue init nuxt-community/starter-template 

2. nuxt推荐的项目结构

• assets——资源文件

• components——组件

• layouts——布局，默认default。所有页面都会加载在布局页面中的标签中。如果要在普通页面中使用下级路由，则要在页面中添加

• middleware——中间件：每个页面加载前调用，在页面中调用的方法是middleware: 'middlewareName'。

• node_modules——依赖包

• nuxt.config.js——个性化配置

• package.json——

• pages——页面。根页面是index.vue，二级页面只要添加文件夹。动态路由页面的名称格式是：_变量.vue

• plugins——插件

• static——静态文件(不需要webpack打包的)。

• store——状态管理

• yarn.lock

3. 生命周期

Nuxt在vue的基础上对生命周期做了扩展：

export defualt {  middleware(){ }, // 服务端  validate(){ },  // 服务端  asyncData(){ },  // 服务端  fetch(){ },  // store数据加载  beforeCreate(){ },  // 服务端和客户端都会执行  created(){ },  //  服务端和客户端都会执行  beforeMount(){ },   mounted(){ } // 客户端}

4. asyncData 如果需要服务端渲染，首次渲染时一定要使用这个方法。它可以在渲染组件前异步获取数据。asyncData传入context参数，可以获取一些信息，如：

export default {  asyncData(ctx){    ctx.app   // 根实例    ctx.route   // 路由实例    ctx.params   // 路由参数    ctx.query   // 路由问号后的参数    ctx.error   // 错误处理方法  }}

使用这个方法时要注意，如果由于服务器或api错误导致无法渲染，就要做好容错机制，可以使用context.error方法。我们可以这样做：

async asyncData(ctx){  try {    throw new Error()  } catch {    ctx.error( {statusCode: 500, message: '服务器开小差了~'} ) // 这里的statusCode参数必须是http状态码  }}

此时，错误页可以通过/layout/error.vue自定义。

注意：该方法在服务端执行，返回的数据与data()返回的数据合并。该方法在组件初始化前被调用，所以不能通过this引用实例对象。

5. 使用axios请求数据

(1)nuxt项目默认安装axios，所以只要安装proxy即可

npm install @nuxtjs/proxy

(2)在nuxt.config.js中加上：

export default {  modules: [    '@nuxtjs/axios',    '@nuxtjs/proxy'  ],  proxy: {    './api': {      target: 'http://www.xxx.com',      changeOrigin: true,      pathRewrite: {        '^/api': ''      }    }  }}

(3)页面中使用：

import axios from 'axios'export default {    data () {        return {          page: 0        }    },    async asyncData () {        let data = await axios.get('http://localhost:3000/api/admin/list')        return {          page: data.data.page        }  },}

采用 `import axios from 'axios'` 方式引入axios时，接口参数前须加baseURL。

6. 使用scss

(1)安装sass

npm i node-sass sass-loader scss-loader --save-dev

(2)如果要全局使用某个scss文件，要借助sass-resources-loader，还需要在nuxt.config.js的build配置中调整导出的loader配置：

export default {  build: {    extend(config, { isDev, isClient }){      const sassResourcesLoader = {        loader: 'sass-resources-loader',        options: {          resources: [            // 填写需要全局注入scss的文件            'assets/styles/mixins.scss'          ]        }      }      // 修改 scss sass 引用的 loader。      config.module.rules.forEach((rule) => {          if (rule.test.toString() === '/\\.vue$/') {            rule.options.loaders.sass.push(sassResourcesLoader)            rule.options.loaders.scss.push(sassResourcesLoader)          }          if (['/\\.sass$/', '/\\.scss$/'].indexOf(rule.test.toString()) !== -1) {            rule.use.push(sassResourcesLoader)          }        })      }  }}

7. 编译过程

(1)加载nuxt.config.js；

(2)初始化nuxt，builder，开始执行构建；

(3)准备模板使用的参数，然后根据模板生成真正的webpack编译的js；

(4)分别执行客户端编译和服务端编译，生成最终的js脚本；

(5)编译成功后，就需要启动服务，监听端口，这个是在npm run start中实现的。

8. nuxt和vue的区别

	Nuxt.js	Vue.js
路由	按pages 文件夹目录结构自动生成	在 src/router/index.js 手动配置
入口文件	layouts/default.vue	src/App.vue
webpack配置	内置webpack，允许根据服务端需求，在 nuxt.config.js 中的build属性自定义构建webpack的配置，覆盖默认配置	存放在build文件夹下

关于nuxt.js先写这些了，更多内容还是要去看一遍文档哦~