Vue2⾯试题
⽂章⽬录
说⼀下Vue优缺点？
优：渐进式，组件化，轻量级，虚拟dom，响应式（渐进式的意思是想⽤哪些功能随你）
缺：单页⾯不利于seo，不⽀持IE8以下，⾸屏加载时间长
淘汰掉Jquery就是因为直接操作DOM繁琐、性能问题
Vue与React的异同点？
同：虚拟dom、组件化、单向数据流、⽀持服务端渲染
异：React使⽤JSX，Vue使⽤template；React⼿动(setState)，Vue⾃动(初始化已响应式）；React单向绑定，Vue双向绑定；React 的Redux，Vue的Vuex；fiber暂不熟悉
说⼀下MVVM是什么？和MVC的区别？
M是model模型、也就是数据；V是view视图；也就是DOM看到的页⾯；VM是他们的桥梁、也就是Vue实例、负责通知数据变化更新视图。
MVVM和MVC的区别也就是VM和C的区别；C是Controller控制器、需要⼿动控制数据在视图层的显⽰、VM则实现双向数据绑定。
我理解就是MVVM不⽤直接操作dom，是呀虚拟dom加快页⾯渲染速度
路由模式以及不同点？
hash模式：通过#号后⾯的内容的更改，触发hashchange事件、实现路由切换
history模式：通过pushState和replaceState切换url、触发popstate事件、实现路由切换
使⽤过哪些Vue的修饰符呢？使⽤过哪些Vue的内部指令呢？
列举⼏个常见的：.trim、.number、.prevent、.once、v-pre、v-cloak
v-text是更新元素的textContent、v-html是更新元素的innerHTML
v-model可以由哪两个指令代替？
:value ="message" @input ="message = $event.target.value"
v-if和v-show的区别和使⽤场景？
v-show 是控制元素的dispaly:none属性
如果需要⾮常频繁地切换，则使⽤ v-show 较好；如果在运⾏时条件很少改变，则使⽤ v-if 较好。
v-for和v-if的优先级？谁在外层？
当它们处于同⼀节点，v-for 的优先级⽐ v-if 更⾼，这意味着 v-if 将分别重复运⾏于每个 v-for 循环中。
所以⼀般把v-if写在外层
为什么data是个函数？
为了不让数据起冲突，data是函数，每次调⽤这个函数拿到的返回值互不影响
Vue2的双向数据绑定原理？
利⽤Object.defineProperty实现的、Vue在初始化数据的时候，会使⽤Object.defineProperty重新定义
给data中所有属性加getter/setter，当页⾯使⽤对应属性时，⾸先进⾏依赖收集（收集当前组件的watcher），如果属性发⽣变化会通知相关依赖进⾏更新操作（发布订阅 ）
Vue中数据代理？
通过vm对象来代理data对象中属性的操作（读/写）
好处：更加⽅便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性加到vm上
为每⼀个添加到vm上的属性，指定⼀个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性
组件之间的传值⽅式有哪些？
props、⾃定义事件（$emit、ref）、EventBus、发布订阅、本地存储、vuex、$parent与$children、（provide和inject暂不清楚怎么使⽤）
computed和watch的区别？
computed能做的事情，watch都能做，两个都能实现的时候优先使⽤computed
computed可以缓存，不能处理异步操作
watch可以处理异步操作
computed 多对⼀；watch ⼀对多
watch的属性：
deep: true, // 是否进⾏深度监听
immediate: true // 是否初始执⾏handler函数
谈⼀下key值的作⽤？说⼀下diff算法？
作为虚拟DOM的标识、让vue对⽐新旧节点时、更快更⾼效
diff算法：
1. 新旧虚拟dom如果到相同key
1. 若dom内容没变、直接使⽤之前真实dom
2. 如果变了、⽣成新真实dom替换之前的
2. 如果没有相同key
1. 直接⽣成真实dom
3. 最⼩⼒度是标签、同层节点对⽐…
key的选择：
如果不存在对数据的逆序操作（如果还有输⼊类节点、渲染也会出问题）、仅⽤于渲染列表展⽰可以选择index作为key、有数据唯⼀标识的时候、最好还是选择唯⼀标识
jquery框架面试题为什么⽤中括号操作数组，Vue不更新页⾯？
对象不更新：是因为Object.defineProperty没有对对象的新属性进⾏属性劫持，使⽤this.$set⽅法解决
数组不更新：是因为监测数组不像检测对象，没有getter和setter，应该使⽤push等⽅法来操作数组、这类⽅法已经被Vue所管理、不完全同于原⽣⽅法。(data中数组重写原型链，使⽤ push⽅法相当于使⽤了Vue⾃⼰的⽅法来更新视图)
Vue的⽣命周期？
4对⽣命周期、常⽤的是mounted和beforeDestory
``mounted发请求，初次渲染数据等；beforeDestory`⽤于清除定时器、清除消息发布等
beforeCreate和created之间、初始化数据：数据监测，数据代理
created和beforeMount之间、解析模板、⽣成虚拟DOM
beforeMount和mounted之间、将内存中虚拟DOM转为真实DOM
beforeUpdate和updated之间、⽣成新的虚拟DOM与旧的⽐较并完成model=>view的更新
Vue事件绑定原理说⼀下？
原⽣事件绑定是通过addEventListener绑定给真实元素的，组件事件绑定是通过Vue⾃定义的$on实现
的。
Vuex说⼀下？
State：放数据的地⽅、初始化数据
Getter：技术属性、相当于computed
Mutation：同步、唯⼀更改store中数据的⽅法
Action：异步提交Mutation
Moudule：store模块化
使⽤⽅法：
//第⼀种
import{mapState,mapAction}from'store'
...
methods:{
...mapAction([`xxx`])
},
computed:{
...mapState([`xxx`])
}
//第⼆种
this.$store.state.数据
this.$storemit(“mutation函数名，发送到mutation中的数据)
this.$store.dispatch(‘action中的函数名’，发送到action中的数据)
不需要响应式的数据应该怎么处理？
⽅法⼀：将数据定义在data之外
data(){
this.list1 ={ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
this.list2 ={ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
return{}
}
⽅法⼆：Object.freeze()
data(){
return{
list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
}
}
⽅法三：v-pre指令
⽗⼦组件⽣命周期顺序？
关键点： ⽗beforeMount -> ⼦beforeCreate
说说nextTick的⽤处？场景？
为节省性能、Vue先执⾏完当前函数回调再更新页⾯。要想等视图更新后再执⾏函数中某句代码；
this.$nextTick等更新视图后使⽤$ref才能拿到最新的值
Vue的SSR？
SSR就是服务端渲染、使⽤的是nuxt.js、基于nodejs serve服务环境开发，所有html代码在服务端渲染
SSR⾸次加载更快，有更好的⽤户体验，有更好的seo优化，因为爬⾍能看到整个页⾯的内容，如果是
vue项⽬，由于数据还要经过解析，这就造成爬⾍并不会等待你的数据加载完成，所以其实Vue项⽬的seo体验并不是很好
⼩知识点
可以通过this.$options.data().xxx来获取初始值
provide和inject是响应式的吗？
watch监听⼀个对象时，如何排除某些属性的监听？

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