Vue面试题

1. v-if和v-show的区别

• 共同点： 都可以控制元素的显示和隐藏
• 不同点：
  1. v-show时控制元素的display值来让元素显示和隐藏；v-if显示隐藏时把DOM元素整个添加和删除
  2. v-if有一个局部编译/卸载的过程，切换这个过程中会适当的销毁和重建内部的事件监听和子组件；v-show只是简单的css切换
  3. v-if才是真正的条件渲染；v-show从false变成true的时候不会触发组件的生命周期，v-if会触发生命周期
  4. v-if的切换效率比较低 v-show的效率比较高

2. 如何理解MVVM的？

是Model-View-ViewModel的缩写。前端开发的架构模式

• M： 模型，对应的就是data数据
• V：视图，用户界面。DOM
• VM： 视图模型，Vue的实例对象，连接View和Model的桥梁

核心是提供对View和ViewModel的双向数据绑定，当数据改变的时候，ViewModel能监听到视图的变化，自动更新视图。
当用户操作视图的时候，ViewModel也可以监听到视图的变化，然后通知数据进行改动，这就实现了双向数据绑定
ViewModel提供双向数据绑定把View和Model连接起来，他们之间的同步是自动的，不需要人为的干涉，所以我们只需要关注业务逻辑，不需要操作DOM，同时也不需要关注数据的状态问题，因为他是MVVM统一管理。

3. v-for中的key值的作用

key属性是DOM元素的唯一标识
作用：
1. 提高虚拟DOM的更新
2. 若不设置key，可能触发一些bug
3. 为了触发过渡效果

4. 说一下你对vue生命周期的理解

组件从创建到销毁的过程就是它的生命周期

1. 创建阶段：

   • beforeCreate：在这个阶段属性和方法都不能使用。
   • created：在实例创建完成后被调用，此时实例已经完成了数据观测和event/watcher事件配置，但是尚未挂载到DOM上。

2. 挂载阶段：

   • beforeMount：在挂载开始之前被调用，此时模板编译已经完成，但是尚未将生成的模板渲染到页面上。
   • mounted：在挂载完成之后被调用，此时实例已经被挂载到页面上，可以进行DOM操作。

3. 更新阶段：

   • beforeUpdate：在数据更新之前被调用，当组件的数据发生改变时触发。
   • updated：在数据更新之后被调用，DOM已经被重新渲染，可以进行状态更新或者操作。

4. 销毁阶段：

   • beforeUnmount：在实例销毁之前调用，可以用来解绑事件监听器、清除定时器等操作。
   • unmounted：在实例销毁之后调用，此时Vue实例完全被销毁，所有的事件监听器和观察者都被移除。

• 使用了keep-alive时多出两个生命周期
  activited
  deactivited

5. 在created和mounted去请求数据，有什么区别

• created：在渲染前调用，通常先初始化属性，然后做渲染
• mounted：在模板渲染完成后，一般都是初始化页面后，再对元素节点进行操作
  在这里请求数据可能会出现闪屏的问题，created不会

一般使用created比较多
请求的数据对DOM有影响，那么使用created
如果请求的数据对DOM无关，可以放到mounted

6. Vue中的修饰符有哪些

1. 事件修饰符

• .stop：阻止事件冒泡。
• .prevent：阻止默认事件的触发。
• .capture：使用事件捕获模式。
• .self：只有当事件由触发事件的元素自身触发时才触发事件处理器。
• .once：只触发一次事件处理器。
• .passive：指定事件监听器永远不会调用preventDefault()，提升滚动性能。
• .native：监听组件根元素的原生事件。

2. 按键修饰符

• .keyup：键盘抬起
• .keydown：键盘按下
• .enter：监听回车键。
• .tab：监听Tab键。
• .delete：监听删除键。
• .esc：监听ESC键。
• .space：监听空格键。
• .up：监听上箭头键。
• .down：监听下箭头键。
• .left：监听左箭头键。
• .right：监听右箭头键。

4. 系统修饰符

• .ctrl：监听CTRL键。
• .alt：监听ALT键。
• .shift：监听Shift键。
• .meta：监听Meta/Command键（Mac上的Windows键或者苹果键）。

5. 鼠标修饰符
   .left：监听鼠标左键。
   .right：监听鼠标右键。
   .middle：监听鼠标中键。
