在 2.5.0 及以上版本中,如果你使用了单文件组件,那么基于模板的函数式组件可以这样声明:

<template functional>
<div class="cell">
<div v-if="props.value" class="on"></div>
<section v-else class="off"></section>
</div>
</template> <script>
export default {
props: ['value']
}
</script>

我们标记组件为 functional,这意味它是无状态 (没有响应式数据),无实例 (没有 this 上下文)。

提示:函数式组件比普通组件性能更好,缺点是定义的数据没有响应式。

【vue】函数式组件的更多相关文章

  1. Vue 函数式组件 functional

    函数式组件 无状态 无法实例化 内部没有任何生命周期处理函数 轻量,渲染性能高,适合只依赖于外部数据传递而变化的组件(展示组件,无逻辑和状态修改) 在template标签里标明functional 只 ...

  2. Vue函数式组件的应用

    一.函数式组件和普通组件的区别 渲染快 没有实例,意味着没有(this) 没有生命周期(没有响应式数据) 二.组件函数的使用 1. 以局部组件为例,将组件标记为 functional=ture; 因为 ...

  3. vue函数式组件详解

    本篇将详细介绍vue组件化之函数式组件,会用到以下api: Vue.component().Vue.extend().$createElement.patch(). 从事vue开发的小伙伴,平时组件化 ...

  4. Vue.js 源码分析(三十) 高级应用 函数式组件 详解

    函数式组件比较特殊,也非常的灵活,它可以根据传入该组件的内容动态的渲染成任意想要的节点,在一些比较复杂的高级组件里用到,比如Vue-router里的<router-view>组件就是一个函 ...

  5. 渲染函数render和函数式组件

    vnode对象 vnode对象包括(vnode并不是vue实例,而是vue实例中渲染函数render执行后生成的结果) this.tag = tag // 当前节点标签名 this.data = da ...

  6. Vuejs函数式组件,你值得拥有(1)

    函数式组件在React社区很流行使用,那么在vue里面我们要怎么用呢 下面会涉及到的知识点: 高阶函数.状态.实例.vue组件 什么是函数式组件 我们可以把函数式组件想像成组件里的一个函数,入参是渲染 ...

  7. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  8. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  9. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

随机推荐

  1. 关于Xcode10的那些事

    前言 这里主要介绍一下Xcode10 版本主要更新的内容. 随着iOS12的发布,Xcode10已经可以从Mac App Store下载. Xcode10包含了iOS12.watchOS 5.macO ...

  2. 性能测试中TPS上不去的几种原因浅析

    转:https://www.cnblogs.com/imyalost/p/8309468.html 下面就说说压测中为什么TPS上不去的原因: 1.网络带宽 在压力测试中,有时候要模拟大量的用户请求, ...

  3. Collections算法类

    Collections类定义了一系列用于操作集合的静态方法. 常用方法: 1.sort():排序(默认是升序排列,降序实现方法) 如果ArrayList的泛型指定为String int等类型,可以通过 ...

  4. Spring项目定时任务

    最近某协会网站有个需求:显示当天访问量,很明显需要做俩步:一个是访问请求量的显示,一个需要每天00点恢复访问次数为0 所以需要做个定时任务:每天00点更新: 注解用法Spring配置: 1.在spri ...

  5. 安装 VMware CentOS Xmanager Xshell

    1.CentOS下载CentOS是免费版,推荐在官网上直接下载,网址:https://www.centos.org/download/DVD ISO:普通光盘完整安装版镜像,可离线安装到计算机硬盘上, ...

  6. js判断iPhone XS、iPhone XS Max、iPhone XR

    // iPhone X.iPhone XS && window.screen.width === && window.screen.height === ; // iP ...

  7. canvas学习笔记,实用知识点总结(上)

    本博客是本人日常学习笔记,作为重要知识点的总结记录,随笔风格可能更倾向于个人的学习习惯和方式,若对您有帮助十分荣幸,若存在问题欢迎互相学习探讨,前端小白一枚在此恭候. 一.基本使用规则 1.创建画布 ...

  8. Java遍历List5种方法的效率对比

    package com.test; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** ...

  9. ZooKeeper连接并创建节点以及实现分布式锁操作节点排序输出最小节点Demo

    class LockThread implements Runnable { private DistributedLock lock; public LockThread(int threadId, ...

  10. javaWeb2之Jsp

    Java Server Page 放在除WEB-INF(放web项目的隐私文件)外的其他任何目录中. Java服务器端网页,实现在HTML页面编写Java代码实现动态内容,一种简化Servlet编写的 ...