持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
26 路由的懒加载
正常加载：
import List from '@/components/list.vue'
const router = new VueRouter({
routes: [
{ path: '/list',
component: List }
]
})
懒加载方式1：使用箭头函数+import的方式，这也是官方生成的方式。
const router = new VueRouter({
routes: [
{
path: '/list',
component: () => import('@/components/list.vue')
}
]
})
懒加载方式2：箭头函数+require
const router = new Router({
routes: [
{
path: '/list',
component: resolve => require(['@/components/list'], resolve)
}
]
})
27 scss 是什么？有哪几大特性？
css的预编译。
特性：可以使用变量，例如（$变量名=值）
28 is这个特性你用过吗？主要在哪个方面？
- 动态组件
<component :is="componentName"></component>
componentName可以是在本页面已经注册过的组件，或者是全局组件。通过控制componentName可以达到动态切换组件的效果。
有些 HTML 元素，诸如 <ul>、<ol>、<table>和<select>，对于哪些元素可以
出现在其内部是有严格限制的。
而有些 HTML 元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特
定的元素内部。
<ul>
<card-list></card-list>
</ul>
所以上面<card-list></card-list>会被作为无效的内容提升到外部，并导致最
终渲染结果出错。应该这么写：
<ul>
<li is="cardList"></li>
</ul>
29 在vue生命周期、hook或者其他option里面为什么不使用箭头函数？
因为箭头函数没有定义this上下文，而是绑定到其父函数的上下文中。所以在vue中使用箭头函数，那么箭头函数的this并不会指向vue实例。
30 nextTick
如果需要在刷新DOM后对数据修改，就要用到nextTick。
原理：vue框架通过异步队列控制DOM更新和nextTick回调函数的执行顺序。nextTick源码里面有许多isNative()判断。
31 如何对Vue首屏加载实现优化？
- Vue路由懒加载
- Vue组件尽量不要全局引入
- 把不常改变的的库放在index.html中，通过CDN引入
- 首页单独做服务端渲染
- 使用更轻量级的工具库
- 开启gzip压缩
32 Vue中怎么重置data？
使用Object.assign()，将所有可枚举的属性的值，从一个或者多个源对象复制到目标对象。且返回目标对象。
const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);
console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }
console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }
使 用 Object.assign() ， vm.$data 可 以 获 取 当 前 状 态 下 的 data ，
vm.$options.data(this) 可 以 获 取 到 组 件 初 始 化 状 态 下 的 data ， 复 制
Object.assign(this.$data, this.$options.data(this))// 注意加 this，不然取不到 data()
33 Vue 中操作 data 中数组的方法中哪些可以触发视图更新？不可以的话有什么办法？
可以触发视图更新的：push,pop,unshift,shif,reverse,sort,split。
不可以的话，可以使用"this.$set()"
34 Vue单向数据流
数据从父级流向子级，只能单向绑定。
子组件不可以直接修改父组件中的数据，如果想修改，可以通过$emit派发一个自定义事件，父组件接收到后，由父组件修改。
这样是为了防止子组件意外修改父组件中的数据，导致数据流向难以理解，且状态难以管理。
35 style加上scoped的原理？
在Vue组件中，为了使模块私有化，不对全局样式造成污染，可以在style标签上添加一个scoped属性。当这个Vue项目的所有组件都加上scoped之后，相当于实现了样式的私有化。
原理：这种效果通过PostCSS转译实现，给div标签增加一个 data-v-唯一id 的属性
转译后：
<div data-v-fed36922>Vue.js scoped</div>.scoped[data-v-fed36922]{font-size:14px;}
36 请说出vue-cli项目中src文件夹中每个文件夹/文件的用法。
- assets 存储静态资源
- router 定义路由相关配置
- util 存放工具。例如：request.js，对axios请求进行二次封装
- store 定义vuex相关配置
- components 存放可重用组件
- view 存放路由组件
- app.vue 主组件
- main.js 入口文件
37 使用vue时造成页面卡顿，需要怎么解决？
针对于首次加载卡顿的问题，需要用到路由懒加载，简单来说就是按需加载。
像vue这种单页面应用，如果不使用懒加载，那么webpack打包后，文件就会变的很大，进入首页时，加载时间就会变长且造成白屏。
对于页面首屏，最好使用SSR，也就是服务器端渲染的方式，在服务器上渲染页面，浏览器直接展示返回的HTML。
38 在Vue中使用插件的步骤
- 采用ES6的import...from...，或者CommonJS的require()方法引入插件。
- 之后使用Vue.use(plugin)使用插件。
39 vue2兼容IE的哪个版本？
不支持IE8及以下，部分兼容IE9，完全兼容10及以上。
因为vue2的响应式原理是基于vue2的Object.defineProperty()，所以不支持IE8及以下。
40 Vue渲染模板时，怎么保留模板中的HTML注释？
在组件中将comments选项设置为true
<template comments> ... <template>
41 对vue的template编译的理解？
- 先将模板通过编译器转化成AST（抽象语法树）
- 将AST转化为字符串的过程会得到render函数
- 执行render函数，返回值就是virtual Node
