Vue面试题

基础

介绍一下vue？你觉得vue有什么特点？对比其他你使用的框架有什么区别？

1. 介绍：vue是渐进式的js框架，既可以把它当作第三方库来使用，也可以利用vue构建复杂的单页面项目。
2. 特点：

• 入门容易，只需要html,css,js就可以，如果是react还需要es6,jsx，函数编程
• 灵活：可以当作第三方库使用，也可以用来构架项目。
• 高效：虚拟DOM。
• 使用方便：指令，模板，数据双向绑定，和react相比，数据双向绑定可以自动修改，react需要手动执行setState。
• 组件化：和react项目vue的组件化更容易被新手接收html,css,js，而react都是通过js实现。

v-if 和v-show区别?

1. v-if是删除与创建，频繁切换消耗大
2. v-show是添加display：none；block；之间来回切换，消耗小，适合频繁切换
3. v-for优先于v-if

Vue作为MVVM框架,M、V、VM分别代表什么？

• Model View VM
• Model 是数据模型
• View 是视图
• VM 是 用来连接数据和视图

mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

答：一个model+view+viewModel框架，数据模型model，viewModel连接两个
区别：vue数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷

Model改变也会同步视图更新相关的依赖, 双向绑定就是vm起了作用

方法调用，computed，watch区别？

1.方法：页面数据每次重新渲染都会重新执行， 性能消耗大，除非不会希望有缓存的时候使用.
2.computed：是计算属性，依赖其他属性计算，并且computed的值有缓存，只有当计算值发生变化才会返回内容。
3.watch：监听到值的变化就会执行，在回调中可以进行一些逻辑操作。

总结：除非不希望缓存，一般不会用方法
一般需要依赖别的属性来动态获取值的时候可以使用computed
对于监听到值的变化需要做异步操作或开销较大的操作时候用watch

如何让css只在当前组件起作用？

将当前组件的style修改为style scoped

< style scoped>
< /style>

vue Loader是什么？

vue Loarder作用是将.vue文件解析成浏览器能识别的文件

vue中key是什么？作用？

key的作用主要是为了高效的更新虚拟DOM

声明周期

什么是生命周期？

生命周期就是从创建到销毁的过程

有哪些生命周期?

• beforeCreate 创建前
• created 创建后
• beforeMount 挂载前
• mounted 挂载后
• beforeUpdate 数据更新前
• updated 数据更新后
• beforeDestroy 销毁前
• destroyed 销毁后

这些有什么区别和意义？

• beforeCreate创建前，刚执行new的操作，其他什么也没做
• created创建后，属性和方法挂载到了实例上面
• beforeMount挂载前，找到了el或mount对应的节点范围，但是数据话没有替换，相当于在创建DOM树
• mounted挂载后，vue范围内的变量都会被替换成data里面的数据值
• beforeUpdate数据更新前
• updated数据更新后
• beforeDestroy销毁前
• destroyed销毁后

我们在项目中都是什么时候用到?

ajaxs获取数据的时候在created这个时候用到渲染页面

组件

组件中data为什么不用对象？

• 组件复用时所有组件实例都会共享data，如果data是对象，会造成一个组件修改其他调用该组件的值也会改变，此时写成一个函数每次调用都会返回一个新的数据
• new Vue() 里的方式是生成一个根组件，该组件不会复用的，也就不存在共享data情况

什么是组件？

任何一个页面我们都可以抽象成一个由组件构成的一个大的组件树，大到一个页面，小到一个按钮都可以是一个组件，一个页面就由很多组件的嵌套拼接组成，这就是组件化;

组件有什么好处?

• 复用性强
• 模块化开发
• 代码好管理
• 耦合度低

组件如何创建?

有三种组件：

1. 全局组件：

• Vue.component(‘组件名称‘，组件详情对象)

2. 局部组件：

• new Vue(
  components:{
  组件名称：组件详情的对象
  }
  ))

3. 单文件组件：
   .vue文件

组件通讯

1. 第一种：props、$emit

	1、父传子：props
	2、子传父：$emit自定义事件

2. 第二种: $ parent、$childern

	 1、this.$parent.parentMsg；获取父级内容
	 2、this.$children; 获取子组件内容

3. 第三种获取子集内容: ref

 	 // 多个子组件时根据子组件上的 ref 属性选择
	 <Child ref="c1">
	 <Child ref="c2">
	 this.$refs.c1.childMsg

父子组件传值?

一

1. 父传子: 父传值 v-bind=“msg”，props[]子接受

• 父组件 < son :fatherMsg=“msg” >，在父组件内的子组件上自定义指令绑定父组件的 msg
• 子组件 props[“fatherMsg”]，子组件通过props以数组形式接收,也可以对象形式这样写：
• props:{ fatherMsg: String }

