VUE面试题系列02，前端面试题

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

一、格式的区别

1）、params

传

声明式：
<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>
编程式：
$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.参数名

二、使用场景的区别：

1、params：在传递一个参数时使用，如果参数多的话，地址栏上不利于阅读

2、query：在传递多个参数时使用，地址栏比params好阅读

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被修改后，会响应式到组件上。

4、辅助函数

现在的面试，都会问的比较多。而且在项目中大部分都会使用辅助函数来简化项目中