美文网首页
对vue组件化的理解

对vue组件化的理解

作者: JJWANNA1 | 来源:发表于2020-04-12 17:16 被阅读0次

组件化定义、优点、使用场景和注意事项等方面展开陈述,同时要强调vue中组件化的一些特点。

  • 源码分析1:组件定义
// 组件定义 
Vue.component('comp', {
    template: '<div>this is a component</div>'
})

组件定义,src\core\global-api\assets.js

<template>
    <div>
        this is a component
    </div>
</template>

vue-loader会编译template为render函数,最终导出的依然是组件配置对象

  • 源码分析2:组件化优点
    lifecycle.js - mountComponent()
    组件、Watcher、渲染函数和更新函数之间的关系

  • 源码分析3:组件化实现
    构造函数,src\core\global-api\extend.js
    实例化及挂载,src\core\vdom\patch.js - createElm()

总结

  1. 组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一,它使开发者使用小型、独立和通常可复用的组件构建大型应用;
  2. 组件化开发能大幅提高应用开发效率、测试性、复用性等;
  3. 组件使用按分类有 :页面组件、业务组件、通用组件;
  4. vue的组件是基于配置的,我们通常编写的组件是组件配置而非组件,框架后续会生成其构造函数,它们基于VueComponent,扩展于Vue;
  5. vue中常见组件化技术有: 属性prop,自定义事件,插槽等,它们主要用于组件通信、扩展等;
  6. 合理的划分组件,有助于提升应用性能;
  7. 组件应该是高内聚、低耦合的;
  8. 遵循单向数据流的原则。

相关文章

  • 对vue组件化的理解

    组件化定义、优点、使用场景和注意事项等方面展开陈述,同时要强调vue中组件化的一些特点。 源码分析1:组件定义 组...

  • Vue.js框架的理解

    面试官:聊聊对Vue.js框架的理解 分享目标: 了解 Vue.js 的组件化机制 了解 Vue.js 的响应式系...

  • 从0开始探究vue-组件化-组件之间传值

    理解 Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用 什么是组件化 组件化,就像一个电脑主机里的...

  • 「vue 组件通信一」组件间通信、数据传递(父子组件,同级组件)

    总结一下对vue组件通信的理解和使用。 一、组件目录结构 父组件:app.vue 子组件:page1.vue 子组...

  • vue组件化的理解?

    组件是独立和可复用性的代码组织.组件系统是 Vue 核心特性.它可以是开发者使用小型化独立和可复用的组件构建大型应...

  • Vue 组件

    对组件的理解 : 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,...

  • vue 复习1

    一、如何理解vue:vue是一款组件化,数据驱动的mvvm框架 二、 vue安装:vue提供了脚手架,方便开发者开...

  • 谈谈前端组件化

    一、什么是组件化 什么是组件化?不同的人对组件化有着不同理解,我理解的组件化是一种编程思想,是一种拆分代码的方式。...

  • Vue之组件化理解

    组件系统是 Vue 的一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任...

  • 2. vue 原理

    1. 组件化基础 1.1 如何理解 VUE 的 MVVM 模型?知识点: 数据驱动试图 传统组件,只是静态渲染,更...

网友评论

      本文标题:对vue组件化的理解

      本文链接:https://www.haomeiwen.com/subject/zjrbmhtx.html