6. 表单修饰符

• .lazy：输入完之后显示。
• .number：自动将用户输入转为数值类型。
• .trim：去除输入的首尾空格。

7. elementui是如何做表单验证的

• 在表单中加rules属性，然后在data里写校验规则
• 内部添加规则
• 自定义函数校验

8. Vue如何进行组件通信

1、父转子
props：父组件使用自定义属性，然后子组件使用props
$ ref：引用信息会注册在父组件的$ refs对象上

2、子传父
$emit：子组件绑定自定义事件，触发执行后，传给父组件，父组件需要用事件监听来接收参数
3、兄弟传
new一个新的vue实例，用on和emit来对数据进行传输
4、vuex传值

9. keep-alive是什么 怎么使用

Vue的一个内置组件，包裹组件的时候，会缓存不活跃的组件案例，并不是销毁他们
作用：把组件切换的状态保存在内存里，防止重复渲染DOM节点，减少加载时间和性能消耗，提高用户体验

10. axios是怎么做封装的

下载 创建案例 按着封装请求响应拦截器 抛出 最后封装接口
在您的路由配置文件中，引入 axios 模块，并创建一个实例。例如：

import axios from 'axios';

const router = createRouter({
  // ...
});

const instance = axios.create({
  // 配置项
});

// 在每个路由请求前拦截
router.beforeEach((to, from, next) => {
  // 在这里使用 instance 进行 axios 请求的拦截逻辑
  // 您可以在请求拦截器中对请求进行修改、添加headers等操作
  instance.interceptors.request.use(config => {
    // 拦截逻辑
    return config;
  }, error => {
    return Promise.reject(error);
  });

  next();
});

另外，您还可以在请求拦截器中添加一些全局的拦截逻辑，例如处理 token、错误状态码等。示例如下：

instance.interceptors.request.use(config => {
  // 处理 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }

  // 添加自定义 header
  config.headers['X-Requested-With'] = 'XMLHttpRequest';

  // 如果需要对所有请求添加统一的 loading 效果
  // showLoading();

  return config;
}, error => {
  return Promise.reject(error);
});

instance.interceptors.response.use(response => {
  // 如果需要对所有响应进行统一的处理
  // hideLoading();

  return response;
}, error => {
  // 处理错误状态码
  if (error.response) {
    switch (error.response.status) {
      case 401:
        // 处理未授权错误
        break;
      case 404:
        // 处理资源不存在错误
        break;
      default:
        // 处理其他错误
        break;
    }
  }

  return Promise.reject(error);
});

11. vue路由时怎么传参的

1. params传参
   this.$ router.push(name: ‘index’, params: {id: item.id})
   this.$ route.params.id
2. 路由属性传参
   this.$ router.push({name: ‘/index/$ {item.id}’ })
   路由配置 { path: ‘/index:id’ }
3. query传参 （可以解决页面刷新参数丢失的问题）
   this.$ router.push({
   name: ‘index’,
   query: {id: item.id}
   })

12. vue路由的hash模式和history模式有什么区别

1. hash的路由地址上有#，history模式没有
2. 在做回车刷新的时候，hash模式会加载对应页面，history模式会404报错
3. hash模式支持低版本浏览器，history不支持，因为是H5新增的API
4. hash不会重新加载页面，单页面应用必备
5. history有历史记录，H5新增了pushState和replaceState()去修改历史记录
6. history需要后台配置

13. 路由拦截是怎么实现的

路由拦截 axios拦截
需要在路由配置中添加一个字段，它是用于判断路由是否需要拦截

{
	name:'index',
	path: 'index',
	component: Index,
	meta: {
		requirAuth: true
	}
}

router.beforeEach((to, from, next) => {
	if(to.meta.requirAuth){
		if( store.state.token) {
			next()
		}else {
}
	}
});

14. 说一下vue的动态路由

要在路由配置里设置 meat属性，扩展权限相关的字段，在路由导航守卫里通过判断这个权限标识，实现路由的动态增加和跳转

• 根据用户登录的账号，返回用户角色
• 前端再根据角色，跟路由表的meta.role进行匹配
• 把匹配搭配的路由形成可访问的路由

15. 如何解决刷新后的二次加载路由

