那些关于vue

꯭拜꯭你꯭所꯭赐꯭.304

已于 2022-04-28 16:30:50 修改

阅读量967

点赞数 1

文章标签： vue.js

于 2022-04-21 21:12:46 首次发布

本文链接：https://blog.csdn.net/weixin_60592424/article/details/124328301

版权

本文详细介绍了Vue组件的生命周期管理，包括各钩子函数的触发时机及应用场景，重点讲解了Vuex的状态管理机制、核心组件的使用、路由守卫和组件间通信。此外，还对比了v-if与v-show的差异，以及在项目开发中的实际应用技巧。

摘要由CSDN通过智能技术生成

一、vue⽣命周期?

1.1、什么是vue⽣命周期?

所谓的 vue ⽣命周期就是 vue 实例从创建到销毁的整个过程我们称之为 vue的⽣命周期 , 通过 vue 的⽣命周期我们可以在不同的阶段进⾏不同的逻辑操作。

1.2. vue⽣命周期都有哪些钩⼦函数?这些钩⼦函数如何触发？

vue ⽣命周期常⽤的钩⼦函数⼀共有 8 个 ,分别是：

beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载后、
beforeUpdate 更新前、
updated 更新后、
beforeDestory 销毁前、
destoryed 销毁后 ,

如何触发

⻚⾯⼀开始加载的时候就会触发创建前后和挂载前后的钩⼦函数
更新的钩⼦函数需要当我们改变 data 的时候才能触发
销毁的钩⼦函数必须得当组件进⾏切换的时候触发

1.3. 项⽬开发过程中,在⽣命周期⾥⾯都分别做过什么功能?

在项⽬开发过程中,我经常使⽤到的钩⼦函数有created,我们经常在created进⾏数据请求,或者获取本地存储的数据,还有⼀些其他的操作. 除了created还有mounted,我们经常在mounted⾥⾯获取dom元素 (有时候也存在获取不到dom元素的情况,这个时候我们⼀般⽤$nextTick⽅法来解决)

1.4 ⻚⾯第⼀次加载时⽗⼦组件⽣命周期执⾏的顺序是什么?

页面—beforeCreate

页面—created

页面—beforeMount

组件—beforeCreate

组件—created

组件—beforeMount

组件—mounted

页面—mounted

二、 vuex的理解? 讲解

1. 什么是vuex?使⽤vuex能够解决什么问题?

2. vuex的五⼤核⼼是什么?

3. 在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法?

4. vuex的执⾏机制是什么?

5. vuex的弊端是什么?怎么解决?

2-1. 什么是vuex?使⽤vuex能够解决什么问题

所谓的vuex其实就是vue官⽅给我们提供的⼀个状态管理⼯具,通过vuex我们可以组件之间数据共享的问题.

2-2. vuex⼀共有5⼤核⼼,

state,⾥⾯保存的是状态,也可以理解为是数组,
getters,他们⽤来获取state⾥⾯的状态,并且可以对state的数据进⾏处理之后在返回,有点类似于vue的计算属性
接下来还有mutations,他的作⽤主要是⽤来修改state⾥⾯的数据,不过在mutations⾥⾯只能进⾏同步的操作
还有actions,这个actions也可以去改变state的状态,不过在actions⾥⾯定义的⽅法可以进⾏异步操作
modules,如果当我们的项⽬⽐较⼤的时候,那么保存的状态也会增加,如果都写到index.js⽂件⾥⾯,⽂件的内容就会变得特别臃肿,后期难以维护,所以我们可以使⽤modules进⾏模块化的处理,将多个状态抽离到对应js⽂件⾥⾯,最后在modules进⾏合并,这样后期就⽅便维护了.

2-3. 在组件⾥⾯如何调⽤五⼤核⼼的属性和⽅法?

如果我们要获取state⾥⾯的状态,我们可以通过this.store.state来进行获取
如果要调用getters 里面的方法,我们可以通过 this.store.getter 来进行调用
如果要调用muations里面的方法我们需要使用this.store.commit来触发
如果调用actions里面的方法，我们一般通过this.$store.dispacth来进行触发，除了这种方式以为，我们还可以通过辅助函数的方式来进行调用和触发 (mapState,mapMutation,mapAction,mapGetter)

2-3. vuex的执⾏机制是什么?

在形目中如果要改变state的状态，我们一般实在组件里面调用this.$store.disptch方式来触发actions里面的方法，在actions里面的方法通过commit来调用mutations里面定义的方法来改变state，同时这也是vuex的执行机制

