2023vue面试题

1.谈谈你对vue的了解

1. vue的作者是尤雨溪，2013年受angular启发，开发出比angular更轻的seed框架，2014正式对外发布。
2. -vue是一套用于构建用户界面的渐进式javascript框架。
3. -渐进式可以理解为自底层向上逐层的应用,（从简单的应用递进到复杂应用）
4. -简单应用:只需要一个轻量级小巧的核心库
5. -复杂应用:可以引入各式各样的vue插件
6. -vue特点
7. -采用组件化模式，提高代码复用率、让代码更简洁。
8. -声明式编码，无需直接操作dom，提高开发效率。

2.数据双向绑定(数据代理)

1. -通过vm对象来代理data对象中的属性操作(读/写)
2. -更加方便的操作数据
3. -原理：通过object.defineProperty()把data对象中的所有属性添加到vm实例上，然后为每一个添加到vm实例上的属性，都指定一个getter和setter，在getter/getter内部去操作(读/写)data中对应的属性。

3.对mvvm的理解

1. 是model-view-viewmodel的缩写，是一种结构模式(设计思想)
2. model是数据模型，用于对数据的定义和修改等操作。
3. view是ui视图层，用于渲染页面。
4. viewModel：负责监听model中数据的改变并控制属兔更新，处理用户交互操作。
5. 修改View层，Model对应数据发生变化
6. Model数据变化，不需要查找DOM，直接更新View

4.修饰符

1. 事件修饰符（可以连续使用）
2. -.prevent阻止默认行为
3. -.stop阻止冒泡
4. -.once事件触发一次
5. -.capture使用事件的捕获模式
6. -.self只有event.target是当前操作的元素才会触发事件
7. -.passive事件默认行为立即执行，无需等待事件回调执行完毕。
8. 键盘修饰符keydown keyup
9. -enter回车
10. -delete删除/退格
11. -esc退出
12. -space空格
13. -tab换行
14. -up上
15. -down下
16. -left左
17. -right右
18. -vue未提供别名的按键，可以使用按键原始的key值去绑定，注意要转为kebab-case(短横线命名caps-lock)
19. -系统修饰键：ctrl、alt、shift、meta
20. -配合keyup使用:按下修饰键的同时再按下其他键，随后释放其他键，事件才会被触发
21. -配合keydown使用：正常触发事件。
22. -使用keyCode去指定具体按键
23. -Vue.config.keyCodes.自定义键名=键码，可以定制按键别名

5.计算属性与监听属性

1. 计算属性：
2. -get、set属性，底层借助了object.defineproperty方法提供的getter和setter。
3. -当读取计算属性里的值时，get会被调用，初次读取值或者所依赖的数据发生改变时都会被调用。
4. -有缓存，只有所依赖的数据发生改变时缓存的值才会更新。
5. -当计算属性的值被直接修改时会执行set
6. 监听属性
7. -当监视属性变化时，回调函数自动调用，进行相关操作。
8. -监听属性有两种写法:new Vue里传入watch配置或者通过vm.$watch()监听。
9. -有handler函数，其身上有旧值与新值(newValue,oldValue)
10. -没有缓存
11. -检测data里的属性，也可以监听计算属性里的值
12. -默认不检测对象内部值的改变，可配置deep:true开启深度监听

1. 区别
2. -componted无法开启异步任务，watch可以开启异步任务
3. -componted有缓存机制，watch没有缓存机制
4. -componted可以完成的功能watch都可以完成，而watch完成的功能componted不一定能完成
5. -componted的计算结果受其依赖属性的影响，watch的改变可以影响依赖属性。

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

1. -v-show是通过dispaly的属性值来控制元素的显示与隐藏，隐藏后dom元素节点还存在。
2. -v-if则是通过元素节点的创建与销毁来实现元素的显示与隐藏，隐藏后dom元素节点不存在。
3. -v-show适用于切换频率比较频繁的场景。
4. -v-if适用于切换频率比较低的场景。

7.v-for中key的作用

1. -虚拟dom中，key是唯一标识，当状态中的数据发生变化时，vue会根据新数据生成新的虚拟dom，随后新的虚拟dom与旧的虚拟dom进行差异比较(diff算法)。
2. -新虚拟dom与旧虚拟dom是通过key进行比较的，如果虚拟dom内容没有发生改变，直接复用之前的真实dom，如果虚拟dom中的内容发生了变化，则生成新的真实dom，随后替换掉页面中对应的旧的真实dom。
3. -用index索引作为key的话，如果对数据进行逆序添加、逆序删除等破坏顺序的操作，会产生没有必要的真实dom更新，降低效率，如果还有输入类的dom时，会导致界面渲染错误。
4. -最好将每条数据的唯一标识作为key，如果不存在逆序操作，仅用于列表渲染，可以使用index作为key。

8.vue是如何检测数据的原理(响应式)

1. -vue会监视data中所有层次的数据
2. -通过setter实现监视，且在new Vue时就传入需要检测的数据。
3. -对象中后添加的属性，vue不做响应式处理，可以使用Vue.set(target,index,value)或者this.$set()
4. -对于数组中的数据，默认不监听，可以通过vue提供的push、pop、shift、unshift、splice、sort、reverse对数组的方法进行包装后实现响应式。

