1. 首页
  2. 前端大牛

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。

原创文章,作者:FlyingFish,如若转载,请注明出处:https://www.pmtemple.com/flyingfish/1038/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

185-1614-2515

在线咨询:点击这里给我发消息

邮件:admin@pmtemple.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code