Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
 
       下面介绍三种 Vue.js 的安装方法：
 
        1.独立版本
 
       我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。->  <script src = ../vue.js> </script>  开发环境不要使用最小压缩版，不然会没有错误提示和警告！（页面中直接使用）
 
使用vue多页面开发：
 
引入vue.js
创建一个vue根实例  new Vue({选项})
        2.使用CDN方法
 
 BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ， （国内不稳定）           
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。（推荐使用）
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js，如（<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>）
     3.NPM方法（推荐使用）
 
      在用Vue.js构建大型应用的时候推荐使用NPM安装方法，NPM能很好的和诸如Webpack或者Browserify 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
 
     首先，先列出我们接下来需要的东西：
 
node.js环境（npm包管理器）
vue-cli 脚手架构建工具
cnpm npm的淘宝镜像      
       1） 安装node.js
 
            从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，安装完之后，我们通过打开命令行工具（win+R）,输入
 
        node -v 命令，查看node的版本，若出现相应的版本号，则说明你安装成功了。
 
              
 
             npm包管理器，是集成在node中的，所以安装了node也就有了npm,直接输入 npm -v 命令，显示npm的版本信息。
 
              
 
        到目前为止，node的环境已经安装完成，npm 包管理器也有了，由于有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败，所以我们还需要npm的国内镜像----cnpm.
 
     2） 安装cnpm
 
           在命令行中输入  npm install -g cnpm --registry=http://registry.npm.taobao.org  ，然后等待，没报错表示安装成功，（我的已经安装过了，显示更新成功的信息），如下图：
 
            
 
       完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm的，查看淘宝npm镜像官网。
 
 
 
      3） 安装vue-cli2 脚手架构建工具（必须在全局中进行安装）
 
           在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。
 
           是否安装成功：vue -V
 
            通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。
 
 
 
        首先我们要选择存放项目的位置，然后再用命令行cd到项目的目录中，在这里，我选择在c盘下创建新的目录（NodeTest 目录），用cd 将目录切到该目录下，如下图：
 
         
 
在NodeTest 目录下，在命令行中运行命令 vue init webpack firstApp（初始化一个完整版的项目） 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstApp是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中（我的实例中，会在NodeTest 目录生成该文件夹），如下图：
 
若我们在编辑器中已经手动创建了这个项目存放的文件夹cd到项目中：vue init webpack;初始化一下即可,同时还会加载webpack所依赖的包：
 
是否是在本目录下进行创建
 
        
 
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。
 
Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：作者，如果你有配置git的作者，他会读取。
Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n
    运行初始化命令的时候会让用户输入几个基本的配置选项，如项目名称、项目描述、作者信息，对于有些不明白或者不想填的信息可以一直按回车去填写就好了，等待一会，就会显示创建项目创建成功，如下图:
 
     
 
 接下来，我们去NoteTest目录下去看是否已创建文件：
 
      
 
  打开firstApp 项目，项目中的目录如下：
 
      
 
    介绍一下目录及其作用：
 
     build：最终发布的代码的存放位置。
 
     config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。
 
     node_modules：npm 加载的项目所需要的各种依赖模块。
 
     src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：
 
             assets:放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等
 
             components:目录里放的是一个个的组件文件
 
             router/index.js：配置路由的地方
 
             App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的<router-view/>必不可少。
 
             main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。
 
     static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。
 
     test：初始测试目录，可删除
 
      .XXXX文件：配置文件。
 
     index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。
 
     package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）
 
     package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）
 
     README.md：项目的说明文件。
 
     webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。
 
     .babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制
 
     .gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）
 
     .postcssrc.js:前缀的配置 （css转化的配置）
 
     .editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格...（建议定义这个规范）
 
     .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）
 
     .eslintignore:忽略eslint对项目某些文件的语法规则的检查
 
 
 
    这就是整个项目的目录结构，其中，我们主要在src目录中做修改（模块化开发）。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装。
 
    cd  项目名；进入项目中
 
    安装项目所需要的依赖包/插件（在package.json可查看）：执行 cnpm install   (npm可能会有警告，这里可以用cnpm代替npm了，运行别人的代码需要先安装依赖)如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install
 
若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev 运行项目
 
    
 
    安装完成之后，我们到自己的项目中去看，会多一个node_modules文件夹，这里面就是我们所需要的依赖包资源。
 
    
 
 安装完依赖包资源后，我们就可以运行整个项目了。
 
    
 
   运行项目
 
    在项目目录中，运行命令 npm run dev （npm run start），会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。
 
    
 
    项目启动后，在浏览器中输入项目启动后的地址：
 
  
 
    在浏览器中会出现vue的logo：
 
     
 
