vue面试题
请详细说下你对vue生命周期的理解?
vue优点?
-
轻量级框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb。
-
简单易学:国人开发的,中文文档,不存在语言障碍,易于理解和学习。
-
双向数据绑定:当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化
-
组件化开发:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势;
-
视图,数据,结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作;
-
虚拟DOM:dom操作是非常耗费性能的,不再使用原生的dom操作节点,极大解放dom操作,但具体操作的还是dom,不过是换了另一种方式。
-
运行速度更快:相比较于react而言,同样是操作虚拟dom,就性能而言,vue存在很大的优势。
单页面应用和多页面应用区别及优缺点?
单页面应用
只有一张Web主页面的应用,是一种从Web服务器加载的富客户端,单页面跳转仅刷新局部资源 ,公共资源(js、css等)仅需加载一次,常用于PC端官网、购物等网站。
多页面应用
指有多个独立的页面的应用,每个页面必须重复加载 js,css 等相关资源。多页应用跳转,需要整页资源刷新。。
单页面应用与多页面应用具体对比分析
单页面的优点:
1,用户体验好,快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小
2,前后端分离
3,页面效果会比较炫酷(比如切换页面内容时的专场动画)
单页面缺点:
1,不利于seo
2,导航不可用,如果一定要导航需要自行实现前进、后退。(由于是单页面不能用浏览器的前进后退功能,所以需要自己建立堆栈管理)
3,初次加载时耗时多
4,页面复杂度提高很多
多页面应用的缺点:
1,速度慢: MPA 速度较慢,因为每当用户想要访问新数据或移动到网站的不同部分时,浏览器都必须从头开始重新加载整个页面。
2,开发时间:在多页面应用程序中,前端和后端的耦合度更高,因此开发人员需要更多时间来构建它们。
通常有一个项目需要从头开始编写前端和后端代码。
vue路由跳转传参的方式有哪些?
在template中可以使用标签实现跳转。
- router-link 标签直接拼接参数实现跳转
<router-link to="/t?index=1">
<button class="btn btn-default">点击跳转</button>
</router-link>
- router-link 标签使用to属性结合query实现跳转,里面是参数字典
<router-link :to="{path:'/t',query: {index: 1}}">
<button class="btn btn-default">点击跳转</button>
</router-link>
- this.$router.push() (@click函数里面调用)
this.$router.push({path: '/路径?参数=1'})
接收参数
this.$route.query.index
query和 params区别
-
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,
密码之类还是用params刷新页面id还在 -
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
VUE几种路由跳转几种方式的区别
this.$router.push:跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
this.$router.replace:跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)
this.$router.go(n):向前或者向后跳转n个页面,n可为正整数或负整数
vue遇到的坑,如何解决的?
页面刷新vuex被清空
网上推荐最多的方法就是用localStorage。但是我个人觉得不太合适,还得看项目吧。localStorage是永久存储的
数据重新获取 我使用的方法是在需要某些数据之前先判断一下数据是否存在,如果不存在重新获取。
v-for 和 v-if
当它们处于同一节点,v-for的优先级比v-if更高。
axios请求中post请求的坑。刚开始的坑是,使用axios的post方法请求数据,数据被拦截,数据一直传不到后端那边。后来查文档才得知 axios对于post请求是有拦截功能的,需要自己判断,或者使用提请的 qs 方法,将传给后端的数据进行下处理。
路由传参的功能的坑。
之前一直使用路由传参,但是当本页面刷新的时候,页面上是没有参数的,因为参数是从上个页面传入进来的。 解决办法:使用了缓存,和vuex状态管理。但是由于项目并不是很大型的项目,所以使用最多的是缓存。
页面缓存的坑。
有个填写信息的页面,需要填写一部分信息,进入查新协议页面,返回的时候,页面上填写的信息还需要留存。 解决办法:使用vue提供的keep-alive,来完成页面的缓存的。
vue组件动态加载的坑。
由于首页的排版不确定,然后想着,让组件动态显示,根据后端传入的数据,传入那个组件的数据,就显示那个组件。解决办法:和后端商量好,做个标识。前端根据标识判断,动态显示组件。 使用到了vue中的 , 刚开始想着是不是和原生js一样使用append直接可以插入进入呢,但是后来发现根本不可以,思路是可以的,但是实现起来是行不通的。因为append后面插入的必须是个节点,而不是组件。后来就去查阅vue文档。
h5页面打开调试日志。
h5页面不像小程序那样,直接可以打开控制台,在手机上查看日志,得需要自己安装vConsole的插件来实现
vue封装通用组件方法思路?
Vue.js中ajax请求代码应该写在组件的methods中还是vuex的actions中?
如果请求来的数据是不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入vuex 的state里。
如果被其他地方复用,这个很大几率上是需要的,如果需要,请将请求放入action里,方便复用。
Vuex中如何异步修改状态?
actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态(会互相干扰).
actions 里面放我们函数,函数里面的参数context ,可以帮我们提交的mutations。主要逻辑其实就是在组件内部,调用actions之后,actions里面又去调用mutations,而mutations又去修改了state。
mutations:{
increate(state){ //payload:携带参数
state.counter++
}
},
actions:{
//放函数,
increateAction(context){
context.commit("increate")
}
}
import {useStore} from 'vuex'
import {onMounted} from "vue"
export default {
setup(){
const store=useStore()
onMounted(() => {
store.dispatch("getHomeMutidata")
}),
return{
}
}
刷新浏览器后,Vuex的数据是否存在?如何解决?
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。
原因:因为 store 里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化。
解决办法:
1.使用 vuex-along
2.使用 localStorage 或者 sessionStroage
使用vuex-along
vuex-along 的实质也是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中,只不过这个存取过程组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了。
使用 localStorage 或者 sessionStroage
created() {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("store")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("store"))
)
);
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("store", JSON.stringify(this.$store.state));
});
},