1、vue的生命周期是什么？
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。
2、vue的生命周期有哪些？
- beforeCreate（创建前）
- created（创建后）
- beforeMount(载入前)
- mounted（载入后）
- beforeUpdate（更新前）
- updated（更新后）、
- beforeDestroy（销毁前）
- destroyed（销毁后）
稍微具体
1、创建前（beforeCreate）
对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。
2、创建后（created）
对应的钩子函数为created。在这个阶段vue实例已经创建，仍然不能获取DOM元素。
3、载入前（beforeMount）
对应的钩子函数是beforemount，在这一阶段，我们虽然依然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行；beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
4、载入后（mounted）
对应的钩子函数是mounted。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
5、更新前（beforeUpdate）
对应的钩子函数是beforeUpdate。在这一阶段，vue遵循数据驱动DOM的原则；beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。
6、更新后（updated）
对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步。
7、销毁前（beforeDestroy）
对应的钩子函数是beforeDestroy。在上一阶段vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发beforeDestroy钩子函数。
8、销毁后（destroyed）
对应的钩子函数是destroyed。在销毁后，会触发destroyed钩子函数。
3、vue中有哪些常用的loader，并有什么作用？
- style-loader 将 css 添加到 DOM 的内联样式标签 style 里
- css-loader 允许将 css 文件通过 require 的方式引入，并返回 css 代码
- less-loader 处理 less
- sass-loader 处理 sass
- file-loader 分发文件到 output 目录并返回相对路径
- url-loader 和 file-loader 类似，但是当文件小于设定的 limit 时可以返回一个 Data Url
- html-minify-loader 压缩 HTML
- babel-loader 用 babel 来转换 ES6 文件到 ES5
样式
- css-loader : 解析css文件中代码
- style-loader : 将css模块作为样式导出到DOM中
- less-loader : 加载和转义less文件
- sass-loader : 加载和转义sass/scss文件
脚本转换编译
- script-loader : 在全局上下文中执行一次javascript文件，不需要解析
- babel-loader : 加载ES6 代码后使用Babel转义为ES5后浏览器才能解析
Files文件
- url-loader : 多数用于加载图片资源,超过文件大小显示则返回data URL
- raw-loader : 加载文件原始内容(utf-8格式)
加载框架
- vue-loader : 加载和转义vue组件
- react-hot-loader : 动态刷新和转义react组件中修改的部分
4、webpack中优化性能
1.优化Loader
module.exports = {
module:{
rules:[
{
//js文件才使用babel
test:/\.js$/,
loader:'babel-loader',
//只在src文件夹下查找
include:[resolve('src')]，
//不会去查找的路径
exclude:/node_modules/
}
]
}
}
对于Loader，影响打包效率的是它的属性Babel.Babel会将代码转为字符串 生成AST，然后对AST继续进行转变最后生成新的代码，项目越大，转换代码越多，效率就越低。
2.路由懒加载
在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大， 造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验， 运用懒加载可以将页面进行划分，按需加载页面，可以分担首页所承担的加载压力，减少加载用时。
const home =() =>import('views/home/home')
const category =() =>import('views/category/category')
const cart =() =>import('views/cart/cart')
const porfile =() =>import('views/porfile/porfile')
const Detail =() =>import('views/detail/Detail')
3.部分依赖转移到 CDN
4.分割配置文件 dev prod
5.减少代码体积
生产环境去掉console代码，减少代码体积，使用uglifyjs压缩代码
6.引用的库尽量按需加载。
- (1)像一般的ui库element，vant等库都提供来按需加载的方式，避免全部引入，加大项目体积。
- (2)以cdn方式载入需要的库，也可以减少打包后的体积。
5、判断数据类型的方法
1.typeof
console.log(typeof 2); // number
console.log(typeof true); // boolean
console.log(typeof 'str'); // string
优点：能够快速区分基本数据类型 缺点：不能将
Object、Array和Null区分，都返回object
2.instanceof
console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
优点：能够区分Array、Object和Function，适合用于判断自定义的类实例对象 缺点：Number，Boolean，String基本数据类型不能判断
3.Object.prototype.toString.call()
var toString = Object.prototype.toString;
console.log(toString.call(2)); //[object Number]
console.log(toString.call(true)); //[object Boolean]
优点：精准判断数据类型 缺点：写法繁琐不容易记，推荐进行封装后使用
6、var,let,const的区别
- var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
- let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升，let 只能声明一次 var 可以声明多次
- const声明的变量不允许修改，意味着，一旦声明必须初始化，否则会报错。
7、响应式原理
在Vue中，数据模型下的所有属性，会被Vue 使用Object.defineProperty（Vue3.0 使用 Proxy）进行数据劫持代理。响应式的核心机制是观察者模式，数据是被观察的一方，一旦发生变化，通知所有观察者，这样观察者可以做出响应，比如当观察者为视图时，视图可以做出视图的更新。
8、为什么组件中的data是函数
在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中，data必须是一个函数，因为每一个 vue 组件都是一个 vue 实例，通过 new Vue()实例化，引用同一个对象，如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而data 是函数的话，每个 vue 组件的data 都因为函数有了自己的作用域，互不干扰。