至此，vue的三种安装方式已介绍完毕。
 
 
 
项目完成后输入打包命令:cnpm run build;会生成一个dist文件，就是我们的打包文件，点击.html文件能运行则成功。
 
一、搭建vue的开发环境（大纲）
 
必须安装node.js
搭建vue的开发环境，安装vue的脚手架工具    官方命令行工具
npm install - -global vue-cli
 
     3.创建项目   必须cd到对应的一个项目里面
 
vue init webpack vue-demo01
 
cd  vue-demo01
 
cnpm install   /  npm install          如果创建项目的时候没有报错，这一步可以省略。如果报错了  cd到项目里面运行  cnpm install   /  npm install 
 
npm run dev/npm run start
 
 
     4.另一种创建项目的方式中小型项目   （推荐）  ***
 
vue init webpack-simple vuedemo02
 
cd  vuedemo02       
 
cnpm install   /  npm install           
 
npm run dev
 
 
 
 
拿到别人的项目不能正常运行后看有没有node_modules这个文件（项目所有的依赖），若没有cd到项目中安装项目的依赖：cnpm install/npm install
 
 
 
二、升级：vue-cli3.0
 
一、使用vue-cli3.0
 
Vue CLI的包名称由vue-cli改成了@vue/cli
如果你已经全局安装了旧版本的vue-cli(3.0以下)，你需要先通过npm uninstall vue-cli -g/yarn global remove vue-cli卸载它。
Node.js8.9+
安装vue-cli3.0     npm install -g @vue/cli  或者 yarn global add @vue/cli
版本是否是3.x    vue --version/vue -V
通过vue-cli创建项目
创建项目命令
 
 
vue create 项目名;   项目名不建议存在大写，中间用-隔开
 
 
这时候需要注意创建项目需要预先安装的插件：
 
默认的会有Babel + ESLint；但是不建议默认，选择下面：
 
 
 
 
 
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 >( ) Babel //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router // vue-router（vue路由）
 ( ) Vuex // vuex（vue的状态管理模式）
 ( ) CSS Pre-processors // CSS 预处理器（如：less、sass）
 ( ) Linter / Formatter // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing // 单元测试（unit tests）
 ( ) E2E Testing // e2e（end to end） 测试 
 
 
 
等待项目初始化完成。。。。。。
 
1.cd 到项目里
 
2.npm run serve   运行项目
 
 
 
或者使用图形化界面创建项目：
 
vue ui
 
 
registerServiceWorker.js：这个就是service workers的配置文件,可以对sw的各个生命周期进修改。（这个一般用的少）
 
自定义配置文件：vue.config.js(固定)
 
创建好项目后会发现找不到webpack.config.js配置文件，这是vue-cli3不想让我们随意看到配置文件隐藏起来了，可以通过在根目录下创建一个vue.config.js(名字固定)来添加我们的配置(在运行时会自动添加到webpack.config.js文件上)
 
 
vue.config.js配置项
 
三、vue-cli3中拉取vue-cli2
 
拉取 2.x 模板 (旧版本)
 
Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：
 
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
 
https://cli.vuejs.org/zh/guide/creating-a-project.html
 
runtime+compiler和runtime-only的区别：在main.js文件中
 
 
  /**
   *等价于
  render: function(h) {
    return h(App);
  }
    等价于
  render: function(createElement) {
    return createElement('h2');
  }
  */
 
 
 
    1.如果在开发中使用的是template，就需要选runtime-compiler
     2.如果在开发中使用的是.vue文件夹，就需要选runtime-only(比上面那种模式轻大约 6KB，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数;.vue 文件中的template也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template)
     3.runtime-compiler的vue程序运行过程：
           template---------------->ast------------->render---------------->vdom------------------>UI
            (模板)    解析   (抽象语法树)  编译  (render函数)  形成  (虚拟DOM)  转成   (真实DOM)
     4.runtime-only的vue程序运行过程：
           render------------------->vdom-------------->UI
         (render函数)  形成  (虚拟DOM)  转成   (真实DOM)
     5.runtime-only的性能更高、代码量更少
 
 
 
 
 
 
 
 
 
 
看了那么多的vue.js的安装方式总结一下。如有不多请多多指教！希望给您带来帮助！
 
参考文献：https://blog.csdn.net/m0_37479246/article/details/78836686

