vue 函数组件的应用及场景

Posted web-zqk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 函数组件的应用及场景相关的知识,希望对你有一定的参考价值。

解释:函数式组件就是函数是组件

函数式组件与普通组件的区别
1.函数式组件需要在声明组件是指定 functional
2.不需要实例化,所以没有this,this通过render函数的第二个参数来代替
3.没有生命周期钩子函数,不能使用计算属性,watch
4.不能通过$emit 对外暴露事件,调用事件只能通过context.listeners.click的方式调用外部传入的事件
5.因为函数式组件是没有实例化的,所以在外部通过ref去引用组件时,实际引用的是htmlElement
6.函数式组件的props可以不用显示声明,所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都
解析到$attrs里面,并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)

优点
1.由于函数式组件不需要实例化,无状态,没有生命周期,所以渲染性能要好于普通组件 
2.函数式组件结构比较简单,代码结构更清晰


业务场景
比如一些详情页面,列表界面等,它们有一个共同的特点是只需要将外部传入的数据进行展现,不需要有内部状态,不需要在生命周期钩子函数里面做处理,这时候你就可以考虑使用函数式组件。

声明1: 通过JSX的方式

export default {
  // 通过functional属性指定组件为函数式组件
  functional: true,
  // 组件接收的外部属性
  props: {
    avatar: {
      type: String
    }
  },
  /**
   * 渲染函数
   * @param {*} h
   * @param {*} context 函数式组件没有this, props, slots等都在context上面挂着
   */
  render(h, context) {
    const { props } = context
    if (props.avatar) {
      return <img src={props.avatar}></img>
    }
    return <img src="default-avatar.png"></img>
  }
}

该实例中,定义了一个头像组件,如果外部传入头像,则显示传入的头像,否则显示默认头像。上面的代码中大家看到有一个 render 函数,这是Vue中JSX的写法

声明2: 通过template的方法,仅支持Vue2.5+版本
<!--在template 上面添加 functional属性-->
<template functional>
  <img :src="props.avatar ? props.avatar : ‘default-avatar.png‘" />
</template>

<!--注意,可以省略声明props--> 

 

以上是关于vue 函数组件的应用及场景的主要内容,如果未能解决你的问题,请参考以下文章

Vue 开发实战基础篇 # 10:生命周期的应用场景和函数式组件

vue面试题总结

vue自定义指令及应用场景

vue的相关执行钩子函数及父子组件钩子函数的执行顺序

vue递归组件的一些理解

Vue中 事件总线(eventBus)详解及使用