vue2.0面试题总结（一）

vue常用属性汇总

1.vue实例常用属性

（1），数据

data：vue实例的数据对象

components：vue实例配置局部注册组件

（2）类方法

computed：计算属性

watch：侦听属性

filters：过滤器

render：渲染函数，创建虚拟DOM

（3）生命周期

created：在实例创建完成后被立即调用，完成初始化操作

mounted：el挂载到vue实例上了，开始业务逻辑操作

beforeDestory：实例销毁之前调用

2.vue组件

props：用于接收来自父组件的数据

template：组件模板

面试小题

1.active-class是哪个组件的属性？嵌套路由怎么定义？

答：vue-router模块的router-link组件

嵌套路由：

import Vue from ‘vue’

import VueRouter from ‘vue-router’

import login from ‘@/html/login’

import taAutonym from ‘@/html/taAutonym’

Vue.use(VueRouter)

var routes = [

{path: ‘/’, name: ‘login’, meta: {title: ‘登录’}, component: login},

{path: ‘/taAutonym’, meta: {title: ‘实名认证’}, taAutonym: ”, component: taAutonym}

]

var router = new VueRouter({ mode: ‘history’, routes: routes })

router.beforeEach((to, from, next) => {

if (to.meta.title) { document.title = to.meta.title } next() })

export default router

2.怎么定义vue-router的动态路由？怎么获取传过来的动态参数？

答：在router目录下的index.js文件中，对path属性加上/:id，使用router对象的param.id

如：

html为：

_this.$router.push({path: ‘/taAutonym/1‘}) 动态添加

<dt><a class=”tlBtn” v-if=”ok” href=”/taAutonym/1″ @click=”popoutHint”>立即登陆</a></dt> 标签直接添加

路由内：

{path: ‘/taAutonym/:num‘, meta: {title: ‘实名认证’}, taAutonym: ”, component: taAutonym}

3、vue-router有哪几种导航钩子

答：三种

第一种是全局导航钩子：

router.beroreEach(to,from,next),作用：跳转前进行判断拦截。

to:route即将要进入的目标路由对象

from:route当前导航正要离开的路由

next:function一定要调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数

第二种：组件内的钩子

你可以在路由组件内直接定义以下路由导航钩子

beforeRouteEnter

beforeRouteUpdate(2.2新增)

beforeRouteLeave

