vue高级进阶（vue 高阶函数）

本篇文章给大家谈谈vue高级进阶，以及vue 高阶函数对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、[vue3进阶] 8.keepAlive
• 2、浅谈vue项目进阶开发-vuex篇
• 3、【Vue进阶】手把手教你在 Vue 中使用 JSX
• 4、VUE进阶 - $parent 和 $children

[vue3进阶] 8.keepAlive

keep-alive是vue自带的一个标签，用keep-alive包裹的组件，在这个组件不活动时，vue会自动缓存这个组件，而不是销毁它，

举一个例子

在showAdd的值变化时，add-hero和hero-list两个组件进行切换，

因为有keep-alive标签包裹，不显示的组件不会被销毁，vue把它缓存了起来，

在vue开发者工具中可以看出来

这时add-hero这个组件没有显示，在开发者工具里显示是灰色，后面inactive表示是非激活态

对比一下不用keep-alive的情况

在add-hero这个组件不显示时，在开发者工具的组件树里根本没有这个组件。

我们之前在学习vue-router时，给每个路由都写了meta，里面写了keepAlive，现在是用它的时候了，

打开我们之前学习vue-router时写的项目，这次主要修改集中在App.vue中，更改router-view标签

跟之前vue2时候写法区别比较大

现在要把keepAlive写在router-view里面，使用作用域插槽获得页面组件

这样就相当于缓存了所有页面

slotProps其实是一个对象，所以也可以用对象解构的语法

这样写简洁一点

下一步就要用上我们meta里面配置的keepAlive

按照更vue2类似的写法，根据keepAlive来判断，是true的话，使用keep-alive标签里面的组件

是false的话使用keep-alive标签外面的组件

但是点击跳转时却报错了

然后根据网上的解决办法，给它们加上key，key是唯一不重复的，那我们之前写的name属性就派上用场了

现在就实现了页面跳转缓存，并且在router.js中配置就可以控制了

还有一个种方式就是使用keep-alive标签的include属性

原文：

这样写好像更优雅一点

这个方法有一点需要注意一下，keep-alive标签的include属性是根据组件的name判断的，所以index.vue和list.vue等页面vue文件里一定要写上名字，并且与router.js中使用的name一样

比如index.vue，定义name是index

页面缓存后，再次进入页面，那么它的mounted之类的生命周期函数是不会再次调用的，

这时候可以取消页面缓存，就是把这个页面配置meta时，把keepAlive设置为false

还有一种方式可以监听路由的变化，

这样缓存后，再次进页面就会触发侦听，就可以根据this.$route判断，然后做一些操作

关于keepAlive的内容就是这些了

浅谈vue项目进阶开发-vuex篇

1.vuex的优缺点

2..vuex的使用

先上目录结构：

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（操作数据的指令）

处理数据，操作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this.$store.commit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些操作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutations.js文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1.js

mod2.js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3.vuex的注意点

a.在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b.使用vuex我们在组件内更改数据是无效的。例如：this.$store.state.name=‘小明‘，这么做会报错。

【Vue进阶】手把手教你在 Vue 中使用 JSX

JSX 是一种 Javascript 的语法扩展， JSX = Javascript + XML ，即在 Javascript 里面写 XML ，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性

有时候，我们使用渲染函数（ render function ）来抽象组件，渲染函数不是很清楚的参见 官方文档 , 而渲染函数有时候写起来是非常痛苦的

其对应的模板是下面：

这显然是吃力不讨好的，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX ，需要使用 Babel 插件 ，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧

快读创建一个 Vue 项目，直接使用 vue-cli 创建一个项目：

安装依赖：

配置 .babelrc ：

这里展示在 Vue 中书写一些基础内容，包括纯文本、动态内容、标签使用、自定义组件的使用，这些跟我们平时使用单文件组件类似，如下所示：

Attributes 的绑定跟普通的 HTML 结构一样

注意，如果动态属性，之前是 v-bind:placeholder="this.placeholderText" 变成了 placeholder={this.placeholderText}

我们也可以展开一个对象

像 input 标签，就可以如下批量绑定属性

插槽的入门可以看我的另外一篇文章

我们来看下怎么实现具名插槽和作用域插槽

具名插槽 ：父组件的写法和单文件组件模板的类似，通过 slot="header" 这样方式指定要插入的位置。子组件通过 this.$slots.header 方式指定插槽的名称，其中 header 就是插槽的名称

父组件：

子组件：

作用域插槽 ：子组件中通过 {this.$scopedSlots.test({ user: this.user })} 指定插槽的名称是 test ，并将 user 传递给父组件。父组件在书写子组件标签的时候，通过 scopedSlots 值指定插入的位置是 test ，并在回调函数获取到子组件传入的 user 值

父组件：

子组件：

常见的指令如下所示：

函数式组件是一个无状态、无实例的组件，详见 官网说明 ，新建一个 FunctionalComponent.js 文件，内容如下：

父组件中调用如下:

本文主要介绍了为什么要在 Vue 中使用 JSX ，以及如何在 Vue 中使用 JSX

希望对大家有所帮助~

Babel Preset JSX

Vue 官方文档

学会使用 Vue JSX, 一车老干妈都是你的

如何在 Vue 中使用 JSX 以及使用它的原因

VUE进阶 - $parent 和 $children

1、ref为子组件指定一个索引名称，通过索引来操作子组件；

2、this.$parent 可以直接访问该组件的父实例或组件；

3、父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。

root 和parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件

vue高级进阶的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue 高阶函数、vue高级进阶的信息别忘了在本站进行查找喔。