vue⾯试题
vue⾯试题
1、vue优点
轻量级速度快简单易学低耦合可重⽤性独⽴开发⽂档齐全，且⽂档为中⽂⽂档
2、vue⽗⼦组件传递数据
props$emit
3、v-show和v-if指令的共同点和不同点
共同点：都是动态显⽰ DOM 元素区别点：v-if 是动态的向 DOM 树内添加或者删除 DOM 元素v-show 是通过设置 DOM 元素的 display 样式属性控制显隐v-if 切换有⼀个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和⼦组件v-show 只是简单的基于 css 切换性能消耗v-if 有更⾼的切换消耗v-show 有更⾼的初始渲染消耗使⽤场景v-if 适合运营条件不⼤可能改变v-show 适合频繁切换
4、如何让CSS只在当前组件中起作⽤
scoped
5、的作⽤是什么
主要是⽤于需要频繁切换的组件时进⾏缓存，不需要重新渲染页⾯
6、如何获取dom
给dom元素加ref=‘refname’，然后通过this.$fname进⾏获取dom元素
7、说出⼏种vue当中的指令和它的⽤法
v-model
v-on
v-html
v-text
v-once
v-if
v-show
8、vue-loader是什么？它的⽤途是什么？
vue⽂件的⼀个加载器，将template/js/style转换为js模块
⽤途:js可以写es6、style样式
9、为什么⽤key
给每个dom元素加上key作为唯⼀标识，diff算法可以正确的识别这个节点，使页⾯渲染更加迅速。
10、v-on可以监听多个⽅法吗？
可以，⽐如 v-on=“onclick,onblur”
11、$nextTick的使⽤
在data()中的修改后，页⾯中⽆法获取data修改后的数据，使⽤$nextTick时，当data中的数据修改后，可以实时的渲染页⾯
12、vue组件中data为什么必须是⼀个函数？
因为javaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
组件中的data写成⼀个函数，数据以函数返回值的形式定义，这样每次复⽤组件的时候，都会返回⼀份新的data，相当于每个组件实例都有
⾃⼰私有的数据空间，他们只负责各⾃维护数据，不会造成混乱。⽽单纯的写成对象形式，就是所有组件实例共⽤了⼀个data，这样改⼀个全部都会修改。
13、vue在双向数据绑定是如何实现的？
vue双向数据绑定是通过数据劫持、组合、发布订阅模式的⽅式来实现的，也就是说数据和视图同步，数据发⽣变化，视图跟着变化，视图变化，数据也随之发⽣改变
核⼼：关于vue双向数据绑定，其核⼼是Object.defineProperty()⽅法 vue2.0
14、单页⾯应⽤和多页⾯应⽤区别及缺点
单页⾯应⽤（SPA），通俗的说就是指只有⼀个主页⾯的应⽤，浏览器⼀开始就加载所有的js、html、
css。所有的页⾯内容都包含在这个主页⾯中。但在写的时候，还是分开写，然后再加护的时候有路由程序动态载⼊，单页⾯的页⾯跳转，仅刷新局部资源。多⽤于pc端。
多页⾯（MPA），就是⼀个应⽤中有多个页⾯，页⾯跳转时是整页刷新
单页⾯的优点：⽤户体验好，快，内容的改变不需要重新加载整个页⾯，基于这⼀点spa对服务器压⼒较⼩；前后端分离，页⾯效果会⽐较酷炫
单页⾯缺点：不利于seo；导航不可⽤，如果⼀定要导航需要⾃⾏实现前进、后退。初次加载时耗时多；页⾯复杂度提⾼很多。
15、Vue 项⽬中为什么要在列表组件中写 key，其作⽤是什么？
key是给每⼀个vnode的唯⼀id，可以依靠key，更准确, 更快的拿到oldVnode中对应的vnode节点。
更准确因为带key就不是就地复⽤了，在sameNode函数 a.key === b.key对⽐中可以避免就地复⽤的情况。所以会更加准确。更快利⽤key的唯⼀性⽣成map对象来获取对应节点，⽐遍历⽅式更快。
16、⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？
加载渲染过程⽗ beforeCreate -> ⽗ created -> ⽗ beforeMount -> ⼦ beforeCreate -> ⼦ created -> ⼦ beforeMount -> ⼦ mounted -> ⽗mounted
⼦组件更新过程⽗ beforeUpdate -> ⼦ beforeUpdate -> ⼦ updated -> ⽗ updated
⽗组件更新过程⽗ beforeUpdate -> ⽗ updated
销毁过程⽗ beforeDestroy -> ⼦ beforeDestroy -> ⼦ destroyed -> ⽗ destroyed
17、谈⼀谈你对 nextTick 的理解？
当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，你需要使⽤$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功。
18、vue更新数组时触发视图更新的⽅法
push()；pop()；shift()；unshift()；splice()；sort()；reverse()
19、什么是 vue ⽣命周期？有什么作⽤？
每个 Vue 实例在被创建时都要经过⼀系列的初始化过程——例如，需要设置数据监听、编译模板、将
实例挂载到 DOM 并在数据变化时更新DOM 等。同时在这个过程中也会运⾏⼀些叫做⽣命周期钩⼦的函数，这给了⽤户在不同阶段添加⾃⼰的代码的机会。
20、第⼀次页⾯加载会触发哪⼏个钩⼦？
onblur和blur的区别beforeCreate， created， beforeMount， mounted
21、vue获取数据在⼀般在哪个周期函数
createdbeforeMountmounted
22、created和mounted的区别
created：在模板渲染成html前调⽤，即通常初始化某些属性值，然后再渲染成视图。 mounted：在模板渲染成html后调⽤，通常是初始化页⾯完成后，再对html的dom节点进⾏⼀些需要的操作。
23、vue⽣命周期的理解
总共分为8个阶段创建前/后，载⼊前/后，更新前/后，销毁前/后。创建前/后：在beforeCreated阶段，vue实例的挂载元素el还没有。载⼊前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，ssage还未替换。在mounted阶
段，vue实例挂载完成，ssage成功渲染。更新前/后：当data变化时，会触发beforeUpdate和updated⽅法。销毁前/后：在执⾏destroy⽅法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。24、vuex是什么？vuex有哪⼏种属性？
vuex是vue框架中状态管理。有五种，State、 Getter、Mutation 、Action、 Modulestate：基本数据(数据源存放地)getters：从基本数据派⽣出来的数据mutations ：提交更改数据的⽅法，同步！actions ：像⼀个装饰器，包裹mutations，使之可以异步。modules ：模块化Vuex
25、v-for 与 v-if 的优先级?
v-for 和 v-if 同时使⽤，有⼀个先后运⾏的优先级，v-for ⽐ v-if 优先级更⾼，这就说明在 v-for 每次的循环赋值中每⼀次调⽤ v-if 的判断，所以不推荐 v-if 和 v-for 在同⼀个标签中同时使⽤。
26、vue 事件中如何使⽤ event 对象?
获取事件对象，⽅法参数传递。注意在事件中要使⽤符号<button @click="Event($event)">事件对象</button>
27、组件传值⽅式有哪些
⽗传⼦：⼦组件通过props[‘xx’] 来接收⽗组件传递的属性 xx 的值⼦传⽗：⼦组件通过 this.$emit(‘fnName’,value) 来传递,⽗组件通过接收fnName 事件⽅法来接收回调其他⽅式：通过创建⼀个bus，进⾏传值使⽤Vuex
28、vue 中⼦组件调⽤⽗组件的⽅法?
直接在⼦组件中通过 this.parent.event来调⽤⽗组件的⽅法，在⼦组件⾥⾯⽤emit()向⽗组件触发⼀个事件，⽗组件监听这个事件就⾏了。⽗组件把⽅法传⼊⼦组件中，在⼦组件⾥直接调⽤这个⽅法。
29、vue路由声明式导航router-link跳转
不带参数：
注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都⾏, 建议⽤name
带参数：
<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">
<router-link :to="/home/:id">
传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>
30、Computed和Watch的区别
computed 计算属性 : 依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发⽣改变，下⼀次获取 computed 的值时才会重新计算computed 的值。
watch 侦听器 : 更多的是观察的作⽤,⽆缓存性，类似于某些数据的监听回调，每当监听的数据变化时都会执⾏回调进⾏后续操作。
运⽤场景：
当我们需要进⾏数值计算，并且依赖于其它数据时，应该使⽤ computed，因为可以利⽤ computed的
缓存特性，避免每次获取值时，都要重新计算。当我们需要在数据变化时执⾏异步或开销较⼤的操作时，应该使⽤ watch，使⽤ watch 选项允许我们执⾏异步操作 ( 访问⼀个 API )，限制我们执⾏该操作的频率, 并在我们得到最终结果前，设置中间状态。这些都是计算属性⽆法做到的。
多个因素影响⼀个显⽰，⽤Computed；⼀个因素的变化影响多个其他因素、显⽰，⽤Watch;Computed 和 Methods 的区别
computed: 计算属性是基于它们的依赖进⾏缓存的，只有在它的相关依赖发⽣改变时才会重新求值对于 method ，只要发⽣重新渲染，method 调⽤总会执⾏该函数
31、如何解决数据层级结构太深的问题
在开发业务时，经常会岀现异步获取数据的情况，有时数据层次⽐较深，如以下代码: span 'v-text="d">, 可以使⽤vm.⼿动定义⼀层数据s et("demo"，d)
32、vue常⽤指
v-model 多⽤于表单元素实现双向数据绑定（同angular中的ng-model）v-bind 动态绑定作⽤：及时对页⾯的数据进⾏更改v-on:click 给标签绑定函数，可以缩写为@，例如绑定⼀个点击函数函数必须写在methods⾥⾯v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或
json(同angular中的ng-repeat)v-show 显⽰内容（同angular中的ng-show）v-hide 隐藏内容（同angular中的ng-hide）v-if 显⽰与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false）v-else-if 必须和v-if连⽤v-else 必须和v-if连⽤不能单独使⽤否则报错模板编译错误v-text 解析⽂本v-html 解析html标签v-bind:class 三种绑定⽅法对象型 ‘{red:isred}’三元型 ‘isred?“red”:“blue”’数组型 ‘[{red:“isred”},
{blue:“isblue”}]’v-once 进⼊页⾯时只渲染⼀次不在进⾏渲染v-cloak 防⽌闪烁v-pre 把标签内部的元素原位输出
33、route和router的区别
$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。$router是“路由实例”对象包括了路由的跳转⽅法，钩⼦函数等
34、怎样理解 Vue 的单项数据流
数据总是从⽗组件传到⼦组件，⼦组件没有权利修改⽗组件传过来的数据，只能请求⽗组件对原始数据进⾏修改。这样会防⽌从⼦组件意外改变⽗组件的状态，从⽽导致你的应⽤的数据流向难以理解。注意：在⼦组件直接⽤ v-model 绑定⽗组件传过来的 props 这样是不规范的写法，开发环境会报警告。
如果实在要改变⽗组件的 props 值可以再data⾥⾯定义⼀个变量，并⽤ prop 的值初始化它，之后⽤$emit 通知⽗组件去修改。
35、Vuex 页⾯刷新数据丢失怎么解决？
需要做 vuex 数据持久化，⼀般使⽤本地储存的⽅案来保存数据，可以⾃⼰设计存储⽅案，也可以使⽤第三⽅插件。推荐使⽤ vuex-persist (脯⾁赛斯特)插件，它是为 Vuex 持久化储存⽽⽣的⼀个插件。不需要你⼿动存取 storage，⽽是直接将状态保存⾄ cookie 或者localStorage中。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。