前面已经做过前（Vue）后端(SpringBoot)分离的项目，当再次使用Vue的时候发现自己很多东西都忘了。所以写本Vue专题记录。
 整理了一个多星期的vue终于有结果了。
 VUE之常用语法（一）
 VUE之组件化开发（二）
 VUE之路由模块（三）
 后续有时间将整理实际案例供参考。
 案例技术栈、内容大纲如下：
 
1. 全家桶成员使用（vue-cli、vue-router、axios、vuex） 
2. 利用Mock编写本地运行接口返回数据 
3. cube-ui
4. 嵌套路由使用
5. token和axios请求的全局拦截和路由守卫（实现权限控制） 
6. 利用vuex和本地存储的配合实现购物车的功能 
7. 进行项目的性能优化及体验优化(优化首屏加载、路由跳转过渡效果、购物车动画效果) 
8. 打包项目
等等

vue后台常用模板：
 
element文档: http://element-cn.eleme.io/#/zh-CN/component/installation
 vue API: https://cn.vuejs.org/v2/api/
 
以下是在下收集的三个常用的vue模板
 
1、vue-manage-system
 
git地址：https://github.com/lin-xin/vue-manage-system
 线上地址： https://lin-xin.gitee.io/example/work/#/login
 模板如图：
 
 
 
2、vue-element-admin
 git地址：https://github.com/PanJiaChen/vue-element-admin
 国际化版本：https://github.com/PanJiaChen/vue-element-admin/tree/i18n
 
中文线上预览：https://panjiachen.github.io/vue-element-admin/#/dashboard
 
IE兼容处理：参考文章
 模板如图：
 
 
 
3、vuejs 和 element 搭建的一个后台管理界面
 
相关技术：
 vuejs2.0：渐进式JavaScript框架，易用、灵活、高效，似乎任何规模的应用都适用。
 element：基于vuejs2.0的ui组件库。
 vue-router：一般单页面应用spa都要用到的前端路由。
 vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
 
线上地址：https://taylorchen709.github.io/vue-admin/#/login
 git地址：https://github.com/taylorchen709/vue-admin
 模板如图：
 
 使用：
 
install dependencies
 
npm install
 serve with hot reload at localhost:8081
 
npm run dev
 build for production with minification
 
npm run build
 
 
4、基于Vue实现后台系统权限控制
 
基于Vue.js 2.x系列 + Element UI 的后台系统权限控制
 
git地址：https://github.com/mgbq/vue-permission
 线上地址：https://mgbq.github.io/vue-permission/#/dashboard/dashboard
 
使用参考博客： https://blog.csdn.net/qq_32340877/article/details/79416344
 

 
面试必备：2021 Vue经典面试题总结（含答案）
 
一、什么是 MVVM ？
二、mvvm 与 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适用？
三、vue 优点？
四、 组件之间的传值？
五、路由之间跳转
六、vue.cli 中怎样使用自定义组件？遇到过哪些问题？
七、vue 如何实现按需加载配合 webpack 设置
八、vuex 面试相关
九、 v-show 与 v-if 的区别？
十、 如何让 CSS 只在当前组件中起作用？
十一、keep-alive 的作用是什么?
十二、Vue 组件引入步骤?
十三、v-el 作用是什么?
十四、Vue 插件使用步骤
十五、列举出3个 Vue 中常用的生命周期钩子函数
十六、active-class 是哪个组件的属性？
十七、如何定义 vue-router 动态路由以及如何获取传过来的动态参数？
十八、vue-router 有哪几种导航钩子？
十九、生命周期相关面试题
二十、说出至少4种vue指令和它的用法？
二十一、vue-loader是什么？用途有哪些？
二十二、scss 是什么？在 vue.cli 中的安装使用步骤？有哪几大特性？
二十三、页面渲染为什么使用 key？
二十四、为什么避免 v-if 和 v-for 一起用？
二十五、VNode 是什么？虚拟 DOM 是什么？
二十六、动态绑定 Class 有几种方式？
二十七、Vue 插槽
二十八、场景面试题：异步更新队列 - $nextTick()
二十九、场景面试题：mixins异步请求处理
三十、场景面试题：父子组件传值-生命周期
三十一、拓展阅读
 

 
 
 
一、什么是 MVVM ？
 
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
 
在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。
 
ViewModel 通过双向数据绑定把 View 层和 Model 层连接起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
 
二、mvvm 与 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适用？
 
mvc和mvvm其实区别并不大，都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
 
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
 
场景：数据操作比较多、频繁的场景，更加便捷。
 