**问题来源：**在刷新页面后，Vue Router 默认会重新加载应用程序，这样会导致路由状态的丢失和二次加载的问题。为了解决这个问题，可以通过以下方法来保持正确的路由状态：

1. 使用服务器端路由配置：在服务器端（如Node.js、Java、PHP等）设置路由规则，并确保在刷新页面时能够返回对应路由的HTML内容。这样，在刷新页面时，服务器会返回正确的页面内容，保持路由状态的一致性。

2. 使用localStorage或sessionStorage保存路由状态：在每次路由发生变化时，将路由信息存储在浏览器的本地存储（如localStorage或sessionStorage）中。然后，在应用程序初始化时，检查本地存储中是否存在路由状态，并进行恢复。

   • 在Vue Router的beforeUnload钩子函数中，可以将当前的路由信息保存到本地存储中：

router.beforeEach((to, from, next) => {
  // 保存路由信息到本地存储
  localStorage.setItem('savedRoute', JSON.stringify(to));
  next();
});

• 在应用程序初始化时，可以检查本地存储中是否存在保存的路由信息，并进行恢复：

const savedRoute = localStorage.getItem('savedRoute');
if (savedRoute) {
  // 将保存的路由信息转换为对象
  const to = JSON.parse(savedRoute);
  // 恢复路由状态
  router.replace(to);
}

通过在本地存储中保存和恢复路由状态，可以在刷新页面后保持正确的路由状态，避免二次加载的问题。
注意： 果使用localStorage或sessionStorage保存路由状态，需要考虑到用户隐私和安全性，并确保及时清理或更新存储的路由信息。

16. vuex刷新数据会丢失吗 怎么解决

会丢失，因为 Vuex 存储的数据是保存在内存中的

1. 使用本地存储（LocalStorage 或 SessionStorage）：

   • 在 Vuex 的 mutation 中，通过监听数据的变化，将数据保存到本地存储 中。
   • 在应用程序初始化时，从本地存储中读取数据并还原到 Vuex。

• 以下是一个简单的示例：

// 在 mutation 中监听数据变化，并保存到本地存储中
mutations: {
  setData(state, data) {
    state.data = data;
    localStorage.setItem('vuexData', JSON.stringify(data));
  }
}

// 应用程序初始化时，从本地存储中读取数据并还原到 Vuex
const savedData = localStorage.getItem('vuexData');
if (savedData) {
  store.commit('setData', JSON.parse(savedData));
}

2. 使用插件 vuex-persistedstate：

   • vuex-persistedstate 是一个用于持久化保存 Vuex 数据的插件。
   • 安装 vuex-persistedstate 插件：npm install vuex-persistedstate

• 在 Vuex 的配置文件中使用该插件：

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
});

• 这样配置后，vuex-persistedstate 插件会自动将 Vuex 的数据保存在本地存储（LocalStorage 或 SessionStorage）中，并在页面刷新后恢复数据。

17. computed和watch的区别

• computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值；

• method 调用总会执行该函数。

18. vuex在什么场景会去使用 属性有哪些

场景：

• 多个组件共享状态：当多个组件需要访问和共享同一份数据时，可以使用 Vuex 来统一管理这些数据，避免数据在组件之间传递时出现混乱和不一致的情况。

• 组件之间的通信：通过 Vuex 的状态管理，可以实现组件之间的消息传递和通信。一个组件可以通过修改 Vuex 中的状态，而其他组件可以通过订阅状态的变化来获取最新的数据。

• 异步操作和数据持久化：当应用程序需要进行异步操作（如网络请求、定时器等）或需要将数据持久化到本地存储时，可以使用 Vuex 来管理异步操作的状态和处理数据的持久化。

• 路由状态管理：如果应用程序的路由需要保存和管理状态（如当前活动的路由、路由参数等），可以使用 Vuex 来管理路由状态，以方便在不同组件之间共享和访问这些状态。

一般用于购物车模块、用户的个人信息、订单模块

属性：

• state：包含应用程序的状态数据。
• getters：从状态中派生出一些衍生数据，类似于计算属性。
• mutations：定义用于修改状态的方法，且必须是同步的。
• actions：包含异步操作和一系列的 mutation 调用，用于处理复杂的业务逻辑。
• modules：用于将大型的 Vuex 应用程序分割成模块，每个模块都有自己的 state、getters、mutations 和 actions。

