vue2的了解

张帆X

已于 2022-10-13 16:51:37 修改

阅读量1k

点赞数 2

分类专栏： vue2 文章标签：前端 vue.js

于 2022-09-19 09:42:31 首次发布

本文链接：https://blog.csdn.net/weixin_67490903/article/details/126873982

版权

vue2 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

目录

前言
一、性能优化
二、vue
总结

一、性能优化

1.尽可能拆分组件，利用组件的可复用性，组件的按需加载。

2.keep-live和v-once的使用。

3.混入mixin的使用。

4.vuex的使用。

5.合理使用v-if和v-show。

6.防抖和节流的使用，进行少执行和不执行。

7.使用第三方组件的按需加载。

8.图片懒加载。

9.路由懒加载。

10.抽取出共同的样式放在global.css中，共同的方法。

二、vue

1.keep-live

keep-live是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

<keep-alive>
  <component>
    <!-- 该组件将被缓存！ -->
  </component>
</keep-alive>

2.vuex

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

其中vuex包括

1.state：存放数据。

2.mutations：保存所有方法，用来改变state的数据。（commit触发，同步操作）

3.actions：暴露给用户使用，借此触发mutations中的方法，保存数据（dispatch触发，可执行异步操作）。

4.getters：相当于computed是计算属性，在数据展示前进行一些变化处理，具有缓存功能，能够提高运行效率。

5.modules：模块化，拆分为多个数据空间。（注意用namespaced命名空间，防止模块之间数据的混肴）。

3.v-once

作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

如果只想页面加载时显示一次，后续不在因为数据信息的变动而变动时，就可以采取v-once实现。

<span v-once>{{msg}}</span>

4.mixin

https://blog.csdn.net/weixin_67490903/article/details/126372931

5.v-if和v-show

v-if和v-show这两个指令都可以用来控制元素的可见/不可见。

v-if有更高的切换开销（销毁~重建）而v-show有更高的初始渲染开销：不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换它操作的display:none/block属性。如果在运行时条件很少改变，则使用 v-if 较好。

v-show适合做纯页面的交互，例如：抽屉菜单，折叠面板等；v-if适合结合v-else来根据不同的逻辑展示内容，例如用户登录之后根据权限不同来展示不同类型的头像图标。

在vue2中v-if必须写在v-for的上一级标签中。v-for优先级要比v-if高。

在vue3中v-if优先级要高于v-for。

6.防抖和节流

防抖和节流都是用来控制某个函数在一定时间内触发次数，两者都是为了减少触发频率，以便提高性能或者说避免资源浪费。

1.防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

比如说，你转行做外卖员，某天你接到一个订单，准备送，但是感觉不划算，于是准备等一分钟在送，如果这一分钟内有了新的一单，你还会在重新等一分钟，直到一分钟内没有新订单，你才开始配送。

2.节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

比如一个按钮，在一分钟内，不管你点了多少次，在这个时间内，只会算作一次请求。

7.promise

promise是异步编程的一种解决方案，可以解决回调地狱。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

promise本身是同步的，他的.then和.catch是异步微任务。

利用async和await可以直接获取promise成功状态的值。使用await外面必须要有async。

错误捕捉用try.catch。

8.freeze冻结数据

http://t.csdn.cn/PZq62

9.http状态码

http://t.csdn.cn/JJl0P

10.重绘和回流

重绘：简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。

回流：当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。display:none是样式改变，也会改变页面布局，属于回流。

重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
不管怎么说都是会影响性能。