如：const Foo = { template: `…`, beforeRouteEnter (to, from, next) {

// 在渲染该组件的对应路由被 confirm 前调用

// 不！能！获取组件实例 `this` ，

beforeRouteEnter钩子不能访问this,因为钩子在导航确认前被调用，

因此即将登场的新组件还没被创建，不过你可以通过传一个毁掉给next来访问组件实例 在导航被确认的时候执行回调，

并且把组件实例作为回调方法的参数

如：beforeRouteEnter (to, from, next) { next(vm => { // 通过 `vm` 访问组件实例 }) }

你可以 在 beforeRouteLeave 中直接访问 this。

这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。

可以通过 next(false) 来取消导航

// 因为当钩子执行前，组件实例还没被创建 },

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用

// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

// 可以访问组件实例 `this` },

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用

// 可以访问组件实例 `this` } }

第三种：单独路由独享组件

你可以在路由配置上直接定义beforeEnter钩子：

如 const router = new VueRouter({ routes:

[ { path: ‘/foo’, component: Foo, beforeEnter: (to, from, next) => { // … }, beforeEnter: (route) => { // … } } ] });

这些钩子与全局before钩子的方法参数是一样的

4.超链接a与router-link 的区别

<dt><router-link class=”tlBtn” v-if=”ok” to=”/myHome”>我的家</router-link></dt>

<dt><a class=”tlBtn” v-if=”ok” href=”/myHome”>我的家</a></dt>

表面实现的效果都能跳转到myHome页面，

但是之间的区别是 <router-link>组件支持用户在具有路由功能的应用中（点击）导航。通过to属性指定目标地址，

默认渲染成带有正确链接的<a>标签，可以通过配置tag属性生成别的标签。

另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名 <router-link> 比起写死的 <a href="..."> 会好一些，

理由如下： 无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，

所以，当你要切换路由模式， 或者在 IE9 降级使用 hash 模式，无须作任何变动。

在 HTML5 history 模式下，router-link 会守卫点击事件，让浏览器不再重新加载页面。 当你在 HTML5 history 模式下使用 base 选项之后，所有的 to 属性都不需要写（基路径）了。

五、webpack基本配置（本段整理总结自:https://www.cnblogs.com/yangmin01/p/6285742.html）

1.设置webpack-dev-server

在开发时，每次更改文件后要运行npm run build 来重新编译、打包文件，无聊又麻烦。我们可以设置 webpack-dev-server来让他自动运行。webpack-dev-server 主要是启动了一个使用 express 的 Http服务器 ，它的作用主要是用来伺服资源文件 。此外这个 Http服务器 和 client 使用了 websocket 通讯协议，原始文件作出改动后， webpack-dev-server 会实时的编译，但是最后的编译的文件并没有输出到目标文件夹。在webpack.config.js配置文件中增加入口命令可以使文件变化时浏览器自动刷新。

　　首先要安装它 npm install webpack-dev-server --save-dev。然后在package.json文件的scripts部分增加快捷指令：

1 "scripts": {    
2      "dev": "webpack-dev-server --devtool eval --port 7070 --progress --colors --compress --hot --inline --content-base ./build"   
3  },

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值，即可启动webpack服务器监听。这些指令的意思：

webpack-dev-server：在 localhost:7070 建立一个 Web 服务器。

–devtool eval: 为你的代码创建原地址。当有任何报错的时候可以让你更精确的定位到文件和行号。

–progress： 显示编译的输出内容进度。

–compress: 启用gzip压缩。

–hot:热替换，开发过程中任何前端代码的更改都会实时的在浏览器中表现出来，不需要手动刷新。

–colors：显示编译的输出内容颜色。

–inline：webpack提供两种自动刷新模式 iframe/inline。默认iframe。

–content-base ./build:指向设置的输出目录，即build文件夹。

详细请参考webpack-dev-server配置文档。

如果你还要进行后端开发，就要采用双服务器模式：一个后端服务器和一个资源服务器（即Webpack-dev-server)。配置双服务器热替换模式首先需要修改wepack.config.js的entry属性值：

entry:[
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:7070',
    path.resolve(__dirname,'src/js/entry.js')        
],

运行npm run dev打开服务器，在浏览器中访问http://localhost:7070 即可看到效果。

2.loader

webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader 可以理解为模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。详细参考loaders。

一般loader 一般以xxx-loader的方式命名，xxx代表了这个 loader 要做的转换功能，比如css-loader。Loader 可以在require()引用模块的时候添加，也可以在 webpack 全局配置中进行绑定，还可以通过命令行的方式使用。例如页面中要引入样式文件main.css，我们可以将main.css看成一个模块，然后css-loader会遍历 CSS 文件，然后找到 url() 处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

• 通过require()添加loader，例如在入口文件entry.js中引入如下：

require("!style!css!../src/css/main.css") // 载入 main.css,多个loader之间用‘!’连接

• 在webpack.config.js中全局配置：添加config.module
  

   1 var webpack = require("webpack");
   2 var path = require('path');
   3 
   4 var config = {
   5     entry:[
   6         'webpack/hot/dev-server',
   7         'webpack-dev-server/client?http://localhost:7070', //增加的入口点使文件改变时浏览器自动刷新当然你也可以直接在你 index.html 引入这部分代码:<script src="http://localhost:7070/webpack-dev-server.js"></script>
   8         path.resolve(__dirname,'src/js/entry.js')        
   9     ],    
  10     output:{
  11         path: path.resolve(__dirname, 'build'),
  12         publicPath:'../',    
  13         filename: 'js/bundle.[chunkhash:8].js',
  14         chunkFilename:"js/[name].[chunkhash:8].js"
  15     },
  16     module:{
  17         loaders:[
  18             {//js、jsx
  19                 test: /.jsx?$/,
  20                 exclude:/node_modules/,//排除node_modules中的库文件，加快编译速度
  21                 loader: 'babel',
  22                 query:{
  23                     presets:['es2015', 'react']
  24                 }
  25             },            
  26             {//css
  27                 test: /.css$/,
  28                 loader: ExtractTextPlugin.extract("style", "css")//多个加载器通过!链接,可忽略加载器后缀“-loader”
  29             },            
  30             {//sass,还需要安装node-sass
  31                 test: /.scss$/,
  32                 loader: 'style!css!sass'
  33             },
  34             
  35             {//less,还需要安装less
  36                 test: /.less$/,
  37                 loader: 'style!css!less'
  38             },
  39             {//url-loader:图片、字体图标加载器，是对file-loader的上层封装,支持base64编码。传入的size（也有的写limit) 参数是告诉它图片如果不大于 25KB 的话要自动在它从属的 css 文件中转成 BASE64 字符串.
  40                 test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
  41                 loader: 'url?limit=25000&name=[name].[ext]'
  42             }
  43         ]
  44     },    
  45 };
  46 
  47 module.exports = config;

  

  上面是常用的loader。点此查看更多loader。补充一点编译sass文件除了需要安装sass-loader，还要安装node-sass。但安装node-sass时由于网络原因可能会提示下载SASS_BINARY二进制文件失败，解决办法：

  • 在https://github.com/sass/node-sass/releases/tag/v3.4.2，根据报错信息下载相应版本文件，假设放在E盘根目录下。
  • 回到命令行安装界面。设置SASS_BINARY_PATH环境变量 set SASS_BINARY_PATH=E:/win32-ia32-46_binding.node 文件名根据自己下载的文件自行修改。
  • 再次运行安装命令：npm install node-sass。
  • 在项目的文件夹的node_modules/node-sass文件夹下新建文件夹vendorwin32-ia32-46。
  • 将文件win32-ia32-46_binding.node改名为binding.node放在文件夹vendorwin32-ia32-46下
  • 

3.插件plugins

　　插件可以完成更多loader不能完成的任务。在webpack.config.js中增加config.plugins：

 1 var webpack = require("webpack");
 2 var path = require('path');
 3 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 4 var HtmlWebpackPlugin = require('html-webpack-plugin');
 5 
 6 var config = {
 7         //省略entry、output等
 8      plugins:[//给打包输出的文件加banner
 9         new webpack.BannerPlugin("The file is creted by yangmin.--" + new Date()),
10         new webpack.ProvidePlugin({
11         　　$: "webpack-zepto",             
12     　　}),
13     　　/*插件：单独使用style标签加载css文件*/
14     　　new ExtractTextPlugin("css/[name].css"),//设置其路径(路径相对于path)
15     　　/*插件：动态生成html，在webpack完成前端资源打包以后，自动将打包后的资源路径和版本号写入HTML中，达到自动化的效果。*/
16     　　new HtmlWebpackPlugin({
17         　　filename:'view/index-build.html',    //生成的html存放路径，相对于 path
18             template:'src/view/index.html',    //html模板路径
19             inject:true,    //允许插件修改哪些内容，包括head与body
20             hash:false,    //为静态资源生成hash值
21             minify:{    //压缩HTML文件
22                 removeComments:false,    //移除HTML中的注释
23                 collapseWhitespace:false    //删除空白符与换行符
24            }
25        })
26     ]
27 };
28    module.export = config;

六：vue-router原理

单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,

实现这一点主要是两种方式:

1.Hash: 通过改变hash值

2.History: 利用history对象新特性

而在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:

默认Hash–>如果浏览器支持History新特性改用History–>如果不在浏览器环境则使用abstract

选好mode后创建history对象(HashHistory或HTML5History或AbstractHistory)

可见最被青睐的是History模式，理由是: “#”太丑了。。。

 

基本方法分析:

Hash

1.push()

功能: 设置新的路由添加历史记录并更新视图,常用情况是直接点击切换视图

调用流程:

1 $router.push() //显式调用方法

2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）

3 History.transitionTo() //开始更新

4 History.updateRoute() //更新路由

5 {app._route= route}

6 vm.render() //更新视图

 

2.replace

功能: 替换当前路由并更新视图，常用情况是地址栏直接输入新地址

流程与push基本一致

但流程2变为替换当前hash （window.location.replace= XXX）不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

 

3.监听地址栏变化

在setupListeners中监听hash变化(window.onhashchange)并调用replace

 

History

1.push

与hash模式类似，只是将window.hash改为history.pushState

2.replace

与hash模式类似，只是将window.replace改为history.replaceState

3.监听地址变化

在HTML5History的构造函数中监听popState（window.onpopstate）

 

两种模式对比

History模式的优点:

1.History模式的地址栏更美观。。。

2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不同的html文件），而hash只能是同一文档

3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据

4.History模式的pushState、replaceState参数中的title能携带字符串数据（当然，部分浏览器，例如firefox不支持title，一般title设为null，不建议使用）

缺点:

对于单页面应用来说，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操作靠ajax完成，

而不会重新请求页面。

但当用户直接在用户栏输入地址时则会重新请求，当地址带有参数时两者情况不一样

Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，所以请求的仍然是 xxx.com,没有问题

History 例如: xxx.com/id=5 这时请求的便是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么做以后，服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。或者，如果是用 Node.js 作后台，可以使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。