Nuxt.js的优缺点和注意事项

SSR（服务器端渲染）

优点：

1.基于 Vue.js
2.自动代码分层
3.服务端渲染
4.强大的路由功能，不用编写router,支持异步数据
5.静态文件服务
6.ES6/ES7 语法支持
7.打包和压缩 JS 和 CSS
8.HTML头部标签管理,利于SEO
9.本地开发支持热加载
10.集成ESLint
11.支持各种样式预处理器： SASS、LESS、 Stylus等
12.nuxt自己集成了vuex，所以不需要安装，在/store目录下新建index.js即可使用

缺点：

1.	按需引入UI框架
2.	需要pm2进行管理
3.	当nuxt被iframe嵌套的时候，无法在asyncData里面获取外部闯过来的参数，主要：postmessage、输入栏传参数
4.	vue导出的时候要用函数的方式：

5.	服务端和客户端渲染会导致代理有部分失效，要采用nginx代理的方式
6.	由于是服务端渲染，所以不支持组件的keep-alive，那自然activated、deactivated这两个生命周期也没了
7.	子组件无法用asyncData（异步数据方法）,只能通过props传数据
8.	不利于调试，线上看不到错误信息，只能跑本地项目查找

Nuxt.js 注意事项

• 默认情况下，从当前页面切换至目标页面时，Nuxt.js 会让目标页面滚动至顶部。但是在嵌套子路由的场景下，Nuxt.js 会保持当前页面的滚动位置

我们可以在nuxt.config.js：配置所有页面渲染后滚动至顶部

 router: {
    
    scrollBehavior (to, from, savedPosition) {
    
      return {
     x: 0, y: 0 }
    }
  }

优先级：
config > layout > page >components

• 传统axios是页面静态html，css加载好了再去发送请求，获取数据渲染，只有一开始加载的一点内容，不利于爬虫的爬取

• asyncData：
  asyncData可以在页面渲染之前去获取数据，再渲染页面，asyncData方法在组件每次加载之前被调用，这样的话页面源代码就包含所有渲染的数据，利于seo，只会在首屏的时候调用一次（页面渲染之前），事件触发不了它，asyncData方法在组件渲染之前执行了，组件还没有渲染，没有this。

asyncData拿数据比在组件中拿数据快的不是一点点

• fetch：
  渲染页面前填充应用的状态树（store）数据，与asyncData类似，不同的是它不会设置组件的数据（将查出来的数据先储存在vuex中，然后在取出来进行使用）