三、vue 优点？
 
 
低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
 
 
可重用性。可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
 
 
独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。
 
 
可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。
 
 
四、 组件之间的传值？
 
 
父组件通过标签上:data=data方式定义传值
 
 
子组件通过props方法接受数据
 
 
子组件通过$emit方法传递参数
 
 
详参博文：
 
《Vue进阶（六）：组件之间的数据传递》
《Vue进阶（九十四）：自定义组件》
《Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理》
 
五、路由之间跳转
 
 
声明式（标签跳转）
 
 
编程式（ js跳转）
 
 
详参博文：
 
《Vue进阶（幺伍伍）：vue-resource 拦截器interceptors使用》
《Vue进阶（幺叁捌）：vue路由传参的几种基本方式》
《Vue进阶（二十六）：详解router.push()》
 
六、vue.cli 中怎样使用自定义组件？遇到过哪些问题？
 
第一步：在components目录新建组件文件（indexPage.vue），script一定要export default {}。
 
第二步：在需要用的页面（组件）中导入：import indexPage from '@/components/indexPage.vue'
 
第三步：注入到vue子组件的components属性上面,components:{indexPage}
 
第四步：在template视图view中使用，例如有indexPage命名，使用的时候则index-page。
 
 
七、vue 如何实现按需加载配合 webpack 设置
 
webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。
 
页面不按需加载引入方式：import home from '../../common/home.vue'
 
页面按需加载引入方式：
 
const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
 
八、vuex 面试相关
 
（1）vuex是什么？怎么使用？哪种功能场景使用它？
 
vue框架中状态管理。在main.js引入store注入。新建一个目录store 。场景有：单页应用中，组件之间的状态，音乐播放、登录状态、加入购物车等。
 
（2）vuex有哪几种属性？
 
有五种，分别是 State、 Getter、Mutation 、Action、 Module。
 
（3） vuex的State特性
 
 
Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data。
 
 
state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。
 
 
通过mapState把全局 state 和 getters 映射到当前组件的 computed 计算属性中。
 
 
（4）vuex的Getter特性
 
 
getters 可以对State进行计算操作，它就是Store的计算属性。
 
 
虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。
 
 
如果一个状态只在一个组件内使用，可以不用getters。
 
 
（5）vuex的Mutation特性
 
Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。
 
（6）不用Vuex会带来什么问题？
 
 
可维护性会下降，想修改数据要维护三个地方；
 
 
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
 
 
增加耦合，大量的上传派发，会让耦合性大大增加，Vue用Component本意就是为了减少耦合，现在这么用，和组件化的初衷相背。
 
 
详参博文：
 
《Vue进阶（幺肆捌）：Vuex辅助函数详解》
《Vue进阶（二十七）：Vuex之getters,mapGetters,…mapGetters详解》
《Vue进阶（四十三）：Vuex之Mutations详解》
《Vue进阶（幺肆幺）：Vue计算属性computed方法内传参》
 
九、 v-show 与 v-if 的区别？
 
 
v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏；
 
 
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果；
 
 
使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。
 
 
 
十、 如何让 CSS 只在当前组件中起作用？
 
将当前组件的<style>修改为<style scoped>。
 
十一、keep-alive 的作用是什么?
 
包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。
 
详参博文：
 
《Vue进阶（幺肆拐）：利用Vue中keep-alive快速实现页面缓存》
 
十二、Vue 组件引入步骤?
 
 
采用ES6的import ... from ...语法或CommonJS的require()方法引入组件;
 
 
对组件进行注册,代码如下
 
// 注册
Vue.component('my-component', { template:'
	A custom component!
'})
 
 
使用组件<my-component> </my-component>
 
 
详参博文：
 
《Vue进阶（二十五）：＜component＞实现动态组件》
《Vue进阶（九十四）：自定义组件》
 
十三、v-el 作用是什么?
 
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
 
 
十四、Vue 插件使用步骤
 
 
采用ES6的import ... from ...语法或CommonJS的require()方法引入插件。
 
 
使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })。
 
 
十五、列举出3个 Vue 中常用的生命周期钩子函数
 
 
created: 实例创建完成之后调用，在这一步，实例已经完成数据观测、 属性和方法的运算、watch/event事件回调。然而，挂载阶段还没有开始, $el属性目前还不可见。
 
 
mounted: el被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
 
 
activated: keep-alive组件激活时调用。
 
 
详参博文：
 
《Vue进阶（十六）：vue项目结构启动原理详解》
《Vue进阶（二）：Vue项目文件结构介绍》
 
十六、active-class 是哪个组件的属性？
 
vue-router模块的router-link组件。
 
