08.09.10.11

我妻丿善逸
101 阅读5分钟

08filter过滤器

参见官网文档：cn.vuejs.org/v2/guide/fi…

过滤器是一个函数，对一些数据进行处理后返回数据，比如对数据首字母大写

09作用域插槽

参见官网文档：cn.vuejs.org/v2/guide/co…

属性：

  • $slots：用于访问父组件传递的普通插槽中的vnode
  • $scopedSlots：用于访问父组件传递的所有用于生成vnode的函数（包括默认插槽在内）//让父组件可以获取到子组件的数据
  • Error对象不是响应式的，需要响应时可将其转换为普通对象
  • mounted() {

​ console.log("slots",this.slots", this.slots);//拿到普通插槽

​ console.log("scopedSlots",this.scopedSlots", this.scopedSlots);/拿到所有插槽

},

10过渡和动画

内置组件Transition

官网详细文档：cn.vuejs.org/v2/guide/tr…

时机

Transition组件（不会生成元素）会监控slot中唯一根元素的出现和消失，并会在其出现和消失时应用过渡效果

具体的监听内容是：

  • 它会对新旧两个虚拟节点进行对比，如果旧节点被销毁，则应用消失效果，如果新节点是新增的，则应用进入效果
  • 如果不是上述情况，则它会对比新旧节点，观察其v-show是否变化，true->false应用消失效果，false->true应用进入效果

流程

类名规则：

  1. 如果transition上没有定义name，则类名为v-xxxx,加appear则页面最开始渲染就会有动画

  2. 如果**「transition」没有设置「name」**，则直接使用默认的v-前缀即可。

    .v-enter-active, .v-leave-active
.v-enter, .v-leave-to

  3. 如果transition上定义了name，则类名为name-xxxx

  4. => .name-enter-active, .name-leave-active => .name-enter, .name-leave-to

  5. 如果指定了类名，直接使用指定的类名

指定类名见：自定义过渡类名

1. 进入效果

2. 消失效果

vue 动态组件用于实现在指定位置上，动态加载不同的组件，核心代码为：

<component :is="componentTag"></component>

过渡组

Transision可以监控其内部的单个dom元素的出现和消失，并为其附加样式

如果要监控一个dom列表，就需要使用TransitionGroup组件，会生成元素

它会对列表的新增元素应用进入效果，删除元素应用消失效果，对被移动的元素应用v-move样式

被移动的元素之所以能够实现过渡效果，是因为TransisionGroup内部使用了Flip过渡方案 ////////////////////////

11优化：

使用key

对于通过循环生成的列表，应给每个列表项一个稳定且唯一的key，这有利于在列表变动时，尽量少的删除、新增、改动元素

使用冻结的对象

冻结的对象不会被响应化

使用函数式组件

写法很简单，模板加上functional，导出 functional: true，使用时要带上props

参见函数式组件

使用计算属性

如果模板中某个数据会使用多次，并且该数据是通过计算得到的，使用计算属性以缓存它们

非实时绑定的表单项

当使用v-model绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据，从而导致vue发生重渲染（rerender），这会带来一些性能的开销。

特别是当用户改变表单项时，页面有一些动画正在进行中，由于JS执行线程和浏览器渲染线程是互斥的，最终会导致动画出现卡顿。

我们可以通过使用lazy或不使用v-model的方式解决该问题，但要注意，这样可能会导致在某一个时间段内数据和表单项的值是不一致的。

保持对象引用稳定

在绝大部分情况下，vue触发rerender的时机是其依赖的数据发生变化

若数据没有发生变化，哪怕给数据重新赋值了，vue也是不会做出任何处理的

下面是vue判断数据没有变化的源码

// value 为旧值， newVal 为新值
if (newVal === value || (newVal !== newVal && value !== value)) {
  return
}

因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。

对于原始数据类型，保持其值不变即可

对于对象类型，保持其引用不变即可

从另一方面来说，由于可以通过保持属性引用稳定来避免子组件的重渲染，那么我们应该细分组件来尽量避免多余的渲染

使用v-show替代v-if

对于频繁切换显示状态的元素，使用v-show可以保证虚拟dom树的稳定，避免频繁的新增和删除元素，特别是对于那些内部包含大量dom元素的节点，这一点极其重要

关键字：频繁切换显示状态、内部包含大量dom元素

使用延迟装载（defer）

首页白屏时间主要受到两个因素的影响：

  • 打包体积过大

    巨型包需要消耗大量的传输时间，导致JS传输完成前页面只有一个<div>，没有可显示的内容

  • 需要立即渲染的内容太多

    JS传输完成后，浏览器开始执行JS构造页面。

    但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏

打包体积过大需要自行优化打包体积，本节不予讨论

本节仅讨论渲染内容太多的问题。

一个可行的办法就是延迟装载组件，让组件按照指定的先后顺序依次一个一个渲染出来

延迟装载是一个思路，本质上就是利用requestAnimationFrame事件分批渲染内容，它的具体实现多种多样

使用keep-alive

后续讲解

长列表优化

后续讲解

avatar
文章
阅读
粉丝