vue 相关的面试题
1.对MVVM的理解
MVVM事 model-view-viewModel 的缩写
model：表示数据，也可以在model中定义数据修改和操作的业务逻辑
view：代表UI组件，她复杂讲数据模型转化成UI展示出来
viewModel：监听模型数据的改变和控制视图行为，处理用户交互，简单理解就是一个同步view 和model的对象，连接model和view
在MVVM框架下，view和model之间并没有直接的联系，而是通过viewModel进行交互，model和viewmodel之间的交互式相互，是双向的，因此view数据的变化也会同步到model中，而model数据的变化也会立即反应到view中
viewModel 通过双向数据绑定吧view层和model层连接起来，而view 和model 之间的同步工作完全是自动的，无需认为干涉，因此开发中只需要关注业务逻辑，不需要手动操作DOM。
2.vue双向数据绑定的原理
vue实现数据双向绑定的主要是 采用 数据劫持结合发布者-订阅模式的方式
通过 Object.defineProperty() 来劫持各个属性的setter，getter，在数据变动时候发布消息给订阅者，触发相应监听回调。
vue的数据双向绑定 讲MVVM作为数据绑定的入口，整合Observer ，Compile 和Watcher 三者
通过Observer来监听自己model的数据变化
通过Compile来解析编译模版指令（vue中用来解析{{}}）
最后利用watcher搭起observer和compile之间的通信桥梁，达到数据变化 ====》 视图更新，视图变化 === 》数据model变更的双向绑定效果
3.vue组件之间的参数传递
父组件 传递数据给 子组件
即父组件通过属性的方式向子组件传值
子组件通过props来接收
子组件 传递数据给 父组件 (通过$emit )
在父组件中 定义绑定 handleChange 事件
子组件绑定一个事件，通过this.$emit() 来触发父组件中绑定的handleChange 事件
子组件 传递数据给 父组件 (通过回调函数)
先在父组件中定义一个callback函数，并把callback函数传递给子组件
在子组件中接收，并执行callback 函数，把需要传递的数据当成callback的实参传递
子组件 传递数据给 父组件（通过
$parent/$children或者$ref访问组件实例）通过$ref 来访问子组件
通过$children来调用子组件的方法
非父子组件之间的数据传递（兄弟组件传值）
可以通过 eventBus，就是创建一个事件中心，相当于中转站，可以用它来接收传递事件和接收事件
vuex 状态管理
4.v-if 和 v-show的区别
v-show 是css display 属性的切换，而v-if是完整的销毁和重新创建
当频繁切换的时候 使用 v-show，运用较少的时候 使用v-if
5.什么是生命周期
vue的实例 从创建到 销毁的过程 就是生命周期，或者说从开始创建，初始化数据，编译模版，挂载DOM==》渲染，更新==〉渲染，销毁等一系列过程 称之为生命周期
6.生命周期有什么作用
它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程中时更容易形成好的逻辑
7.vue的生命周期总共有几个阶段
有8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后
8.第一次页面加载会触发哪几个钩子？
会触发 beforeCreate,creates,beforeMount.mounted
DOM渲染在 mounted 中就已经完成了
9.计算属性computed 和监听watch的区别
计算属性：是自动监听依赖值的变化，从而动态返回内容
监听：是一个过程，在监听的值 发生改变的时候，可以触发一个回调，并做一些事情
computed 和 watch 的区别：
缓存：
computed 支持缓存，只有依赖数据发生改变，才会重新计算
watch不支持缓存，数据变化，直接回触发相应的操作
同步 异步
computed 不支持异步，当computed 内有一步操作时无效，无法监听数据的变化
watch支持一步操作
computed 属性值会默认走缓存，计算属性是基于它们的响应式以来进行缓存的，也就是基于data中声明过 或者父组件传递的prop中的数据通过计算得到的值
数据定义的位置
computed 的数据不可以定义在data 里面
watch 的数据一定要定义在data中
用法区别
只是需要动态值 那么就使用计算属性
如果需要知道值的变化之后执行业务逻辑，就使用watch
10.computed特性
是计算属性
应用：就是简化template 里面的{{}} 计算和处理 props 或者$emit 的传值
具有缓存性，页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必在此执行函数
11.watch的特性
是观察的动作
应用：监听props $emit 或者本组件的值 执行异步操作
无缓存性，页面重新渲染时不变化也会执行
12.computed 动态计算的工作流程
data 属性初始化 getter setter
computed 计算属性初始化，提供的函数将用作属性，vm.reversedMessage 的getter
当首次获取 reversedMessage 计算属性的值时，Dep 开始以来收集
在执行message getter方法时，如果Dep 处于以来收集状态，则判定message为revserdMessage 的依赖，并建立依赖关系
当 message 发生变化时，根据依赖关系，触发reversedMessage 的重新计算
13.vue路由的实现：hash模式 和 history 模式
hash模式：在浏览器中 #以及#之后字符称之为 hash
history模式：
14.组件中data为什么时一个函数
因为组件时用来复用的，js里对象时引用关系，data为一个函数 然后return一个对象，这样作用域就没有隔离
而new Vue 的实例，是不会被复用的，因此不存在引用对象的问题
15.说说vue中的动态组件
多个组件通过同一个挂载点进行组件的切换，this的值是哪个组件的名称，那么页面就显示哪个组件
16.递归组件的用法
组件是可以在它们自己的模版中调用自身的，不过它们只能通过name 选项来做
既然是递归，那么一定要有结束递归的条件，否则就会使用组件循环引用，最终出现栈溢出
可以使用v-if="false" 作为递归组件的结束条件，当遇到v-if为false的时候，组件将不会在进行渲染
17.keep-alive 内置组件的作用
可以在被keep-avlie包裹的组件不经历 创建和销毁，而是直接进入缓存
凡事被keep-avlie包裹的组件，除了第一次以外，都不会经历创建和销毁
18.keep-avlie的生命周期
created===》mounted===〉activated===》deactivated
再次进入 只触发 activated
19.vuex 页面刷新数据丢失怎么解决
需要做vuex数据的持久化，一般使用本地储存的方案保存数据
可以使用vuex-persist 插件
20.使用过ssr吗？说说ssr
ssr 也就是服务器渲染，也就是将在客户端把标签渲染成html的工作放在服务端，然后服务端渲染成html结构 直接返回给客户端
优点：
ssr 有着更好的seo
ssr 首屏加载速度更快
缺点：
开发条件会受到限制，服务端渲染只支持 beforeCreate 和 create两个钩子
服务器会有更大的负载需求
21.vue 中使用了哪些设计模式？
工厂模式：传入参数即可创建实例
单例模式：整个程序有且只有一个实例
vuex 和 vue-router的插件注册方法 install 判断，如果系统有存在的实例就直接返回掉
发布-订阅者模式：vue事件机制
观察者模式：响应式数据原理
装饰器模式：@装饰器的用法
策略模式：策略模式 指对象有某个行为，但是在不同的场景中，该行为有不同的实现方案
22.都做过哪些 vue的性能优化
对象层级不要过深
不需要响应式的数据不要放在data中，可以使用object.freeze() 冻结数据
v-if 和 v-show 区分场景使用
computed 和watch 分场景使用
v-for 遍历必须加 key key最好时数据的id值，且避免和v-if 一起使用
大数据列表和表格性能优化，虚拟列表/虚拟表格
防止内部泄漏，组件销毁后吧全局变量和事件销毁
图片懒加载
路由懒加载
第三方插件按需加载
适当采用keep-alive
防抖，节流的运用
服务器渲染
23.nextTick 使用场景和原理
nextTick 中的回调函数就是在下次DOM 更新循环结束之后执行的延迟回调
在修改数据之后立即使用这个方法，获取更新后的DOM
主要思路就是采用微任务优先的方式调用 一步方法去执行nextTick 包装方法
24.什么时候需要使用nextTick
vue生命周期的create() 钩子函数进行的DOM 操作一定要放在vue.nextTick() 的回调函数中
在create() 钩子函数执行额时候进行DOM，其实并为进行然和渲染，而此时进行DOM操作无异于徒劳，所以在create函数中操作DOM，一定要将代码放入vue.nextTick() 中
改变DOM元素的数据后，基于新的DOM 做点什么，对新的DOM 一系列的js操作都需要放进vue.nextTick() 回调函数中
在使用某个第三插件时，希望在vue生成DOM动态发生变化时重新应用该插件，也会用到该方法，这个时候需要在nextTick的回调函数中执行重新应用插件的方法
25.vuex 的运行机制
vuex 提供state 来驱动视图，通过dispatch 派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutation，最后mutation来更改state
26.vuex的核心
state：基本数据
我们可以通过vue的computed获取vuex的state
当一个组件需要获取多个状态的时候，将执行额鞋状态都生米高为计算属性会有些重复和冗余，可以使用 mapState 辅助函数帮助我们生成计算属性
getter：从基本数据派生的数据
mutation：提交更改数据的方法，同步
提交mutation时更改vuex中的store中状态的唯一方法
使用store.commit 方法调用mutation的回调函数
actions：像一个装饰器，包裹mutation，可以异步
actions 提交的是mutation，不是直接更改状态
modules：模块化vuex
27.keep-alive 使用场景和原理
keep-alive 是vue内置的一个组件，可以实现组件的缓存，当组件切换时不会对当前组件进行卸载
常用的两个属性，include/exclude，允许组件有条件的进行缓存
两个生命周期activated/deactivated，用来得知当前组件是否处理活跃状态
keep-alive 运用了LRU算法，选择最近最久为使用的组件予淘汰
28.什么是LRU 算法
将新数据从尾部插入到 this.keys 中
每当缓存命中（缓存被访问），则将数据移到 this.keys 的尾部
当 this.keys 满的时候，将头部的数据丢弃
29.Vue3.0 和 2.0 的响应式原理区别
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达13种拦截方法。
30.Vue3.0 用过吗？了解多少？
响应式原理的改变 Vue3.x 使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。
组件选项声明方式 Vue3.x 使用 Composition API setup是Vue3.x新增的一个选项，他是组件内使用Composition API 的入口。
模板语法变化 slot 具名插槽语法，自定义指令v-model升级。
其他方面的更改 Suspense支持Fragment（多个根节点）和 Protal（在dom其他部分渲染组件内容）组件，针对一些特殊的场景做了处理。基于 treeShaking 优化，提供了更多的内置功能。
vue 相关的面试题相关推荐
- vue 给取data值_一些Vue相关的面试题，帮助求职者提升竞争力
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来我就给大家分享一些Vue相关的面试题,帮助大家提升 ...
- vue相关的面试题应该怎么答
Vue中如何扩展一个组件 此题属于实践题,考察大家对vue常用api使用熟练度,答题时不仅要列出这些解决方案,同时最好说出他们异同 答题思路: 按照逻辑扩展和内容扩展来列举 逻辑扩展有:mixins. ...
- Vue相关面试题及答案分享
Web前端重点技能是什么?Vue相关面试题有哪些?Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是Web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来 ...
- vue 给取data值_web前端教程分享Vue相关面试题
Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来就给大家分享一些Vue相关的面试题,帮助大家提升竞 ...
- vue如何获取年月日_好程序员web前端教程分享Vue相关面试题
好程序员web前端教程分享Vue相关面试题,Vue是一套构建用户界面的渐进式框架,具有简单易用.性能好.前后端分离等优势,是web前端工程师工作的好帮手,也是企业选拔人才时考察的重点技能.接下来好程序 ...
- 「Vue源码学习」常见的 Vue 源码面试题，看完可以说 “精通Vue” 了吗？
Vue源码面试题 一.行时(Runtime)+ 编译器(Compiler) vs. 只包含运行时(Runtime-only) webpack Rollup Browserify 二.Vue 的初始化过 ...
- 非 Vue 相关技术总结
文章目录 优秀参考资料 非 Vue 相关技术总结 JS文件操作 参考 上传 下载 预览 JS操纵剪切板 文本 文件(图片) js 拖拽上传文件 ngrok 内网穿透 两个 iFrame 标签包裹 Vu ...
- vue openlayer单击地图事件循环多次执行_12道vue高频原理面试题,你能答出几道?
前言 本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,希望通过这 12 道问题,让读者对自己的 Vue 掌握程度有一定的认识(B ...
- vue 相关技术文章集锦
不断更新,如果看到好的文章~~~ 总结篇 vue组件间通信六种方式(完整版) - 原作者:简书-浪里行舟 原理/源码篇 Vue.js 技术揭秘 Vue技术内幕 实战/经验篇 Vue相关开源项目库汇总 ...
最新文章
- Android NDK基础样例
- Android 懒加载
- 一张图解释什么是遗传算法_一张图告诉你什么叫真正的满配m416，吃鸡玩家看懵了...
- 华为ipc配置工具_【简讯】Intel十代桌面10核心亮相；Redmi K30配置曝光…
- 慕课网高并发实战（一）-并发与高并发基本概念
- Oracle之PLSQL总结
- 跟着阿里大牛捞干货：2019这5本书带你玩转大数据
- 系统补丁自动批量安装
- jmx.JmxAdminException
- 11.string容器
- 数据库练习（1）——建立数据库
- vs 2017 查看dll源代码
- iOS实现模拟定位功能
- 怎么学计算机打字输入,电脑怎么学习打字
- [转载]实时 Java，第 4 部分: 实时垃圾收集
- UG476 GT Transceivers文档翻译和自身理解
- 前端开发中的脚手架是什么意思
- vscode多行注释，自定义按键多行注释
- 武汉链家二手房数据分析
- Broadcasts详解