Vue面试题
https://blog.csdn.net/qq_44182284/article/details/111191455
https://www.jianshu.com/p/85a4fcd3de98
https://juejin.cn/post/6961222829979697165
单页面应用****spa****（过）
-
在web页面加载完html，js，css后，由路由机制实现html页面内容变换
-
优点是用户体验好，页面不需要重新加载或者跳转，前后端分离
-
缺点：首次加载慢，页面前进后退路由管理，SEO 难度较大
什么是 MVVM？（练2）
-
MVVM 是是 Model-View-ViewModel 的缩写
-
Model 代表数据模型， 定义数据操作的业务逻辑
-
View 代表 UI 组件， 它负责将数据模型转化成 UI 展现出来
-
ViewModel 通过双向绑定把 View 和Model 进行同步交互，不需要手动操作 DOM 的一种设计思想
请说说双向绑定实现的原理？（练2）
-
vue实现双向数据绑定主要是通过数据劫持并结合（发布者-》订阅者）的方式
-
主要实现的方法是通过object.defineproperty()来劫持各个属性的setter，getter方法，在数据变动的时候发布消息给订阅者，触发相应的监听回调
为什么data是个函数并且返回一个对象呢？（过）
-
因为一个组件可能会多处调用，而每一次调用就会执行data函数并返回新的数据对象，
-
这样做可以避免多处调用组件间的数据污染
v-model的原理是什么（练2）
v-model本质就是一个语法糖，可以看成是value + input方法的语法糖。 可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性
（text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
）
v-show 和 v-if 指令的共同点和不同点。（过）
-
v-show是通过display来控制显示隐藏
-
v-if是操作dom元素来控制显示隐藏
-
如果需要非常频繁地切换，则使用 v-show 较好
computed 和 watch 的区别和运用的场景？（练2）
- computed 具有返回值，具有缓存，依赖其他属性进行计算返回，
使用场景：当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed
- watch的值必须先在data中定义，当值发生改变触发watch，然后进行逻辑处理，可以做异步操作，watch接收两个参数newvalu和oldvalue
使用场景：如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化
Vue生命周期（过）
-
创建前，可以在这加个 loading 事件，在加载实例时触发。
-
创建后，在这结束 loading 事件，异步请求也放在这里调用。
-
挂载前
-
挂载后，挂载元素，获取到 DOM 节点。
-
更新前
-
更新后，如果对数据统一处理，在这里写上相应函数
-
销毁前，可以做一个确认停止事件的确认框。
-
销毁后
-
activated keep-alive 专属，组件被激活时调用
-
deactivated keep-alive 专属，组件被销毁时调用
-
beforeCreate ，可以在这加个 loading 事件，在加载实例时触发。
-
created ，在这结束 loading 事件，异步请求也放在这里调用。
-
beforeMount
-
Mounted，挂载元素，获取到 DOM 节点。
-
beforeUpdate
-
updated ，如果对数据统一处理，在这里写上相应函数
-
beforeDestroy ，可以做一个确认停止事件的确认框。
-
destroyed
-
activated keep-alive 专属，组件被激活时调用
-
deactivated keep-alive 专属，组件被销毁时调用
第一次页面加载会触发哪几个钩子？（过） 第一次页面加载时会触发 创建前后，挂载前后 这几个钩子
DOM 渲染在****哪个周期中就已经完成？（过） DOM 渲染在 mounted 中就已经完成了。
深度监听怎么做（过）
watch 里面的deep属性设置为true
Vue 的父组件和子组件生命周期钩子函数执行顺序？（过）
Vue 父子组件生命周期钩子的执行顺序遵循：从外到内，再从内到外。
- 加载渲染过程
父更新前 -> 父更新后 -> 父挂载前 -> 子更新前 -> 子更新后 -> 子挂载前 -> 子挂载后 -> 父挂载后
- 子组件更新过程
父更新前 -> 子更新前 -> 子更新后 -> 父更新后
- 父组件更新过程
父更新前-> 父更新后
- 销毁过程
父销毁前-> 子销毁前 -> 子销毁后-> 父销毁后
Vue****组件间通信（练****2****）
-
v-model
-
listeners
-
vuex
-
$root（可以拿到根组件的属性和方法）
-
Props（常用）（子组件通过props接收父组件传递过来的数据）
-
provide/inject（父组件通过provide方法定义方法或者属性，子组件通过inject接收方法和属性）
-
Emit（子组件通过emit发送事件给父组件，父组件通过回调函数接收数据）
-
ref（父组件可以通过ref拿到子组件的属性和方法）
-
slot（子组件的数据通过插槽的方式传给父组件使用）
-
eventBus（通过Bus.
on监听事件）
-
parent（通过this.
parent获取父组件的方法和属性）
https://juejin.cn/post/6999687348120190983#heading-13
Vue****单向数据流
1. 单向数据流就是model的更新会触发view的更新，view的更新不会触发model的更新，它们的作用是单向的
Keep-alive****组件（过）
-
keep-alive 可以实现组件缓存，当组件切换时不会对当前组件进行卸
-
Keep-alive有3个属性，include，exclude ，max，代表匹配的组件会不会被缓存，还有缓存多少组件实例
-
keep-alive触发的生命周期有activated ，deactivated
Vue****检测对象或者数组的变化（练****1****）
-
vue可以监测数组变化的方法有七种 pop 、 push 、 shift 、 unshift 、 splice 、 sort 、 reverse
-
Vue 无法检测到对象属性的添加或删除，或者通过下标改变数组的值
-
我们可以使用Vue.set(object, key, value)来设置值的改变而被vue监听到
Vue****中****key****的作用（练****1****）
Keys 是是vue用于追踪列表中的元素被删除，添加，修改的辅助标识，可以避免元素不必要的重复渲染
NextTick****的原理使用场景（练****2****）
-
NextTick作用在下一次dom更新结束后执行他指定的回调
-
使用就是当数据改变后，要基于更新后的新dom进行一些操作的时候，可以把逻辑写在nexttick指定的回调函数中
-
比如在点击编辑的时候更改了数据的状态后需要对一个input框获取焦点，可以吧这一段逻辑写入nextTick中
Vuex
-
vuex是vue团队提供的一个状态管理工具，
-
vuex的使用场景多个组件共享数据或者是跨组件传递数据时
vuex****的****5****种属性（练****1****）
-
state：vuex的基本数据，用来存储变量
-
geeters：当state中的数据需要加工后再使用时，可以通过getters加工，和计算属性一样具有返回值
-
mutation：通过commit提交数据来变更state的值，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 ，回调函数接收一个state合集和commit过来的value
-
action：和mutation的功能大致相同，不一样的地方是1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。3.action是通过dispatch提交type和value来变更state
-
modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
Vuex****的流程是
Vue-router****的两种模式
-
路由模式有2种，hash和history模式
-
hash值不会带给服务器，#号后的内容就是hash值，hash值兼容性更好，我们开发中使用的就是hash值
-
history模式的url更简洁，兼容性没有hash模式好
Vue-router****有哪几种导航钩子和路由守卫
-
全局守卫（router.beforeEach，router.afterEach）
-
路由独享守卫（beforeEnter）
-
路由组件内的守卫（beforeRouteEnter，beforeRouteLeave ）
-
(to, from, next)
你都做过哪些****Vue****的性能优化
编码阶段
-
尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
-
v-if和v-for不能连用
-
如果需要使用v-for给每项元素绑定事件时使用事件代理
-
SPA 页面采用keep-alive缓存组件
-
在更多的情况下，使用v-if替代v-show
-
key保证唯一
-
使用路由懒加载、异步组件
-
防抖、节流
-
第三方模块按需导入
-
长列表滚动到可视区域动态加载
-
图片懒加载
SEO****优化
-
预渲染
-
服务端渲染SSR
打包优化
-
压缩代码
-
Tree Shaking/Scope Hoisting
-
使用cdn加载第三方模块
-
多线程打包happypack
-
splitChunks抽离公共文件
-
sourceMap优化
用户体验
-
骨架屏
-
PWA
Mixin****和****Mixins****的区别
Vue****动态组件
Vue****中局部作用域样式、
Vue3.0****双向绑定原理
v-if和v-for一起使用的弊端及解决办法
由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。
解决办法：
-
在v-for的外层或内层包裹一个元素来使用v-if
-
用computed处理
Vue的优点？Vue的缺点？
-
组件化，轻量级，虚拟dom，响应式，单页面路由，数据与视图分开
-
页面不利于seo，不支持IE8以下，首屏加载时间长
Vue跟React的异同点
相同点：
-
都使用了虚拟dom
-
组件化开发
-
都是单向数据流(父子组件之间，不建议子修改父传下来的数据)
-
都支持服务端渲染
不同点：
-
React的JSX，Vue的template
-
数据变化，React手动(setState)，Vue自动(初始化已响应式处理，Object.defineProperty)
-
React单向绑定，Vue双向绑定
-
React的Redux，Vue的Vuex
列表渲染中 key的作用
方便diff 算法快速找到变更的元素，然后进行相应的 DOM 更新
组件间的通信(基本是必问题)
父子组件：子组件通过 Props 接收父组件传入的值，如果父组件想拿到子组件的数据，可通过 $emit 一个事件，将数据当参数传递出去，然后父组件通过事件监听接收
兄弟组件：
-
通过找到共同的父级组件，然后通过 $emit 将数据传递到父级组件，都从父级组件取数据
-
Vuex全局数据共享
-
通过 Vue 全局事件总线，不过因为 vue 3 已经废弃了 this.
off 这些全局 API，所以在 vue3中已经无法使用全局事件总线了，可以通过方法 4 解决
-
使用第三方 PubSub 工具
Provide/Inject:只适用于父子级或者祖孙级或者更深层次嵌套中，父级组件向子级组件传值
$nextTick 的作用
Vue 2 中数组是无法实现响应式的，需要通过 $set 手动实现
自定义全局 API
通过给 Vue 原型绑定方法实现，不过同样的此方法不适用于 Vue3，在 Vue 3中通过给app实例config 配置全局属性
Vue2.x =è Vue.prototype.customMethod = function() {}
Vue3.x è app.config.globalProperties
Vue2Vue3不同点
自定义指令
网友评论