vue面试_ant-design-vue message阻塞生命周期-CSDN博客

本文链接：https://blog.csdn.net/weixin_44208404/article/details/123701715

1、对于MVVM的理解

model-view-viewmodel,其核心是提供对view和viewmodel的双向数据绑定，即viewmodel的状态改变可以自动传递给view

model层代表数据模型，view代表UI组件，它负责将数据模型转化成UI展现，viewmodel是一个同步view和model的对象

2、vue的生命周期

生命周期是指实例从创建到销毁的过程。

beforecreat：此时data和methods中的数据还没有渲染完成
created：data和methods中的数据渲染完成，可以调用
beforemount：模板已在内存中被编译，没在界面显示，变量未被替换
mounted：实例完全创建，DOM渲染完成
beforeupdate：当data变化是，会触发，data数据尚未和最新的数据同步
updated：页面和data数据同步
beforedestory：data、methods处于不可用状态，但没有被销毁
destoryed：销毁

3、vue实现数据双向绑定的原理

采用数据劫持和发布者-订阅者模型来实现的，数据劫持通过object.defineProperty()劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
实现一个指令解析器Complie，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
实现一个订阅者Watcher，作为连接Observer和Complie的桥梁，能够订阅并接收到每个属性变动的通知，执行指令绑定的回调函数，从而更新视图

4、组件之间参数传递？

父组件向子组件传值时，可在子组件中设置props属性接收
子组件向父组件传值时，使用$emit方法发送事件，父组件进行监听该事件（v-on）并绑定相应的方法
非父子关系时，可以利用事件总线方式进行通信

//发送事件
this.$bus.$emit('aaa')
//监听事件
this.$bus.$on('aaa',()=>{})

vuex共享参数

5、hash模式和history模式？

hash模式在浏览器中URL后面带“#”号，可以使用window.location.hash读取，不会被包括在http请求中，改变hash不会重载页面
history利用pushstate和replacestate方法，执行时修改url，但浏览器不会自己向后端发送请求

6、vue-router中的钩子函数

beforeEach、afterEach，它们存在以下三个参数：

to代表即将进入的页面
from代表正要离开的页面
next：必须调用该方法来resolve这个钩子

beforeRouteEnter：该钩子执行时，组件实例还没有被创建
beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用

beforeRouteLeave：导航离开该组件的对应路由时调用
应用场景：清楚定时器、当页面中有为保存内容阻止页面跳转、保存信息到vuex或session

7、Vuex是什么？怎么使用？工作场景？

vuex是用于存储状态数据，它包含state、mutation、actions、setter、module等属性，mutation提交数据存储的同步任务，action是处理异步逻辑的任务，使用this.$store.state引用存储的数据

8、过滤器

在组件中定义：

filters:{
	fn:function(val){
		console.log(val)
	}
}

在全局中定义：

Vue.filter('fn',val=>console.log(val))

9、keep-alive

被keep-alive包含的组件保留状态，避免被重新渲染，包含两个属性include、exclude

10、$router、$route

$router是路由实例对象，包含路由的跳转方法、钩子函数，而 $route是活跃路由信息对象，包含path、params等信息。

11、computed、methods的区别

当数据发生变化时，methods会重新执行，而computed则从缓存中读取，优化性能

12、vue的优缺点

vue可以实现数据绑定以及响应，但不利于seo优化，首屏加载时间较长

13、$nextTick的使用？

当修改DOM元素的值后，直接获取DOM节点的更新数据可能获取不到，使用this.$nextTick将回调延迟到下次DOM更新循环之后执行

在created()里使用this.$nextTick()可以等待dom生成以后再来获取dom对象

14、SPA应用和多页面应用？

单页面应用只有一个入口，首屏加载时间较长，不利于SEO，多页面应用有多个入口，页面跳转是整页进行刷新

15、v-if和v-for为什么不建议同时使用？

v-for具有更高的优先级，意味着每次遍历都需要进行v-if判断，造成内存的浪费

16、assets和static的区别？

assets中的文件会经过webpack打包，重新编译。而static中的文件不会经过编译。static中建议放一些外部第三方，自己的放到assets中。

注：如果将图片放到这两个文件夹中，html页面可以正常使用，但是在动态绑定中，assets路径加载图片会失败，因为webpack使用的是commonJS规范，需要用require引入

17、delete和Vue.delete删除数组的区别？

delete会使被删除元素变为empty或undefined，其他元素的键值不变，Vue.delete会直接删除数组

18、SPA首屏加载慢如何解决？

首屏时间指浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，整个网页不一定要渲染完成，但需要展示当前视窗的内容。

减少入口文件体积
采用路由懒加载，将不同路由对应组件分割成不同的代码块，待路由被请求时会单独打包路由，使得入口文件变小

routes:[ 
    path: 'Blogs',
    name: 'ShowBlogs',
    component: () => import('./components/ShowBlogs.vue')

UI框架按需加载
按需引用需要的组件
图片资源压缩
使用雪碧图
页面渲染优化
减少回流、重绘，减少DOM数量，css外链放于顶部，js外链放在底部

19、Vue-router和location.href区别？

location.href跳转方便，但是页面会造成刷新，Vue-router采用pushstate跳转，不会造成刷新

20、Vue2中注册router-link上点击事件无效？

router-link会阻止click事件，使用@click.native监听原生事件

21、响应式数组方法

push、pop、shift、unshift、splice、sort、reverse