//父组件：
<son :fatherMsg="msg">
//子组件：
{{ fatherMsg }}

<script>
props:["fatherMsg"]
//或
props:{
	fatherMsg: 数据类型
}
<script/>

2. 子传父：用 this.$emit(“自定义事件名称”，传递内容)

• 子组件通过 this.$emit(“事件名”，传递内容)传递内容
• 父组件 < Sub @事件名(同子组件传输的一样)=“自定义事件名” >,在自定义事件上接收并保存在data就可以使用了

//父组件：
//自定义事件名要和子组件传过来的定义一样
<son @childInput="getVal>

<script>
  methods: {
  //接收数据并保存在data
      getVal(msg) {
         this.msgVal = msg;
  	} 
  }
</script>

//子组件：this.$emit("自定义事件名"，传递内容)this.$emit(“childInput”, this.subcon);

兄弟组件传值？

通过一个中转(bus.js)

//bus.js内容
import Vue from "vue";
export default new Vue;

A兄弟传值：

• 通过import引入bus.js
• bus.$emit(“自定义事件名”，传递内容)
  B兄弟接收：
• 通过import引入bus

bus.$on("自定义事件名"(同传过来的一样),(data) =>{
	//data是传过来的数据进行接收
   }
)

封装组件？(未解决)

1. 创建组件.vue文件，内部写功能代码
2. Vue.componte(“自定义组件名”，创建的组件名)注册组件
3. 使用组件

路由

什么是路由？

路由：路由就是通过点击不同的按钮展示不同的页面或者组件的功能
原理：根据不同的路径地址，展示不同的页面，组件

vue-loader是什么？使用它的用途是什么？

1. vue-loader是：.vue文件的一个加载器 ，跟template，js，style转换成js模块。
2. 用途：js 可以写es6，style样式可以写scss或less ，template可以加jade等

keep-alive了解？

1. keep-alive是什么?
   内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM。

Vue.js $route 和 $router 的区别

• $route 是路由信息对象，包括 path ， params ， hash ， query ，fullPath ， matched ， name 等 路由信息参数。
• ⽽ $router 是路由实例对象包括了路由的跳转⽅法，钩⼦函数等

未分类

vue插件使用步骤？

下载----引入----使用

axios

axios是什么？怎么使用？描述使用它实现登录功能的流程？

1. 请求后台资源模块

2. npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

• 下载 npm install axios --seve
• 引入(main.js)内

 import axios from "axios"
 Vue.prototype.axios = axios

• 请求方式，以及传参

axios.get("/api/login?userName=xxx$userPwd=xxx")

axios.post("/api/login", {
	userName: xx,
	userPwd: xx
})

Vuex

Vuex是什么？

Vuex 是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据共享。

Vuex同一管理状态的优点?

1. 易于开发和维护：能在vuex中集中管理共享数据
2. 提高开发效率：能够高效的实现组件之间的数据共享
3. 实时保持数据与页面的同步：存储在vuex中的数据都是响应式的

什么样的数据适合存储到Vuex中？

一般情况下，只有组件之间共享的数据才有必要存储到vuex中，对于组件的私有数据，依旧存储在自己自身的data中即可

怎样使用Vuex？

1. 安装vuex依赖包
2. 用import导入vuex包，用Vue.use(Vuex)安装vuex
3. 创建store对象，new 一个Vuex.Store构造函数，提供一个存放全局共享数据的实例

const store = new Vuex.Store({
    //state中存放的就是全局共享数据
    state: { count: 0 }
})

4. 将store对象挂载到vue实例中

new Vue({
    el: "#app",
    render: h => h(app),
    reuter,
    //将创建的共享数据对象挂载到Vue实例中
    //所有的组件就可以直接从store中获取全局的数据了
    store
})

Vuex的核心概念？

1. State：State是存储共有数据

• 方式一：通过this.$store.state.count 获取数据,this可省略
• 方式二：从 vuex 导入 mapState 函数，将全局数据为当前组件的计算属性

2. Mutation：操作State内数据

• 方式一：通过this.$store.commit(“方法名”)操作mutation
• 方式二：从 vuex 导入 mapMutations函数，将指定的 mutations函数映射为当前组件的methods函数，直接this. 调用,不需要再this.$store.commit

3. Action：异步操作，不能直接操作State,只能通过调用Mutation操作

• Action内通过 context.commit()触发某个 mutation才行
• 组件内通过 dispatch函数专门是用来触发 action的：this.$store.dispatch(“定义的action方法名”)

4.Getter： 数据包装，数据处理

5.Module： 模块化(仓库细致化)

项目功能

1.重置表单？

绑定事件，通过element-ui中表单提供的的resetFields方法可以重置表单，this.$refs.(表单的ref).resetFields