十七、如何定义 vue-router 动态路由以及如何获取传过来的动态参数？
 
详参博文：
 
《Vue进阶（幺叁捌）：vue路由传参的几种基本方式》
《Vue进阶（二十六）：详解router.push()》
 
十八、vue-router 有哪几种导航钩子？
 
共分三种。
 
第一种：全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
 
第二种：组件内钩子；
 
第三种：单独路由独享组件；
 
详参博文：
 
《Vue进阶（十八）：router的beforeEach与afterEach钩子函数》
 
十九、生命周期相关面试题
 

 总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
 
 
创建前/后： 在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined。在created阶段，vue实例的数据对象data有了，el还没有。
 
 
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
 
 
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
 
 
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。
 
 
（1）什么是vue生命周期?
 
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
 
（2）vue生命周期的作用是什么?
 
Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。
 
（3）vue生命周期总共有几个阶段?
 
可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。
 
（4）第一次页面加载会触发哪几个钩子?
 
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
 
（5）DOM 渲染在 哪个周期中就已经完成?
 
DOM 渲染在 mounted 中就已经完成了。
 
（6）简单描述每个周期具体适合哪些场景?
 
生命周期钩子的一些使用方法：
 
 
beforecreate : 可以在此阶段加loading事件，在加载实例时触发；
 
 
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；
 
 
mounted : 挂载元素，获取到DOM节点；
 
 
updated : 如果对数据统一处理，在这里写上相应函数；
 
 
beforeDestroy : 可以做一个确认停止事件的确认框；
 
 
nextTick : 更新数据后立即操作dom；
 
 
详参博文：
 
《Vue进阶（六十二）：理解$nextTick()》
 
二十、说出至少4种vue指令和它的用法？
 
v-if：判断是否隐藏；
v-for：数据循环；
v-bind:class：绑定一个属性；
v-model：实现双向绑定；
 
Vue如何创建自定义指令？
 
详参博文：
 
《Vue进阶（九十一）：自定义指令》
 
二十一、vue-loader是什么？用途有哪些？
 
解析.vue文件的一个加载器。
 
用途：js可以写es6、style样式可以scss或less、template可以加jade等。
 
 
二十二、scss 是什么？在 vue.cli 中的安装使用步骤？有哪几大特性？
 
css的预编译语言。
 
使用步骤：
 
第一步：先装css-loader、node-loader、sass-loader等加载器模块；
 
第二步：在build目录找到webpack.base.config.js，在extends属性中加一个拓展.scss；
 
第三步：在同一个文件，配置一个module属性；
 
第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss”；
 
特性:
 
 
可以用变量，例如（$变量名称=值）；
 
 
可以用混合器；
 
 
可以嵌套；
 
 
详参博文：
 
《Vue进阶（幺柒陆）：CSS预编译语言Sass、Scss、Less和Stylus》
《Vue进阶（幺柒柒）：Vue应用Sass、Scss、Less和Stylus》
 
二十三、页面渲染为什么使用 key？
 
当有相同标签名的元素切换时，为避免渲染问题，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
 
详参博文：
 
《Vue进阶（幺伍贰）：el-table-column :key应用》
《Vue进阶（幺伍零）：Vue key应用》
《Vue进阶（幺伍幺）：Vue 应用key提升页面渲染性能》
 
二十四、为什么避免 v-if 和 v-for 一起用？
 
当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，只检查它一次，且不会在 v-if 为否的时候运算 v-for。
 
二十五、VNode 是什么？虚拟 DOM 是什么？
 
Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。
 
详参博文：
 
《Vue进阶（幺陆贰）：vue render函数介绍》
 
二十六、动态绑定 Class 有几种方式？
 
详参博文：
 
《Vue进阶（幺伍玖）：动态样式设置》
 
二十七、Vue 插槽
 
详参博文：
 
《Vue进阶（幺贰柒）：Vue插槽》
《Vue进阶（幺贰捌）：Vue插槽：slot、slot-scope与指令v-slot使用方法区别讲解》
 
二十八、场景面试题：异步更新队列 - $nextTick()
 
详参博文：
 
《Vue进阶（六十二）：理解$nextTick()》
 
二十九、场景面试题：mixins异步请求处理
 
详参博文：
 
《Vue进阶（幺陆幺）：mixins学习》
 
三十、场景面试题：父子组件传值-生命周期
 
详参博文：
 
《Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理》
 
三十一、拓展阅读
 
《Vue进阶（幺零二）：面试必备：2021 Vue经典面试题整理（含答案）》