1. vue.js的两个核心是什么
数据驱动(数据改变会驱动页面更新)和组件化
2. Vue中一个元素如何绑定多个事件
使用@click=“handle();handle1()”,分号隔开即可
3. Vue路由有几种实现方式,它们的异同点是什么
hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新
history: 使用html5的history方法, 不支持老旧浏览器, 但是如果要部署到服务器的化, 需要在ng上进行相应的正向代理跳转, 否则拷贝的链接会打不开
4. Vue第一次加载页面会出发哪些钩子
beforeMount mounted beforeCreate created
5. v-for中key的理解
加了key之后,每个dom有了自己唯一的标识,这样修改的时候可以精准的找到并修改,从而节省了性能。所以,key的值必须唯一,而且不可以用随机数,用时间,不建议用下标
6. Vue页面加载时v-show设置的隐藏元素出现导致页面闪烁问题,解决方案是什么
v-cloak
7. delete和Vue.delete删除数组的区别
delete只是被删除的元素变成了 empty/undefined 其他的元素的键值还是不变。
Vue.delete 直接删除了数组 改变了数组的键值。
8. 如何优化SPA应用的首屏加载速度慢的问题
静态资源本地缓存 组件重复打包 UI框架按需加载 压缩图片 格式化代码
9. vue-router的导航守卫
全局守卫
- router.beforeEach 全局前置守卫 进入路由之前
- router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
- router.afterEach 全局后置钩子 进入路由之后
路由局部组件守卫
- beforeRouteEnter 进入路由前
- beforeRouteUpdate (2.2) 路由复用同一个组件时
- beforeRouteLeave 离开当前路由时
10. Vue-cli简化了我们哪些工作
简化了一个个去创建项目文件以及基本项目需要的各种依赖包及插件的下载
11. vue组件中的name有什么用
12. vue路由传参需要注意什么?
https://blog.csdn.net/sinat_17775997/article/details/78748825
13. vue中query路由传参与params传参哪个刷新页面会丢失
query刷新不会丢失
params会丢失
解决方式只需要在router-link路由的后面利用?的形式 进行参数的拼接
14. vue路由守卫和生命周期的执行顺序
从组件a到组件b
切换组件b ---> beforeRouteLeave(上一组件)
---> beforeEach ---> beforeEnter ---> beforeRouteEnter ---> beforeResolve ---> afterEach ---> beforeCreate ---> created ---> beforeMount ---> beforeDestroy(上一组件) ---> destroyed(上一组件) ---> mounted
大致执行顺序
15. 为啥vue2中不能检测数组的变化,怎么解决?
因为Object.definedPropoty无法检测数组的方法 使用this.$set
16. Vue3响应式原理为什么换成了Proxy
vue2中Object.definedPropoty通过get和set俩个属性对数据劫持实现响应式
缺点:
- 检测不到对象属性的增加或者删除
- 数组的方法检测不到
- 需要对每一个属性进行遍历监听,如果嵌套对象需要深层监听,造成性能浪费
vue3中的proxy本身就是用于监听对象的,所以对象的所有属性都会被代理,而且可以直接监听到数组的变化
缺点:
- Proxy不兼容IE
17.vue中的性能优化
编码优化方面:
尽量减少data中的数据
v-if和v-for不要一起使用
spa单页面框架要使用keep-alive路由缓存组件
循环遍历时候使用key值保证唯一性
使用路由懒加载,图片懒加载
防抖节流
用户体验优化方面:
使用骨架屏
使用服务器/客户端缓存等优化
seo优化:
重要的内容不要用js进行输出,因为爬虫不会去爬取
预渲染,服务端渲染ssr等
打包优化:
压缩代码
使用cdn加载第三方模块
sourceMap优化等
18. vue3.0为什么要替换掉2.0的双向绑定原理?
因为在2.0中Object.defineProperty无法监控到数组下标的变化,导致只能直接通过数组的下标给数组值,不能实时响应,而且它只能劫持对象的属性,如果我们要对每个对象的属性进行遍历,则得通过递归+遍历data对象来实现对数据进行监控
替换成Proxy之后可以劫持整个对象,并且返回一个新的对象
19.ref在vue中是干嘛的,怎么使用?
用来获取dom元素的,比原生document.getxxx要简化好多
<img src=“xxx” ref=“imgs”/ >
使用时
this.$refs.imgs
20.vue父子组件生命周期在不同阶段的的执行顺序
挂载阶段
父 beforeCreate – 父 created-- 父 beforeMounte – 子 beforeCreate --子created – 子 beforeMount – 子 mounted – 父 mounted
更新阶段
父 beforeUpdate – 子 beforeUpdate – 子 updated – 父updated
销毁阶段
父 beforeDestroy – 子 beforeDestroy – 子 destroyed – 父 destroyed
21. watch和computed的区别
watch监听器默认对监听的简单数据做出响应,如果数据复杂,则需要开启深度监听
computed对一个数据进行监听和操作,并返回一个新的数据,默认只读,修改数据的时候使用set函数,有缓存
22. Vue路由的优点和缺点?
- 优点:
- 不需要每次都从服务器全部获取,快速展示给用户。
- 根据不同的url显示不同的页面,用户体验好。
- 缺点:
- 不利于SEO
- 使用浏览器的前进,后退会重新发送请求,没有合理利用缓存。
- 单页面无法记住之前滚动的位置;无法在前进后退的时候记住滚动的位置
23. hash路由和history路由的优缺点?
hash优点:
兼容性好,浏览器都能支持
hash值改变不会向后台发送请求,完全属于前端路由
只需要前端配置路由表,不需要后端的参与
hash缺点:
存在一个#,导致url不美观
history优点:
符合url地址规范,不需要#,使用起来比较美观
history缺点:
兼容性比较差,底层使用h5新增的pushState()和replaceState()方法,需要特定浏览器((Chrome:5+
Safari:6+ Opera:11.5+ ios Safari:5.1+ Android:4.3+))的支持
在用户·手动输入地址或者·刷新页面时候会发起url请求,后端需要配置index.html页面用户匹配不到资源的情况,否则会出现404报错(可以使用niginx重写路由解决)
24. vue组件中的data为什么是一个函数
使用组件时会对组件进行实例化操作,调用data函数返回一个对象作为唯一的数据源,这样可以保证多个组件间互不影响,如果data是个对象的话,对象属于引用类型会影响到所有的实例
25. vue为什么要用虚拟dom
虚拟dom本质上是在js和dom之间加了一个缓存,虚拟dom不会依赖真实的dom环境,可以实现跨频台操作
26. 对spa单页面的理解?优缺点?
spa在页面初始化的时候加载相应的html,css,js,等页面加载完成之后利用路由机制实现html页面的切换
优点:
用户体验好、快,内容的改变不需要重新加载整个页面,避免了不必要的跳转和重复渲染;基于上面一点,SPA 相对对服务器压力小;前后端职责分离,可以单独进行开发和测试
缺点:
不利于seo优化,且初次加载时耗时多
27. new vue()初始化干了什么?
Vue 初始化主要就干了几件事情,合并配置,初始化生命周期,初始化事件,初始化渲染,初始化
data、props、computed、watcher 等等。
28 vue内置组件有哪些?
slot:插槽组件,可以指派name作为具名插槽,或者向外暴露属性,供外部调用成为作用域插槽
component:通过is属性动态显示一个组件
transition:过渡动画组件
transition-grop:多个过度动画需要使用这个来作为一组处理
keep-alive:当组件被移除或被替换,不会立即销毁组件,而是将其缓存起来,再次调用不需要重新渲染,同时不会触发mounted,而是变为触发actived钩子
29. vuex执行流程?
通过dispatch去提交一个actions
actions接收到这个事件库,在action中执行异/同步操作,根据不同的情况去派发给mutations
actions通过commit去出发mutations mutations更新state数据后通知vue进行渲染
30.$router
和$route区别?
$router是路由的实例对象
$route 当前路由信息