Vue要点整理

王明鹏

已于 2022-09-07 17:24:14 修改

阅读量256

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-07 14:17:50 首次发布

本文链接：https://blog.csdn.net/cfnwmp/article/details/126740781

版权

一、keep-alive应用

      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>

场景：在 SPA 应用中用户希望在 Tab 多个页面来回切换的时候，不要丢失查询的结果，关闭后清除缓存。

原理：

1.路由配置name，且对应路由组件的name和路由name要一致，meta对象内添加noCache：true判断该页面是否需要缓存；

2.在一级的router-view组件内，监听$route,获取路由name，调用方法，push到vuex内的cacheViews数组；

3.keep-alive组件的include属性接收这个cacheView，将加载后的组件实例存储在内存中，用空间换取加载速度；

二、vue性能优化

加载和引入：

1.路由组件按需加载，使用import、webpack的require、ensure，只有在访问路由的时候才去加载；

2.体积较大插件按需加载，比如element ui；

import { createApp } from 'vue';
import { Button, Select } from 'element-plus';

const app = createApp()
app.use(Button)
app.use(Select)

3.需要切换的组件使用keep-alive缓存，可以避免组件重复创建，并且能保持状态；

列表优化：

1.长列表渲染优化，按照可视区域展示，使用插件recycleScroller优化；

2.图片懒加载，v-lazt=src；

3.v-once对不再变化的数据进行处理，vue3的v-memo对列表进行按需更新；

服务器渲染，ssr

开发习惯

1.v-show和v-if根据视图是否需要频繁切换来使用；

2.v-if和v-for不要在一起使用；

3.v-for的时候带key；

4.对数据进行懒处理，Object.freezeing；

5.对经常较重的状态组件进行拆分，静态组件无需过分拆分；

6.vue组件销毁的时候会销毁自身的监听，但挂载在全局的定时器等需要手动销毁；

7.合理使用computed

三、从0构架vue项目

主要分为项目构建，引入插件，代码规范和提交规范，目录初始化，组件、方法、指令封装；、

1.使用vue脚手架创建项目；

2.分析项目需求引入路由、状态、请求管理工具、ui库，以及常用插件nprogress、vueuse、loadash、moment等；

3.约定好基本代码规范和提交规范；

4.初始化目录结构；

5.封装公用配置、方法、指令、组件等，开始开发。

四、对vuex理解以及项目中的vuex怎么用的

vuex是和vue深度绑定的状态管理工具，采用集中并且可预见的方式去管理项目中的状态。

在vue开发中，当项目较大，一般的状态管理变得难以控制，任意组件都可能去修改状态，而vuex规定了一套修改逻辑，让数据修改按照固定模式，使得在状态管理层面，vue可以胜任大型项目；

具体实现上，vuex规定state中存储响应式数据，moutation中的方法修改state里面的数据，actions中的方法可以异步调用moutations里面方法修改state，getters则按需去处理暴露state的数据，modules可以复杂的状态进行拆分管理；各组件使用commit、dispatch，或者map函数映射到计算属性或方法里面在组件内调用，有命名空间还需要增加命名的前缀。

在项目中以modules方式使用，主要承担基础功能，模块分为app、settings、permission、tagsView、user，作为权限、动态路由、页面缓存、用户信息的状态管理。

vuex是vue专用的状态管理库。它以全局方式集中管理应用的状态，并且可以保证状态变更的可预测性。
vuex主要解决的问题是多组件之间状态共享的问题，利用各种组件通信方式，我们虽然能够做到状态共享，但是往往需要在多个组件之间保持状态的一致性，这种模式很容易出现问题，也会使程序逻辑变得复杂。vuex通过把组件的共享状态抽取出来，以全局单例模式管理，这样任何组件都能用一致的方式获取和修改状态，响应式的数据也能够保证简洁的单向数据流动，我们的代码将变得更结构化且易维护。
vuex并非必须的，它帮我们管理共享状态，但却带来更多的概念和框架。如果我们不打算开发大型单页应用或者我们的应用并没有大量全局的状态需要维护，完全没有使用vuex的必要。一个简单的store 模式就足够了。反之，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：Flux 架构就像眼镜：您自会知道什么时候需要它。
我在使用vuex过程中有如下理解：首先是对核心概念的理解和运用，将全局状态放入state对象中，它本身一棵状态树，组件中使用store实例的state访问这些状态；然后有配套的mutation方法修改这些状态，并且只能用mutation修改状态，在组件中调用commit方法提交mutation；如果应用中有异步操作或者复杂逻辑组合，我们需要编写action，执行结束如果有状态修改仍然需要提交mutation，组件中调用这些action使用dispatch方法派发。最后是模块化，通过modules选项组织拆分出去的各个子模块，在访问状态时注意添加子模块的名称，如果子模块有设置namespace，那么在提交mutation和派发action时还需要额外的命名空间前缀。
vuex在实现单项数据流时需要做到数据的响应式，通过源码的学习发现是借用了vue的数据响应化特性实现的，它会利用Vue将state作为data对其进行响应化处理，从而使得这些状态发生变化时，能够导致组件重新渲染。