19. vue的双向数据绑定原理是什么

1. 数据劫持：

• Vue 通过 Object.defineProperty() 方法来劫持（拦截）对象属性的读取和设置操作。
• 在 Vue 创建组件实例时，会对组件的 data 对象进行递归遍历，为每个属性添加 getter 和 setter。
• 在 getter 中，收集依赖并返回属性的值；在 setter 中，当属性的值发生变化时，触发更新通知。

2. 发布-订阅模式：

• Vue 通过一个名为 Watcher 的订阅者对象，来管理视图（DOM）与数据的同步。
• 当模板中存在表达式或指令与数据绑定时，Vue 会在编译阶段将这些表达式转换为对应的 Watcher 对象。
• Watcher 对象会订阅被绑定的数据属性的变化，在数据发生改变时，触发订阅者的回调函数进行相应的更新操作。
• Watcher 对象与数据属性之间建立了依赖关系，实现了数据属性与视图的双向绑定。

3. 实现步骤：

• 组件实例化时，初始化数据，并对数据对象进行劫持。
• 在模板编译过程中，解析指令和表达式，创建对应的 Watcher 对象，建立依赖关系。
• 当数据发生变化时，触发 Setter，通知对应的 Watcher 对象进行更新。
• Watcher 对象接收到数据变化通知后，触发回调函数执行相应的 DOM 更新操作，保持页面与数据的同步。

20. 了解diff算法和虚拟DOM吗

21. Vue和jQuery的区别

• 1.原理不同
  vue 就是数据绑定，jq是先获取dom在处理
• 2.着重点不同
  vue是数据驱动，jq是着重于页面
• 3.操作不同
• 4.未来发展不同

22. vuex的响应式处理

在 Vuex 中，定义的状态存储在一个名为 state 的对象中。这个 state 对象被包装成一个响应式对象，当 state 中的属性值发生改变时，相关组件会自动更新。

当我们在组件中访问 Vuex 中的状态时，Vue.js 的响应式系统会建立依赖关系，并将组件与状态属性之间的关联记录下来。所以，当状态发生改变时，相关组件会被通知到，并触发重新渲染。

另外，对于 Vuex 中的状态修改操作，我们需要通过提交 mutation 的方式进行。Mutation 是用于定义修改状态的方法，它们必须是同步的。当调用 mutation 方法时，Vue.js 会追踪这个过程并记录状态的修改，从而可以通知相关的组件进行更新。

通过这种方式，Vuex 实现了对状态的响应式处理。它简化了状态管理的过程，保证了状态的一致性和可预测性，并且能够自动更新相关组件的视图。这使得我们能够更方便地管理和共享状态，在大型应用程序中更容易维护和开发。

23. vue中遍历全局的方法有哪些

24. 如何搭建脚手架

1. 首先，确保你已经安装了 Node.js 和 npm（或者使用 yarn）。

2. 打开终端，并全局安装 Vue CLI。运行以下命令：

npm install -g @vue/cli

3. 创建新的 Vue 项目。在终端中进入你想要创建项目的文件夹，并运行以下命令：

vue create <项目名称>

例如，要创建一个名为 “my-vue-app” 的项目：

vue create my-vue-app

4. 在创建项目过程中，你可以选择使用默认的预设配置，也可以手动选择自定义配置。如果是初学者，建议使用默认配置。

5. Vue CLI 会下载项目所需的依赖并进行安装。安装完成后，进入项目目录：

cd <项目名称>

6. 启动开发服务器。运行以下命令启动开发服务器：

npm run serve

或者使用 yarn：

yarn serve

开发服务器启动后，你就可以在浏览器中访http://localhost:8080（或其他端口号，具体取决于配置），看到你的 Vue 应用程序运行起来了。

25. 如何封装一个组件

26. 封装一个可复用的组件，需要满足什么条件

• 低耦合，组件之间的依赖越小越好
• 最好从父级传入信息，不要在公共组件中请求数据
• 传入的数据要进行校验
• 处理事件的方法要写在父组件中

27. Vue的过滤器怎么使用

1. 创建一个全局过滤器：
   在 Vue 实例创建之前，在你的 Vue 应用程序代码中通过 Vue.filter 方法定义一个全局过滤器。例如，我们创建一个名为 capitalize 的过滤器，将字符串的首字母转为大写：