9.生命周期

1. beforeCreate:实例创建之前，初始化事件和数据，无法访问data中的数据和methods中的方法。数据代理未开始
2. created:实例创建完成，数据和事件已初始化完成，可以访问到data中的数据和methods里的方法。数据监测、数据代理
3. beforeMounte:实例挂在之前，虚拟dom以准备好，还没有生成真实dom，页面还没有被渲染，对所有的dom操作最终都不生效。
4. mounted:实例挂载之后，生成了经过vue编译的真实dom，页面被渲染，对dom的操作均有效，初始化过程结束，一般在此开启定时器、发送网络请求、订阅消息、绑定自定义事件等操作。
5. beforeUpdate:页面更新之前，此时数据是最新的，页面还是旧的，页面和数据尚未保持同步。
6. updated:页面更新之后，数据时新的，页面也是新的，数据和页面保持同步，完成了model-view的更新。
7. beforeDestory:实例销毁之前，data里的数据和methods的方法、指令等都可以使用，但操作数据不会触发更新流程，一般在此关闭定时器、解绑自定义事件、取消订阅等操作。
8. destory:实例销毁之后，自定义事件会失效，但原生的dom事件依然有效。
9. 使用keep-alive缓存后会有路由组件独有的生命周期钩子
10. actived:被缓存的组件被激活(显示)时使用
11. deactivated:被缓存的组件失活(隐藏)时使用
12. 特殊的生命周期钩子
13. $nextTick():在页面下次更新渲染时执行

10.vue中，组件化中data为什么是函数

1. -避免组件被复用时，数据存在引用关系。
2. -vue组件可能存在多个实例，如果使用对象形式，会导致多个组件共用一个data，从而使一个组件影响其他组件。
3. -如果用函数定义，会返回一个全新的对象，避免了组件间之间data的相互影响。

11.组件的创建过程

1. -组件的本质是一个VueComponent的构造函数，是Vue.extend生成的。每次调用Vue.extend返回的都是一个新的VueComponent。
2. -非单文件组件
3. -使用Vue.extend({})创建组件
4. -在vue实例对象中注册组件components:{},(全局组件Vue.component()和局部组件)
5. -使用组件
6. -单文件组件
7. -创建组件文件.vue
8. -使用import引入组件
9. -在components里注册组件
10. -使用标签形式使用组件

12.vue脚手架中目录分别是什么意思

1. -.gitignore git的忽略文件
2. -babel.config.js babel的配置文件(babel是控制es6转es5)
3. -package-lock.json 包说明书的缓存文件，用于锁定版本
4. -package.json 包的说明书
5. -README.md笔记
6. -src
7. -mian.js 整个项目的入口文件
8. -assets一般存放静态资源，png、视频等
9. -App.vue跟组件
10. -components存放除app.vue外的其他组件
11. -public
12. -ico图标
13. -index.html
14. -node_modules存放第三包的文件夹
15. render(createElement){
16. return createElement('h1','xxxx')
17. }

13.浏览器的本地存储

1. -localStorage 浏览器窗口关闭内容不会消失，存储大小一般为5mb，setItem、getItem、remove、clear等api，持久化存储，需要手动清除才会消失，getItem获取不到对应的value会返回null。
2. -sessionStorage 浏览器窗口关闭，存储的数据会清空，setItem、getItem、remove、clear。
3. -cookie是一种浏览器管理状态的一个文件，它有name、value，Domain、path等等，数据大小不能超过 4K，是服务器向浏览器发送的一小块数据，不可以跨域请求。设置的cookies过期时间之前一直有效，即使窗口和浏览器关闭，数据会自动地传递到服务器，服务器也可以写cookies到客户端

14.vue组件之间传值

1. -父组件传值子组件
2. props
3. f:
4. -子组件传父组件
5. 自定义事件的$emit
6. f:
7. methods:{
8. demo(e){}
9. }
10. c:methods:{
11. handler(){
12. this.$emit('str',this.obj)
13. }
14. }
15. 通过refs中的$on
16. f:
17. mounted:{
18. this.$refs.str.$on('handler'，回调函数)
19. }
20. -兄弟组件传值
21. vuex
22. 全局事件总线$bus
23. main.js
24. new Vue({
25. render:h=>h(App),
26. beforeCreated(){
27. //安装全局事件总线
28. Vue.prototyp.$bus=this
29. }
30. }).$mount()
31. 在组件中通过this.$bus.$emit('xxx',data)提供数据，通过this.$bus.on('xxx',(data)=>{})获取数据。
32. 消息订阅与发布
33. 安装pubsub-js
34. 引入pubsub-js
35. 订阅消息用pubsub.subscribe('xxx',data)
36. 发布消息pubsub.publish('xxx',(msgNmae,data)=>{})

14.nextTick

1. this.$nextTick()
2. -作用：在下一次dom更新结束之后执行指定回调
3. -什么时候调用：当改变数据后，要基于更新后的新dom进行某些操作时

15.vue解决跨域

1. 只有浏览器才存在跨域
2. -cors后端配置响应头，真正意义上的解决跨域
3. -jsonp立勇