加载第一个html后传参加载第二个,完美起航-VUE面试题系列02，前端面试题

16、动态路由传参2种方式params与query

1)、params

传

声明式：

User

编程式：

$router.push({ name: 'user', params: { id: '123' }})

接

//模板里的写法：

$route.params.参数名

//脚本里的写法:

this.$route.params.参数名

动态路由匹配也行。

1)、路由配置：{ path: '/user/:id', component: User }

2)、传参：

//声明式 用户01001的信息 //编程式 $router.push("/user/01001");

3)、接值：

//模板里的写法： $route.params.参数名

//脚本里的写法: this.$route.params.参数名

2)、query

传：

// 带查询参数，变成 /register?plan=private

$router.push({ path: '/register', query: { plan: 'private' }})

注意：如果提供了 path，那么params 会被忽略

接：

//模板里的写法：

$route.query.参数名

//脚本里的写法:

this.$route.query.参数名

17、vue实例和vue组件写法的区别

1、 data是个函数(面试题) 一个组件的 data 选项必须是一个函数,且要有返回object，只有这样，每个实例(vue组件对象)就可以维护一份被返回对象的独立的拷贝，否则组件复用时，数据相互影响,也就是说，组件的作用域是独立的。 2、组件模板(html代码)只能有一个根标签 3、组件名不可和html官方的标签名同名 4、组件没有el选项，只有根实例存在el 5、书写：组件名如果驼峰，那么使用时，用短横线(羊肉串的写法)

18、谈谈你对vueX的理解

1、vueX是干什么的

vuex能够保存全局数据，供整个应用使用，可以在组件之间传递数据。

vuex保存的数据是响应式的

vuex保存的数据可以跟踪状态的变化

2、vueX的核心概念

state : 数据仓库 ，存储所有的 共享数据 ，相当于vue组件里的data getter ： 在state的基础上 派生的数据， 相当于vue组件里 computed mutation：修改state的数据时，用mutation，这与跟踪状态 有关系 action：解决mutation里只能有同步代码的问题，action里可以有异步代码

3、vueX的数据流

组件里 dispatch(派发)vueX中的 action，action里commit(提交)mutation，mutation里修改state。state被修改后，会响应式到组件上。

19、vue路由懒加载

vue的SPA(Single Page Application)应用里，当(webpack)打包构建时，会把所有的js打在一起，JavaScript 包会变得非常大，并在第一次请求时全部下载完毕，影响页面加载(性能)。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

目前有三种方式实现路由组件的懒加载，分别是：

vue异步组件

es 的 import()

webpack的require.ensure()

1)、 vue异步组件

把路由配置，进行修改

{

​

path: '/shopcar',

​

name: 'shopcar',

​

component: resolve => require(['@/pages/ShopCar'],resolve)

​

},

1)、运行是打开chrome的network，就会看到进入路由 /shopcar 时，会多出另外 一个js文件。一般是0.js或者1.js

2)、用npm run build打包时，wepback就会多打了一个 js文件(如：0.b5a82d6947b2e30edcc8.js)，这个js文件就是把ShopCar文件进行了单独打包。同样的在network里，就会看到进入路由 /shopcar 时，多出一个单独的js文件的请求

注：这种方式，webpack会把每个异步组件单独打成一个js文件。

2)、es的import()

主要是把原来的引入方式进行修改 ，路由配置就不用改了：

1、不指定webpackChunkName，每个组件单独打一个js文件

原来是：import ShopCar from '@/pages/ShopCar'

修改后：const ShopCar = () => import('@/pages/ShopCar');

修改后的做法是定义了一个函数，由于函数不调用不执行，所有，一开始时，并不会引入该组件，只有路由跳转时才会调用该函数。

2、指定webpackChunkName，相同的webpackChunkName就会打在同一个js文件里

1)、以下两个组件的webpackChunkName相同，所以，打在一个js文件里

const ShopCar = () => import(/* webpackChunkName: 'demot' */ '@/pages/ShopCar');

​

const GoodsDetailPage = () => import(/* webpackChunkName: 'demot' */ '@/pages/GoodsDetailPage');

2)、下面这个组件的webpackChunkName和上面两个不一样，所以，单独打在一个js文件里

const Login = () => import(/* webpackChunkName: 'demoty' */ '@/pages/Login');

3)、webpack的require.ensure()

这种方式，只改路由配置即可。

如：

{

​

path: '/GoodsDetailPage',

​

name: 'GoodsDetailPage',

​

component: r => require.ensure([], () => r(require('@/pages/GoodsDetailPage')), 'demot')

​

},

​

{

​

path: '/Login',

​

name: 'Login',

​

component: r => require.ensure([], () => r(require('@/pages/Login')), 'demot')

​

},

​

{

​

path: '/shopcar',

​

name: 'shopcar',

component: r => require.ensure([], () => r(require('@/pages/ShopCar')), 'demoty')

​

},

以上代码中，我把Login和GoodsDetailPage使用了相同的chunkName

20、MV*(MVC，MVP，MVVM)

答：

这是项目的架构模式。优点：耦合度低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理。

1、MVC是从后端演变后的项目架构模式。

M：model，模型，主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型(重点)。 V：view，视图，主要负责数据的显示 C：controller，控制器，主要负责每个业务的核心流程，在项目中体现在路由以及中间件上。

2、MVP

MVP是由MVC演变过来的。

P：Presenter 代替里C。

在MVP中View并不直接使用Model，而在MVC中View可以绕过Controller从直接Model中读取数据。

3、MVVM

MVVM是Model-View-ViewModel的缩写，MVVM模式把Presenter改名为ViewModel，基本与MVP模式相似。 唯一区别是：MVVM采用数据双向绑定的方式

在做vue的开发时，程序员写的代码和vue框架本身合起来是属于MVVM模式。

21、你了解Vue.js吗？

这种题，一般是比较难以回答的，问得很模糊，

如果不想多说，那就直接回答：了解并做过五个项目。

如果想回答详细的话，参考思路如下：

1)、vueJS是基于MVVM的JS框架

2)、有(常见的)13个指令：

3)、有(常见的)8个配置项：el，data，computed，watch，components，filter，directives，mixins

4)、vue实例生命周期分为四个阶段，八个生命周期函数

5)、vue做项目时会用到的全家桶技术：vueJS框架，vueX，vue-router，aixos，vant组件库等等

6)、我用vue框架一共做过五个项目。

………………………………

22、vue-router的两种路由模式的区别

路由模式分为两种：hash和history；通过设置vueRouter对象的mode属性来完成修改。

区别：

1)、外观上

hash模式时，路径上有#。

history模式时，路径上没有#。

2)、原理上

hash模式通过修改location.href来完成

使用锚点连接的思路，使用hash模式不会给后端发请求。当然，在hash值变化时，会同时触发window对象的onhashchange事件，并可以通过事件对象的oldURL属性和newURL属性 得到新旧URL。