vue 经典面试题

最新推荐文章于 2024-03-26 22:56:26 发布

三木,

最新推荐文章于 2024-03-26 22:56:26 发布

阅读量331

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_49712611/article/details/109287662

版权

vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue 经典面试题

##vue的核心
组件化数据驱动

##vue基本指令
v-if v-else v-for v-on v-show v-model v-html v-text key属性

##Vue的数据双向绑定原理 mvvm模式
是通过数据劫持和发布-订阅者功能来实现的
1.实现一个监听者Observer来劫持并监听所有的属性，一旦有属性发生变化就通知订阅者
2.实现一个订阅者watcher来接受属性变化的通知并执行相应的方法，从而更新视图
3.实现一个解析器compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相对应的订阅者

##使用key的好处
提高了页面的性能 key属性强制替换元素
key一般配合v-for使用并给每个虚拟dom增加了一个唯一的标识，且更加高效更新虚拟dom

##Vue生命周期
1.beforeCreate 实例还未创建
2.created 实例已经创建完成
3.beforeMount 在挂载开始之前
4.mounted 挂载到实例上去了
5.beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
6.updated 组件 DOM 已经更新
7.beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed Vue 实例完全销毁

##Vue过滤器
有全局过滤器和局部过滤就近原则

##v-if/v-show区别
v-if相当于删除dom元素
v-show相当于display none

##Vue 事件修饰符
.prevent //阻止默认事件发生
stop // 阻止事件继续传播即阻止它的捕获和冒泡过程
.self //当前元素自身时触发处理函数时才会触发函数
.once //只触发一次

##Vue动态calss和样式style
单纯数组
:class="[isActive,isSort]"
data() {
return{
isActive:'active',
isSort:'sort'
}
}
<style>
.isActive{
width:200px;
</style>

##Vue ref的作用
获取dom元素

##vue组件里面的data为什么是函数?
因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

##Vue闪烁问题{{msg}} v-cloak

##vue和jquery的区别
生命周期路由组件化

vue是一个框架
采用mvvm模型的viewModel层通过数据的双向绑定把view层和model层连接起来通过对数据的操作就可以完成对页面视图的渲染。
vue以它独特的优势简单、快速、组合、紧凑、强大而迅速崛起。

jquery是一个类库

##Vue定义全局组件
在使用Vue.extend配合Vue.component定义全局组件时，Vue.extend里面定义template模板，而Vue.component里面是要注册一个组件。

##Vue路由的匹配规则和跳转
实例化的时候，创建匹配器（createMatcher ），并生成路由的映射关系（获取路由映射关系 createRouteMap）。匹配器中包含 match 方法
push 的时候，调用到 match 方法
match 方法里面，从路由的映射关系里面，通过编译好的正则来判定是否匹配，返回最终匹配的路由对象
transitionTo 中，拿到匹配的路由对象，进行路由跳转
this.$router.push() router-link to

##Vue组件之间传参方式
父传子props 子传父$emit 广播传参（$emit传参 $on）兄弟传参(总线传参)eventbus vuex

##Vue监听props改变
watch computed
watch擅长处理的场景：一个数据影响多个数据
computed擅长处理的场景：一个数据受多个数据影响依赖缓存

##Vue keep-alive作用及两个参数
能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
避免反复渲染影响页面性能，同时也可以很大程度上减少接口请求，减小服务器压力。
能够进行路由组件缓存和组件缓存
include 值为字符串或者正则表达式匹配的组件name会被缓存。
exclude 值为字符串或正则表达式匹配的组件name不会被缓存。

##Vue插槽的作用 slot
占位符

##Vue route router routes 区别
router：路由器对象，包含一些操作路由的功能函数，来实现编程式导航。一般指的是在任何组件内访问路由。
如：路由编程式导航的$router.push()
routes：指创建vue-router路由实例的配置项。用来配置多个route路由对象
route：指路由对象表示当前激活的路由的状态信息。
如：this.$route指的是当前路由对象

##vue自定义指令
Vue.directive注册全局自定义指令

##Vue怎么定义 vue-router 的动态路由? 怎么获取传过来的值？
在path属性加上/:id。使用router对象的params.id。

##Vue css在当前组件内独享
在标签内加scoped

vuex的五大核心属性
state 状态数据 getters向外暴露的方法用于访问state
mutations 只有mutats修改才能够允许 actions异步提交mutations从而改变state状态 modules模块

路由模式hash & history
hash在刷新页面时候找不到对应页面不会跳转
history模式刷新找不到则会404 两个各有各的优缺点可根据他们的特点做不懂需求的开发

##Vue导航守卫路由独享组件守卫
router.afterEach/router.beforeEach((to,from,next)=>{}) 全局守卫 mian.js
beforeRouteLeave:/beforeRouteEnter:(to,from,next)=>{}组件内守卫
beforeEnter:(to,from,next)=>{}，路由独享的守卫

##Vuediff算法
比较两棵DOM树的差异是Virtual DOM算法最核心的部分.简单的说就是新旧虚拟dom 的比较，如果有差异就以新的为准，然后再插入的真实的dom中，重新渲染。

##MVVM分为Model、View、ViewMode三者。
Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作

##Vue内存泄漏解决方案
为每个select框设置单独的渲染数组，这样每次点击后就只会渲染对应select框，解决内存飙升的问题。
因为内存泄漏的问题是使用element-ui框架的select组件造成的，可使用原生的select框替代。

##nodejs应用场景
node.js特点：单线程高并发 i/o非堵塞事件驱动依赖于v8引擎
异步非阻塞I/O
应用场景：可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。

##Vue辅助函数怎么调用
...mapState ...调用