2-4. vuex的弊端是什么?怎么解决?

vuex也有一些弊端，比如浏览器刷新的时候，vuex的数据会丢失，我们一般结合本地存储来解决，当我们在 mutations 里面改变 state 的时候通过 localStorage 或者 sessionStorage存储到本地，然后再state的状态的属性值那块写一个三元表达式，如果本地存在数据的话则读取本地存储的数据，否则就赋值为null

在项目中我一般使用vuex会保存用户信息和token以及其他的一些状态.

三、vue路由有⼏种模式?有什么区别?原理是什么?

vue的路由模式一共有两种，分别是hash和history.
他们的区别是hash模式不会包含在htto请求当中，并且hash不会重新加载页面，而是用history模式的话，如果前端的url和后端发起请求的url不一致的话，汇报404错误，所以使用history模块的话我们需要和后端进行配合.
history的原理就是利用heml5新增的两个特性方法，分别是psuhState和replaceState来完成的。

四. vue路由守卫?

所谓的路由守卫就是当我们进行页面跳转的时候会触发的钩子函数，我们把它称之为vue路由守卫。vue一共给我们提供了三种路由守卫，第一种全局路由守卫，第二种是组件内路由守卫，第三种路由独享守卫，这个是写在路由里面。不管是全局还是组件以及独享，都会有beforeEach、beforeResolve、afterEach 分别表示的意思路由条赚钱会触发的钩子函数以及进图路由的时候，以及进图路由之后会触发的钩子函数。这几个钩子函数里面都有一个回调函数，这个回调函数里面会有三个参数，分别是to,from,next,分别对应的是要进入的路由、离开之前的路由，以及进入下一个路由

在项目中我们还经常使用路由首位实现页面的鉴权。比如:当用户登陆之后，我们会把后台返回的token以及用户信息保存到vuex和本地，当页面进行跳转的时候，我们会在里有守卫里面获取vuex里面的token,如果token存在的话，我们则使用next让他进入要跳转的页面，如果token不存在的话我们使用next方法让他回到登录页

五、 v-if与v-show的区别?

v-if和v-show都是控制元素的显示与隐藏，不过v-if控制元素的显示和隐藏的时候会删除对用的dom元素，当每一个显示的时候，都会重新创建dom和渲染。而v-show则是通过css的display:none和display:block来控制元素的显示与隐藏。v-if比较耗费性能，所以我们涉及到频繁的显示隐藏操作我们建议使用v-show，如果不是频繁操作的话，我们可以使用v-if

在项目中我会经常使用v-if和v-show，比如我们在搜索功能的时候，他又一个历史记录，这个时候我们根据是否又搜索的结果来判断历史记录的显示与隐藏，这块就可以使用v-if，当然v-show也可以

六、 v-for与v-if的优先级那个⾼?如果同时使⽤v-for和v-if怎么解决?

v-for的优先级高。因为v-for的时候我们才开始渲染dom元素，这个v-if还无法进行判断。
v-for和v-if不能同时使用，我们可以通过标签，比如div或者template标签来进行包裹，把v-if写道包裹的标签上面（写到v-for外面）

七、 methods、computed和watch的区别?

methods是用来定义方法的区域，methods定义的方法需要调用才能触发。不具备缓存性
computed是计算属性，它依赖于属性值的变化，当属性发生改变的时候，计算属性里面定义的方法就会触发，computed具有缓存性，依赖属性值的变化而变化。
watch主要是用于监听，不具备被缓存性。依赖于数据变化而出发。
在项目中，比如我们获取state的状态的时候我们会把他放到computed里面，或者在写购物车数量计算的时候也会使用计算属性。而watch也在项目经常使用，比如我们封装编辑和新增弹窗组建的时候会通过watch来进行id判断我们是否要清空表单的数据

八、 vue组件通信?

夫传子在子组件的标签上定义属性子组件通过props来进行接收，可以通过数组的方式进行接收，也可以通过对象的方式来进行接收，如果父组件没有传递属性，子组件可以default来设置默认值
子传父子组件通过this.$emit(‘自定义的事件’，要传递的数据)，父组件通过子组件的标签监听自定义的事件，通过方法来接收传递的数据
非父子组件通信通过中央事件总线，我们称之为eventBus,我们需要创建一个空的js文件，在这个文件里面创建空的vue实例，然后导出这个空的vue实例，通过实例对象调用 .on 方法进行接受，通过 emit 方法进行发送