Vue.filter('capitalize', function(value) {
  if (!value) return '';
  return value.charAt(0).toUpperCase() + value.slice(1);
});

2. 在模板中使用过滤器：
   在模板中通过在插值表达式或绑定中使用 | 管道符号，跟随过滤器名称来使用过滤器。例如，在以下示例中，我们将数据项 message 使用 capitalize 过滤器进行首字母大写处理：

<div>
  {{ message | capitalize }}
</div>

3. 传递参数给过滤器（可选）：
   过滤器还可以接受参数，你可以在使用过滤器时在过滤器名称后面传递参数。例如，我们创建一个名为 truncate 的过滤器，它可以截断字符串到指定长度，并添加省略号：

Vue.filter('truncate', function(value, length) {
  if (!value) return '';
  if (value.length <= length) {
    return value;
  } else {
    return value.substring(0, length) + '...';
  }
});

在模板中使用带有参数的过滤器示例：

<div>
  {{ longText | truncate(10) }}
</div>

28. Vue中如何做强制刷新

• localtion.reload()
• this.$router.go(0)
• provide 和 inject

29. Vue3和Vue2的区别

• 性能优化：Vue 3 在底层进行了一些架构上的优化，使用了 Proxy 对象重写了底层响应式系统，提高了性能和内存利用率。Vue 3 还引入了静态树提升（Static Tree Hoisting）和源码优化技术，进一步提高了渲染性能。
• 体积大小：Vue 3 的体积更小。通过移除不常用的特性、优化打包算法和引入按需加载等机制，Vue 3 的包大小相对于 Vue 2 有所减小，从而加快了页面加载速度。
• Composition API：Vue 3 引入了 Composition API，这是一种新的 API 风格，可以更好地组织和复用组件逻辑。相比于 Vue 2 的 Options API，Composition API 更加灵活，可以将逻辑关注点聚集在一起，并且可以在不同的组件之间共享和重用逻辑代码。
• TypeScript 支持：Vue 3 对 TypeScript 的支持更加友好。Vue 3 的源码基于 TypeScript 编写，并且提供了更好的类型推导和类型检查。
• Teleport：Vue 3 引入了 Teleport（传送门）功能，它允许开发者将组件的内容渲染到 DOM 树中的任何位置，而不仅仅局限于组件自身的模板中。这在处理弹出窗口、对话框等场景时非常有用。
  其他改进：Vue 3 还带来了一些其他的改进，比如更好的 TypeScript 支持、更灵活的自定义指令、更好的虚拟滚动支持、优化的响应式系统等。

需要注意的是，尽管 Vue 3 带来了许多改进和新特性，但它并不完全兼容 Vue 2。在升级项目到 Vue 3 时，可能需要进行一些代码的修改和适配工作。因此，在决定是否升级到 Vue 3 之前，要对项目的需求和现有代码进行评估。

还有

• 双向数据绑定的原理不同
• 是否支持碎片
• API不同
• 定义数据变量方法不同
• 生命周期的不同
• 传值不同
• 指令和插槽不同
• main.js不同

30. Vue的性能优化怎么做

1、编码优化

• 不遥把所有数据都放在data中
• v-for 是给每个元素判定事件用事件代理
• keep-alive缓存组件
• 尽可能拆分组件，提高复用性、维护性
• key值要保证唯一
• 合理使用路由懒加载，异步组件
• 数据持久化存储的使用尽量用防抖、节流优化

2、加载优化

• 按需加载
• 内容懒加载
• 图片懒加载

3、用户体验

• 骨架屏

4、SEO优化

• 预渲染
• 服务端渲染ssr

5、打包优化

• CDN形式加载第三方模块
• 多线程打包
• 抽离公共文件

5、缓存和压缩

• 客户端缓存、服务端缓存
• 服务器Gzip压缩

31. 首屏优化该如何去做

• 代码分割和异步加载：将页面按需拆分成多个模块，通过使用路由懒加载或动态导入组件的方式，使得页面初始化时只加载必要的代码，延迟加载其他非必要的模块，从而加快首屏渲染速度。

• 图片优化：图片通常是网页中占用较大资源的一部分。合理使用图片压缩、选择适当的图片格式（如JPEG、WebP），以及懒加载图片，在初次加载时只加载可视区域内的图片，可以减少页面的加载时间。

