前端整理——Vue

野性酷女 2023-06-10 06:25 129阅读 0赞

[![返回主页][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]][aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]

#  #

# **[前端整理——Vue部分][Vue]** #

### **（1）Vue的生命周期** ###

1）创建vue实例，初始化生命周期钩子函数  
2）数据检测及方法和计算属性代理。在数据检测和初始化数据之前调用beforeCreated()，这时还获取不到props或者data中的数据；数据、属性、方法初始化之后，调用created()，可以访问之前访问不到的数据，但是组件还没有挂载，$el属性还没有显示，所以看不到组件。  
3）判断是否有el属性，如果没有就判断是否调用了$mount方法，如果也没有则停止解析。如果调用了二者之一，就继续解析。  
4）获取视图模板。判断是否有template属性，如果没有则将el的视图节点的outerhtml作为模板；如果有则将template视图作为模板。  
5）编译模板。生成虚拟DOM，解析指令、组件。  
6）将虚拟DOM挂载到真实DOM上。挂载前调用beforemount方法，挂在后调用mounted方法。  
7）数据更新导致视图更新。更新前调用beforeUpdate,更新后调用updated。  
8）销毁vue实例。销毁前调用beforedestroy，销毁后调用destroyed。

### **（2）keep-alive的生命周期** ###

如果你需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

对于 keep-alive 组件来说，它拥有两个独有的生命周期钩子函数，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

### **（3）Vue组件通信** ###

**1、父子组件通信**

父组件通过props传递数据给子组件，子组件通过$emit发送事件传递数据给父组件，这两种方式是最常用的父子通信实现方法。  
父子通信方式是单向数据流，父组件通过props传递数据，子组件不能直接修改props，而是必须通过发送事件的方式告知父组件修改数据。

**2.非父子组件间的数据传递，兄弟组件传值**

对于这种情况可以通过查找父组件中的子组件实现，也就是 this.$parent.$children，在 $children 中可以通过组件 name 查询到需要的组件实例，然后进行通信。

### **（4）路由** ###

**1、路由的钩子函数**

1）全局钩子函数：beforeEach、afterEach  
router.beforeEach（to, from , next） 全局钩子函数，每次每一个路由改变的时候都得执行一遍。  
to：即将要进入的目标路由对象；form：当前导航正要离开的路由；next：Function  
next( )：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed。  
next( false)：中断当前的导航。  
next( '/' )：跳转到一个不同的地址。

<code>const router = new VueRouter({ ... })
 router.beforeEach((to, from, next) => {
 // ...
 })</code>

router.afterEach全局后置钩子，这些钩子不会接受 next 函数也不会改变导航本身：

<code>router.afterEach((to, from) => {
 // ...
 })</code>

2）单个路由里面的钩子：beforeEnter、beforeLeave  
你可以在路由配置上直接定义 beforeEnter 钩子函数，在进入对应路由时调用对应的beforeEnter

<code>const router = new VueRouter({
 routes: [
 {
 path: '/foo',
 component: Foo,
 beforeEnter: (to, from, next) => {
 // ...
 }
 }
 ]
 })</code>

3）组件内的钩子函数：beforeRouteEnter 、beforeRouteUpdate 、beforeRouteLeave

<code>const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用；不！能！获取组件实例 `this`； 因为当守卫执行前，组件实例还没被创建
 },
 beforeRouteUpdate (to, from, next) {
 // 在当前路由改变，但是该组件被复用时调用；举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候；由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 可以访问组件实例 `this`
 },
 beforeRouteLeave (to, from, next) {
 // 导航离开该组件的对应路由时调用； 可以访问组件实例 `this`
 }
 }</code>

**2、路由跳转的几种方式**

1）直接调用$router.push实现路由跳转：

对应路由配置如下：

<code>{
 path: '/login/:id',
 name: 'Login',
 component: Login
 }</code>

在子组件中获取参数值：  
this.$route.params.id

2）通过路由属性中的name来确定匹配的路由，通过params来传递参数。

<code> this.$router.push({
 name: 'Login',
 params: {
 id: id
 }
 })</code>

对应路由配置如下：

<code>{
 path: '/login',
 name: 'Login',
 component: Login
 }</code>

在子组件中获取参数值：  
this.$route.params.id

3）使用path来匹配路由，然后通过query来传递参数。这种情况下 query传递的参数会显示在url后面?id=？

<code> this.$router.push({
 path: '/login',
 query: {
 id: id
 }
 })</code>

对应路由配置如下：

在子组件中获取参数值：  
this.$route.params.id

### **（5）组件中data为什么是一个函数** ###

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

<code>data: function () {
 return {
 count: 0
 }
 }</code>

原因：对象为引用类型，当重用组件时，由于数据对象都指向同一个data对象，当在一个组件中修改data时，其他重用的组件中的data会同时被修改；而使用返回对象的函数，由于每次返回的都是一个新对象（Object的实例），引用地址不同，则不会出现这个问题

<code>// 1.对象方式（所有重用的实例中的data均为同一个对象）
 var data = {
 x: 1
 };
 var vm1 = {
 data: data
 };
 var vm2 = {
 data: data
 };
 console.log(vm1.data === vm2.data);// true，指向同一个对象
 // 2.函数方式（所有重用的实例中的data均为同一个函数）
 var func = function () {
 return {
 x: 1
 }
 };
 var vm3 = {
 data: func
 };
 var vm4 = {
 data: func
 };
 console.log(vm3.data() === vm4.data()); // false，指向不同对象</code>

参考博文：[https://blog.csdn.net/qq\_33576343/article/details/82793894][https_blog.csdn.net_qq_33576343_article_details_82793894]

### **（6）v-show 与 v-if 区别** ###

v-show只是在display:none和display:block之间切换。无论初始条件是什么都会被渲染出来，后面只需切换CSS，DOM还是一直保留。  
v-if 初始值为false时，组件不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。  
对比来说，v-show在初始时有更高的开销，但是切换开销小，适于频繁切换的场景；v-if初始渲染开销小，切换时开销更高，不适合经常切换的场景。

### **（7）自定义指令** ###

1、全局注册指令  
![format_png][]  
2、局部注册指令  
![format_png 1][]  
使用：  
![format_png 2][]  
3、自定义指令的钩子函数  
bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。  
inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。  
update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。  
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。  
unbind:只调用一次，指令与元素解绑时调用。

参考：[https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c024ecbf265da616a476638][https_juejin.im_book_5bdc715fe51d454e755f75ef_section_5c024ecbf265da616a476638]

[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg
[aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vc2tpbnMvY3VzdG9tL2ltYWdlcy9sb2dvLmdpZg 1]: /images/20230531/2869c0db5e2840ae963f2ca57ba3d6ba.png
[Vue]: /images/20230531/2869c0db5e2840ae963f2ca57ba3d6ba.pngp/10207748.html
[https_blog.csdn.net_qq_33576343_article_details_82793894]: https://blog.csdn.net/qq_33576343/article/details/82793894
[format_png]: /images/20230531/3ac60259516443499dc9e139a04435bb.png
[format_png 1]: /images/20230531/04f3ecaf3e47481ab1f11dda83a7c437.png
[format_png 2]: /images/20230531/26b7618d8e974b409716a9bb04c39b60.png
[https_juejin.im_book_5bdc715fe51d454e755f75ef_section_5c024ecbf265da616a476638]: https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c024ecbf265da616a476638