Vue理论1

Vue理论面试题整理一

Vue的核心是什么

Vue是一套构建用户界面的渐进式自低向上增量开发的MVVM框架，vue的核心只关心视图层

核心思想：

数据驱动( 视图的内容随着数据的改变而改变)

组件化（增加代码的复用性，可维护性，可测试性，提高开发效率，方便重复使用，体现出高内具体耦合）

请简述Vue的单向数据流

父级prop的更新会向下流动到子组件中,每次父组件发生更新，子组件所有的prop都会刷新为最新的值

数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数据

请说说 Vue 中常用的修饰符

事件修饰符

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

v-model的修饰符

.lazy 默认情况下，vmodel同步输入矿产的值和数据，可以通过这修饰符转变为在change事件再同步

.number 自动将用户的输入值转化为数值类型

.trim 自动过滤用户输入的首尾空格

键盘事件修饰符 @keyup.enter=”function”

v-on 可以绑定多个方法吗

可以如果绑定多个事件，可以同键值对的形式事件类型:事件名如果绑定是多个相同的事件，直接用逗号分隔

例：<el-button v-on="{mouseenter: onEnter,mouseleave: onLeave}">鼠标进来1</el-button>

Vuex 使用流程

下载vuex
在src下创建store以及 index.js
引入vue和vuex，使用vuex导出实例对象
在main.js中引入，在.vue中使用

Vuex 流程

在vue组件里面，通过dispatch来触发actions提交修改数据的操作，然后通过actions的commit触发mutations来修改数据，mutations接收到commit的请求，就会自动通过mutate来修改state，最后由store触发每一个调用它的组件的更新

Vue中路由跳转的方式（声明式、编程式）

用js方式进行跳转的叫编程式 this.$router.push()

用router-link进行跳转的叫声明式 router-view 路由模板展示的位置

Vue路由传参的两种方法，params 和 query 方式的区别

query用path引入，paramas用name引入接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name

例：

//params 传参
this.$router.push({
    name:'home', // 注意使用params时一定不能使用path 
})
//query 传参 
this.$router.push({
    path:'/home',
    query:{ username:this.username}
})

Vue 的生命周期请简述

beforeCreate（创建实例）
created（创建完成）
beforeMount（开始创建模板）
mounted（创建完成）
beforeUpdate（开始更新）
updated（更新完成）
beforeDestroy（开始销毁）
destroyed（销毁完成）
Vue生命周期的作用
给了用户在不同阶段添加自己的代码的机会

DOM 渲染在哪个生命周期阶段完成

DOM渲染在mounted周期就已经完成了

对vue中的 keepalive 的理解

概念：keep-alive 是vue的内置组件，当它动态包裹组件时，会缓存不活动组件实例

作用：在组件切换的过程中将状态保存在内存中，防止重复渲染DOM，减少加载时间提高用户体验

如何让组件中的css在当前组件生效

在style 中加上 scope

Vue中组件怎么传值

正向：父传子，父组件把要传递的数据绑定在属性上，发送子组件通过props接收

逆向：子传父，子组件通过this.$emit(自定义事件名，要发送的数据) 父组件设置一个监听事件来接收，然后拿到数据

兄弟：eventbus 中央事件总线 Vue.prototype.$bus

通过Vuex

Vue首屏加载慢的原因，怎么解决的，白屏时间怎么检测，怎么解决白屏问题

原因：第一次加载页面有很多组件的数据需要渲染

解决方法：

路由懒加载 component:() => import(‘路由地址’)
UI框架按需加载
gzip压缩

v-for 与 v-if 优先级

首先不要把v-if 与 v-for用在同一个元素上，原因：v-for 比 v-if 优先

如果每一次都需要遍历这个数组，将会影响速度

v-for 比 v-if 具有跟高的优先级

Vue组件中的data为什么是函数

Data 是一个函数时，每一个组价实例都自己的作用域，每个实例互相独立不会相互影响

如果是引用类型，当多个组件共用一个数据源时，一处数据改变，所有的组件数据都会改变，所有要利用函数通过return返回的对象的拷贝，让每个实例独有自己的作用域，相互不影响

Vue路由模式下 hash 和 history 有什么区别，简单说一下

hash是vue开发中的默认模式，地址栏url携带 #

原理是通过onhashchange()事件监听路由hash的变化 hash对应的url会被浏览器记录下来

history原理利用H5中history提供 pushState，replaceState 这两个 API

由于是HTML5新增API所以在低版本有兼容性问题，