Vue面试题

    科技2022-07-13  134

    Vue面试题

    1.说下你常用的Vue指令?2.v-if和v-show的区别3.v-if和v-for4.Vue生命周期钩子函数5.vue常用的修饰符6.为何在大型项目中data需要使用return返回数据呢?7.computed、watch、methods的区别8.父子、兄弟组件通信9.vue如何获取dom。ref与$refs10.assets和static的区别?11.什么是vue-router?12.keep-alive13.单页面与多页面应用14.MVVM是什么?15.路由守卫16.v-on可以监听多个方法吗?17.为什么data需要使用return返回数据18.插槽slot19.Vuex

    1.说下你常用的Vue指令?

    v-bind:动态绑定数据v-on:绑定事件监听器v-for:循环指令,可以循环数组或对象v-model:实现双向绑定v-if:根据表达式的真假值,判断是否渲染元素,会销毁并重建v-show:显示隐藏元素,修改元素的display属性

    2.v-if和v-show的区别

    v-if 与v-show 最根本的区别就是 v-if是对DOM进行操作,是条件渲染属性,根据条件进行元素的渲染或者是销毁,而v-show,只是对元素的display的属性进行简单的控制。

    v-if 和 v-show 有个相同的地方就是都可以进行元素的显示与隐藏控制。但是v-if由于是对DOM的销毁渲染操作,所以有着更大的切换开销,而v-show有着更高的初始渲染开销。所以如果在需要频繁切换的场景下使用v-show会更好,在运行时条件很少改变的时候使用v-if比较好

    3.v-if和v-for

    因为v-for 具有比 v-if 更高的优先级,所以说 v-if 会分别重复运行在每个 v-for 循环中,如果每一次都需要遍历整个数组,将会影响速度,尤其是当之需要渲染很小一部分的时候。所以说更好的做法是先进行v-if,然后再使用v-for。

    4.Vue生命周期钩子函数

    一共分为8个阶段,创建前/后(beforeCreate/created), 载入前/后(mounted),更新前/后(upddated), 销毁前/销毁后(destroyed)。

    什么是vue生命周期? 答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

    vue生命周期的作用是什么? 答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

    vue生命周期总共有几个阶段? 答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

    DOM 渲染在 哪个周期中就已经完成? 答:DOM 渲染在 mounted 中就已经完成了。

    vue获取数据在哪个周期函数? 答:一般 created/beforeMount/mounted皆可, 如果要操作 DOM , 在mounted时候才能操作

    简述每个周期具体适合哪些场景

    beforeCreate: 在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。 在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

    create: data 和 methods都已经被初始化好了,可以最早调用 methods 中的方法,或者操作 data 中的数据,

    beforeMount: 执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的

    mounted: 执行到这个钩子的时候,就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点,最早可以在和这个阶段中进行

    beforeUpdate: 当执行这个钩子时,页面中的显示的数据还是旧的,data中的数据是更新后的, 页面还没有和最新的数据保持同步

    updated: 页面显示的数据和data中的数据已经保持同步了,都是最新的

    beforeDestory: Vue实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁

    destroyed: 这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

    5.vue常用的修饰符

    .stop:等同于 JavaScript 中的 event.stopPropagation() ,防止事件冒泡.prevent :等同于 JavaScript 中的 event.preventDefault(),防止执行预设- 的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播).capture :与事件冒泡的方向相反,事件捕获由外到内.self :只会触发自己范围内的事件,不包含子元素.once :只会触发一次

    6.为何在大型项目中data需要使用return返回数据呢?

    原因:让每一个子组件都拥有一个独立的数据存储这样每一个实例的data属性都是独立的,不会互相影响。

    不使用return包裹的数据会在项目的全局可见,会造成变量污染 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

    7.computed、watch、methods的区别

    computed要有返回值,支持缓存。 watch不支持缓存。用处:搜索框输入框的监听 ; 监听路由地址的改变 methods:不支持缓存。

    8.父子、兄弟组件通信

    父子组件通信 父组件向子组件传值使用props属性 子组件向父组件传值使用自定义方法通过$emit触发 父组件访问子组件$children(获取全部)、$refs(获取指定的) 子组件访问父组件$parent、$root(根组件) 兄弟组件通信

    事件总线 Vue.prototype.$bus = new Vue()Vuex

    9.vue如何获取dom。ref与$refs

    DOM的获取先给标签设置一个ref值,再通过this.$refs.domName获取。

    ref 用来给元素注册引用信息(或子组件),引用信息将会注册在自身组件上的 $refs 对象上(或父组件本身),使用 this.$refs引用。 如果在普通的 DOM元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例对象; 因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候不能访问,生命周期中至少要在mounted以及以后才能使用,$refs 也不是响应式的,不能做数据绑定。

    10.assets和static的区别?

    这两个都是用来存放项目中所使用的静态资源文件。 assets中的文件在运行npm run build的时候会打包,简单来说就是会被压缩体积,代码格式化之类的。打包之后也会放到static中。static中的文件则不会被打包。

    建议:将图片等未处理的文件放在assets中,打包减少体积。而对于第三方引入的一些资源文件如iconfont.css等可以放在static中,因为这些文件已经经过处理了。

    11.什么是vue-router?

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:

    嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式,在 IE9 中自动降级自定义的滚动条行为

    12.keep-alive

    keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。它拥有两个专属的声明周期钩子,activated和deactivated。activated当进入缓存页时执行,deactivated离开缓存页时执行。

    可以实现组件缓存,当组件切换时不会对当前组件进行卸载有include(可选,条件选择包含哪些组件)、exclude(可选,条件下面则排除哪些组件在外)两个属性,可以有条件的进行组件缓存。两个钩子函数activated/ deactivated,用来得知当前组件是否处于活跃状态keep-alive项目用处:页面跳转保留当前位置。keep-alive的好处:可以缓存组件,使组件不会被频繁的销毁重建,不会频繁的发送数据请求,提高性能。

    13.单页面与多页面应用

    单页面 页面切换靠JS动态渲染 优点: 页面切换快 良好的交互体验。 良好的前后端工作分离模式。 减轻服务器压力。 缺点:

    SEO难度较高。 前进、后退管理。 初次加载耗时多。

    多页面 每次切换页面,都会请求返回一个新的html文档 优点: 首屏时间快,SEO效果好 缺点:页面切换慢

    14.MVVM是什么?

    MVVM是Model-View-ViewModel缩写,是把MVC中的Controller演变成ViewModel,Model层代表数据模型,View代表视图UI,ViewModel是View和Model层的桥梁,数据会绑定到viewModel层并自动将数据渲染到页面中,视图变化的时候会通知viewModel层更新数据

    具体请看下面博客: https://blog.csdn.net/weixin_43352901/article/details/108137551

    15.路由守卫

    具体请看下面博客: https://blog.csdn.net/weixin_43352901/article/details/107640535

    16.v-on可以监听多个方法吗?

    <input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

    部分转载:https://blog.csdn.net/weixin_43352901/article/details/108210170

    17.为什么data需要使用return返回数据

    原因:让每一个子组件都拥有一个独立的数据存储,这样每一个实例的data属性都是独立的,不会互相影响。 如果不使用return包裹的数据会在项目的全局可见,会造成变量污染 使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

    18.插槽slot

    插槽就是子组件中的提供给父组件使用的一个占位符,用一对slot标签<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

    插槽分为默认插槽,具名插槽和作用域插槽

    默认插槽: 是父子组件都未指定插槽名称时,插槽默认匹配 具名插槽: 会根据指定插槽名称插入到特定位置 作用域插槽: 就是接收 prop 的具名插槽,简单来说就是子组件提供给父组件的数据,该数据仅限于插槽中使用,父组件可根据子组件传过来的插槽数据进行不同的方法展示和填充插槽内容 插槽详解点这里

    19.Vuex

    state 存放的是一些公用的数据 action 里是一些异步的方法 mutation 是同步的对数据修改的方法 getter 类似组件中的computed 计算state里的属性 然后调用。 moudle 可以把vuex分成不同的模块引用不同的数据仓库时分别调用,使代码具备更好的可维护性。

    Vuex使用过程: 首先,组件使用dispatch派发一个action this.$store.dispatch(‘changeCity’,city) changeCity定义在actions里的方法,city参数 然后actions调用commit方法调用mutations,触发一个mutations的方法 actions 内的方法有两个参数 ctx 是上下文可以调用commit方法 ,city为参数

    changeCity (ctx, city) { ctx.commit('changeCity', city) }

    最后mutations改变state里的数据 mutations有两个参数 一个state为数据仓库,city为参数

    changeCity (state, city) { state.city = city try { localStorage.city = city } catch (e) {} }

    this.$store.state.city可全局组件访问store里state的数据

    Processed: 0.012, SQL: 8