一、如何创建vue项目？
1.安装node.js，并配置环境。（自行百度）
2.使用cmd安装淘宝镜像。（可不安装）
npm install -g cnpm --registry=https://registry.npm.taobao.com
3.安装vue-cli 初始化项目
npm install vue-cli -g 或者cnpm install vue-cli -g
4.新建vue项目
vue init webpack “自定义的项目名”
5.cd进目录文件 热启动vue项目
npm run dev
二、vue项目基于vue-cli进行移动端适配
1.安装lib-flexible
npm install lib-flexible
2.引入lib-flexible
在项目入口文件main.js 里 引入 lib-flexible
Import “lib-flexible”
3.安装 postcss-px2rem-exclude
npm install postcss-px2rem-exclude
4.查看是否安装完成
打开packge.json文件，找到dependencies对象，如下：
"dependencies": {
"lib-flexible": "^0.3.2",
"postcss-px2rem-exclude": "0.0.6",//这就是安装成功了
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
5.配置postcss-px2rem-exclude
打开.postcssrc.js文件，找到module.exports方法，在里面添加代码如下:
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
//添加如下代码
"postcss-px2rem-exclude": {
remUnit: 75,
exclude: /node_modules/
}
}
}
注意事项：
1.此方法只能将.vue文件style标签中的px转成rem，不能将script标签和元素style里面定义的px转成rem
2.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了
3.如果index.html中含有<meta nam=’viewport’ content=’width:device-width,inital-scale=1.0’>,去掉，否则会引起异常。
三、引入Swiper插件
1.安装依赖
swiper npm install swiper
2.在需要swiper的页面引入js文件
import Swiper from "swiper";
3.在需要的页面引入css文件
四、引入Axios获取API
1.安装依赖
npm install axios -S
2.在main.js中引入
import axios from‘axios’
如果在其他组件中如法使用，在mian.js中添加Vue.prototype.$http=axios
五、对WVVM模式的理解？
MVVM分为Model、View、ViewModel。
Model：代表数据层，数据和业务逻辑都在model定义
View：代表UI视图，属于用户层
ViewModel：负责监听model中数据的改变并控制视图的更新，处理用户交互操作。
原理：ViewModel通过双向数据绑定把View层和Model层连接了起来，ViewModel里面包含DOM Listeners和Data Bindings，这两个是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。
六、vue双向绑定的原理？
原理：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的setter和getter在数据变动时发布消息给订阅者，触发相应监听回调。
步骤：
1.实现一个监听器Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
2.实现一个解析器compile：解析vue模板的命令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加坚挺数据的订阅者，一旦数据发生变化，收到通知，调用更新函数进行数据更新。
3.实现一个订阅者Watcher：Watcher是订阅者observer和解析器compile之间通讯的桥梁，主要任务是订阅observer中属性值得变化，当收到收到属性值变化时。触发解析器中compile对应的更新函数。
4.实现一个订阅器Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。
七、vue的单向数据流？
父组件通过prop向下传递数据，为了防止子组件意外改变父组件的状态，使应用的数据流变得难以理解。如果子组件直接传递值，vue会报错。
八、computed和watch的区别和应用场景？
computed是计算属性，依赖其他属性值，并且执行后会有缓存。computed只有依赖的属性值发生变化，并且下一次获取computed的值时，才会重新执行计算。
Watch主要是观察，每当监听的数据变化时都会执行回调进行后续操作，没有缓存。
运用场景：
1.当我们需要计算并且依赖其他属性值时，应该使用computed，避免每次获取值时都需要重复计算。
2.当我们需要在数据变化时执行异步或者比较复杂的操作时，应该使用watch。Watch允许我们进行异步操作，限制我们执行该操作的频率，并在我们得到最终结果之前，允许设置中间状态。
九、vue父子、兄弟、隔代之间如何进行相互通信？
1. Props和$emit适用于父子组件通信
父组件通过props向下传递数据，子组件触发自定义事件，通过$emit向上传递数据。
2. EventBus（事件车）适用于父子、兄弟、隔代组件通信
发送方通过$emit发送消息，接收方通过$on接收消息。
3.Ref、$parent和$children适用于父子组件通信
Ref：如果在普通的Dom元素上使用，引用指向的就是Dom元素；如果在子组件上使用指向的就是组件实例。
4. $attrs和$listener适用于隔代通信
$attrs:包含了包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listener：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
5.VueX适用于父子、隔代、兄弟组件通信。
十、Vuex的使用？
定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。store基本上就是一个容器，它包含着你的应用中大部分的状态state。
特点：
1.Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2.改变 store 中的状态的唯一途径就是显式地提交(commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。
模块包含：
State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。
什么情况下使用VueX？
1. 需要构建一个中大型单页面应用时，使用vuex更好地在组件外部管理状态
2.不要滥用Vuex，推荐方式一，能父子的就父子，非父子的使用 Vuex
为什么vue的mutation中不能做异步操作？
每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照储存下来，然后实现time-travle。如果mutation支持异步操作，就没办法知道何时更新的了，无法进行状态跟踪，给调试带来困难。
使用方法：
1.下载依赖。Npm install vuex --save
2.创建仓库。在src的文件目录下创建一个名为store的文件夹，为了方便引入，在stroe文件夹中新建index.js内容如下：
import Vue from’vue’;
import Vuex from ‘vuex’;
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
3.在main.js里面引入store，然后全局注入一下，这样一来可以在任何额一个组件里面使用this.$store.实例：
Import store from’./store’
new Vue({
store
Render:h => h(App)
}).$mount(‘#app’)
十一、vue-router路由模式有几种？
路由模式有三种：hash、hitstory、abstract
Hash：使用URL的hash值作为路由，支持所有浏览器。
早期的前端路由的实现就是基于location.hash 来实现的。其实现原理很简单，location.hash的值就是URL 中 #后面的容。比如https://www.word.com#search，它的 location.hash 的值为 '#search'。
特点：
1. Hash只是客户端中url的一种状态，当向服务器发送请求时，hash部分不会被发送。
2. 可以通过a标签的href属性来改变hash值，或者通过js的location.hash进行赋值，改变url的hash值
History：依赖Html5 History Api和服务器配置。
H5 history Api主要有两个：history.pushState和history.replaceState，这两个API可以在不进行刷新的情况下，操作浏览器的历史。
特点:
1.Pushstate和replaceState两个api的操作来实现url的变化
2.可以使用popState事件来监听url的变化，从而对页面进行跳转。
3. 以上两个api不会触发popstate事件，这时需要我们手动去触发。
Abstract;支持所有的js运行环境，如果发现没有浏览器的api，路由会强制进入这个模式。
十二、v-model的实现原理？
本质是语法糖，当在一些组件上使用v-model时默认为组件绑定名为value的prop和名为input的事件。
十三、组件中的data为什么是一个函数？
1.一个组件服用多次，会创建多个实例，本质上这些实例都是一个构造函数。
2. 如果data是对象，对象属于引用类型，组件之间都会使用这个对象，这样会造成组件之间数据互相影响。
3.Data函数return一个新对象，其实还是为data定义了一个对象，只不过这个对象是内存地址的单独引用，避免数据干扰的现象。
十四、说一下虚拟DOM
原理：
1. 用js模拟真实的DOM树，对真实的dom进行抽象。
2.Diff算法（比较两颗虚拟dom树的差异）
3.Pach算法（将两颗虚拟dom树的差异应用到真实的dom树）
补充：
Diff算法：
1. 同级比较，在比较子节点。
2. 先判断一方有子节点，一方没有的情况。
3. 比较都有子节点的情况。
4. 递归比较子节点。
十五、keep-alive组件？
1.是vue的一个内置组件，可以使被包含的组件保留状态不被改变，避免重复渲染。
2.一般结合路由和动态组件使用，用于缓存组件。
3. 提供include和exclude属性，两个都支持正则和字符串。Inlcude表示只有名称匹配的组件才能被缓存。Exclude表示任何名称匹配的组件都不回被缓存。且exclude的优先级高于include。
4.对应两个钩子函数，activeted和deaactiveted。当组件被激活时，触发钩子函数activeted；当组件被移除时，触发钩子函数deaactiveted。
十六、vue的生命周期？
1. beforeCreate 创建之前
2.Created 创建完成
3.beforeMount 挂载之前
4. Mounted 挂载完成
5. beforeUpdate 更新之前
6.Updated 更新完成
7. beforeDestory 销毁之前
8.Destoryed 销毁完成
Keep-alive有专属的钩子函数
扩展：
1. beforeCreate是new Vue（）之后触发的第一个钩子，在当前阶段，data、methods、computed和Watch上的数据和方法都不回被调用
2.Created在实例创建完成后执行，当前阶段已完成了数据监测，也就是可以使用和更改数据，并不回触发updated函数。可以做一些初始数据的获取，在当前阶段无法和DOM进行交互。如果需要进行交互，可以通过vm.$nextTick来访问DOM。
3. beforeMount在发生挂载之前template模板已经导入渲染了，当前阶段虚拟DOM已经创建完成，即将开始渲染，可以更改数据，并不会触发updated。
4. Mounted在挂载完成以后发生，在当前阶段，真是的DOM挂载完成，数据完成双向绑定，可以访问到DOM节点，使用$refs属性对DOM进行操作。
5. beforeUpdate发生在更新之前，也就是响应式数据更新之前，虚拟DOM重新渲染之前被触发，可在当前阶段更改数据，并不回被重新渲染。
6.Updated发生在更新完成之后，当前阶段组件和DOM已完成更新，避免在当前阶段更改数据，可能导致无限循环更新。
7. beforeDestory发生在实例销毁之前，在当前阶段也可以被使用，我们在这时可进行收尾工作，如清除计时器。
8.Destoryed发生在销毁实例之后，这时候只剩下空壳的DOM，组件已经被拆解，数据绑定解除，监听被移出，字实例全部销毁。
vue组件生命周期调用顺序？
1.组件调用顺序是先父组件后子组件，渲染完成的顺序是先子组件后父组件。
2. 组件销毁操作是先父组件后子组件，销毁完成的顺序是先子组件后父组件。
在什么阶段才能访问操作DOM？
在钩子函数mounted被调用之前，vue已经将template模板挂载到页面上。
十七、axios的作用？
定义：是一个基于promise的http客户端，可以在浏览器和node.js中使用。主要是用于向后台发起请求，并在请求中更多可控功能。
特点：
1. 从浏览器创建xmlhttprequests
2. 从node.js创建http请求
3. 支持promise异步操作
4. 拦截请求和响应
5. 转换请求数据和响应数据
6.取消请求
7. 自动转换json数据
8.客户端支持防御XSRF
使用：在npm安装后，需要在main.js中引用 import axios from ‘axios’
十八、v-if和v-show的区别
v-if: 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show: 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS “display” 属性进行切换。
所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。
十九、v-if和v-for的优先级
当v-if和v-for一起使用时，v-for比v-if的优先级要高，意味着v-if将分别重复运行在每个v-for的循环中。
二十、Vue性能优化的方法
1.路由懒加载
const router = new VueRouter({
routes: [
{path: '/foo',component: ()=>import('./Foo.vue')}
]})
2.keep-alive缓存页面
<template>
<div id="app">
<keep-alive>
<router-view />
</keep-alive>
</div>
</template>
3. 使用v-show复用DOM
4. V-for遍历避免同时使用v-if
5.图片懒加载
<img v-lazy="/static/img/1.png">
6.长列表性能优化
如果列表是纯粹的数据展示，不会有任何变化，不需要做响应化
export default {
data: () => ({
users: []
}),
async created() {
this.users = Object.freeze(获取来的数据)
}}
如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容
<recycle-scroller :items="items" :item-size="24">
<template v-slot="{item}">
<FetchItemView :item="item" @vote="voteItem(item)" />
</template></recycle-scroller>
7. 事件销毁，如定时器等
8. 服务端渲染SSR
二十一、单页面应用？
定义：在传统的网页中浏览器更多的事充当一个展示层，路由处理、服务调用、页面跳转等流程都是由服务器处理的，即MVC都是放在服务器端。SPA技术将逻辑从服务端转到了客户端。这导致web服务器发展为一个纯数据API或web服务。这种架构的转变被称为‘瘦服务框架’。
传统网站的特点：
1.重服务端，由于MVC都存在服务器上，因此开发资源好开发重心都偏向后端。
2.页面刷新频繁，由于浏览器只是一个展现层，当页面功能发生改变时，页面就会刷新。这会导致资源浪费，用户还需要额外的时间等待响应，体验不好。
SPA的特点：
1.无刷新体验，由于路由分发直接在浏览器端完成，页面不刷新，对用户响应非常及时。
2.减轻服务器压力，服务端只提供数据就可以了。
3.完全的前端组件化，前端不再以页面为单位，更多地采用组件化思想，代码结构和组织方式更加规范，便与修改和debug。
4. 不利于SEO，单页页面，数据在前端渲染，就意味着没有 SEO。
5. 初次加载耗时相对增多，要在一个页面上为用户提供产品的所有功能，在这个页面加载的时候，首先要加载大量的静态资源，这个加载时间相对比较长。
6. 低版本浏览器兼容差。
十九、SEO是什么？（Search Engine Optimization）
定义：seo是基于搜索引擎营销的一种网络营销方式，通过SEO技术可提升网站的关键词排名和公司产品的曝光度。
1. 站内seo：指网址的内部优化，是对网站内部进行优化，包括代码标签优化、内容优化、安全建设、用户体验等，通俗的来说SEO就是关键词布局和站内相关的文章互做锚文本，提升首域名权重
2. 站外SEO：就是网址的外部优化，包括外链建设，品牌建设，速度优化，引流等等；通俗的说站外SEO就是增加外链，提高访问量。