• 骨架屏或占位符：在页面加载时展示一个简单的骨架结构或占位符，使用户感知到页面正在加载。这样可以缓解用户的等待焦虑，并给予用户一种页面正在加载的感觉。

• 静态资源缓存：合理设置静态资源（如CSS、JS文件）的缓存策略，利用浏览器缓存机制，避免不必要的资源重复加载。

• 减少 HTTP 请求：减少页面的 HTTP 请求次数是提高首屏加载速度的有效手段。可以将多个 CSS 或 JS 文件合并成一个文件，并使用 CSS Sprites 或 Icon Fonts 来减少图片的请求次数。

• 服务端渲染 (SSR)：使用服务端渲染技术可以在服务器端生成首屏的 HTML 内容，减少客户端的渲染时间。Vue 框架提供了 Nuxt.js 这样的工具，简化了服务端渲染的配置和开发流程。

• 前端性能优化工具：使用工具（如 Lighthouse、WebPageTest）来评估网页的性能指标，并找出可以改进的方面。这些工具提供了详细的性能报告和建议，帮助优化页面加载速度和用户体验。

首屏优化需要从多个方面进行考虑，包括代码拆分、图片优化、骨架屏、缓存策略、减少请求次数、服务端渲染等

32. Vue3的性能为什么比Vue2好

• 响应系统的优化：Vue 3 使用了新的响应系统，即使用基于 Proxy 的观察者机制而非 Object.defineProperty，这使得 Vue 3 可以更高效地追踪响应式数据的变化，并减少了不必要的依赖追踪。

• 编译器优化：Vue 3 的编译器经过重写，生成的渲染函数更加精简和高效。通过优化代码生成，减少了运行时的性能开销。

• 虚拟 DOM 的优化：Vue 3 在虚拟 DOM 的处理上进行了一系列的优化措施，如静态节点的提升、事件侦听器的批量化等，减少了虚拟 DOM 的操作次数。

• 更好的 Tree Shaking 支持：Vue 3 在模块的组织和导出上做了调整，使得 Tree Shaking（摇树优化）更加有效，可以更精确地按需加载和消除无用的代码，减小打包体积。

• Composition API：Vue 3 引入了 Composition API，它允许开发者使用更灵活和可复用的逻辑组合方式编写组件。Composition API 提供了更好的代码组织和重用能力，从而可以更高效地管理组件的状态逻辑，减少冗余代码和内存开销。

33. Vue3为什么使用proxy

1. 更加高效：Proxy 相较于 Object.defineProperty 在性能上更高效。Proxy 可以拦截对目标对象的访问和操作，并可以提供非常灵活的拦截器函数。相比之下，Object.defineProperty 只能拦截属性的读取和写入操作。

2. 更好的支持：Proxy 提供了一系列针对对象操作的拦截器函数，如 get、set、deleteProperty 等。这使得 Vue 3 的响应式系统可以更细粒度地追踪数据的变化，并且可以对数组和嵌套对象等更复杂的数据结构进行处理，而不仅限于顶层属性的监听。

3. 更容易调试：使用 Proxy 可以提供更好的调试体验。当访问或操作被代理的对象时，可以通过拦截器函数进行自定义行为的处理，可以方便地进行日志记录、错误捕获等操作，有利于开发者快速定位问题。

4. 更好的 TypeScript 支持：Proxy 拥有良好的 TypeScript 支持，能够更准确地推断类型和提供代码补全，使得在 Vue 3 中使用 TypeScript 开发更加友好。

34. 说一下你对组件的理解

可以重复使用vue的实例，独一无二的组件名称
可以抽离单独的公共模块
提高代码的复用率

35. webpack打包和不打包的区别

• 打包后的文件大小
• 代码分割和按需加载
• 模块系统支持
• 资源处理和预处理器支持
• 环境配置和自动化任务：Webpack提供了灵活的配置选项，能够针对不同的开发环境进行定制。通过配置文件，可以定义各种开发和生产环境下的优化策略，并且可以集成其他工具（如Babel、PostCSS等）来进行更多的自动化任务。

36. 是否使用过nuxt.js

37. SEO如何优化

• SSR
• 预渲染

38. git如何合并、拉取代码

39. git如何解决冲突问题