两种形式输出结果一致，同是创建一个 Vue 子类，但在书写组件选项如 props，mixin 时，有些不同。特别是当你使用 Vue.extend() 时，为了让 TypeScript 正确推断类型，你将不得不做一些额外的处理。接下来，我们来聊一聊它们的细节差异。
调用createElement方法，第一个参数是 vm 实例自身，剩余的参数原封不动的透传。
官网上关于组件继承分为两大类，全局组件和局部组件。无论哪种方式，最核心的是创建组件，然后根据场景不同注册组件。
---- 声明 🔊 本文是开始学习 Vue 源码的第二篇笔记，当前的版本是 2.6.14 。如果对你有一点点帮助，请点赞鼓励一下，如果有错误或者遗漏，请在评论区指出，非常感谢各位大佬。 🔊 代码基本上是逐行注释，由于本人的能力有限，很多基础知识也进行了注释和讲解。由于源码过长，文章不会贴出完整代码，所以基本上都是贴出部分伪代码然后进行分析。 🔊 从本篇文章开始，可能会出现暂时看不懂的地方，是因为还没有学习前置知识，不必惊慌，只需知道存在这样一个知识点，接着向下看，看完了前置知识，回过头来再看这里就一目了
【组件需要复用（不是复制粘贴），也就是一个组件，你用了，一天，你用到页面另一个地方，还改了，那么前一个地方的数据可能就变了】
创建组件 组件配置不能使用el,组件由vm管理 data必须写为函数形式，保证每个组件实例的data独立 const student = Vue.extend({ name:'student', // 可选，此名称会影响开发者工具中呈现的名称 template: ` {{ name }}-{{ age }} `, data() { return { name: '', age:
关系：vue构造->vue组件->vue实例 也就是说不同的vue组件可以共用同一个vue构造，不同的vue实例可以共用同一个vue组件
最近参与了一个Vue.js项目，项目中需要能够以编程方式创建组件。通过编程，意思是使用JavaScript创建和插入组件，而无需在模板中编写任何内容。
需要注意的是，如果未定义初始值，则类属性将不会是相应式的，这意味着不会检测到属性的更改：
文章篇幅较长， 建议花整块时间阅读分析。 另外由于篇幅过长， 本文分三篇文章产出， 便于大家理解与阅读。
但这样使用并不能满足我们的需求 可以通过js直接调用方法来显示关闭 loading可以将整个页面全部遮罩起来 通过Vue.extend将组件转换为全局组件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
Vue是一款流行的JavaScript框架，它提供了一个强大的组件系统，使开发者能够轻松构建可复用和可维护的应用程序。本文将介绍Vue组件系统的原理，并结合实际示例和相关源码解析，帮助读者更好地理解和应用Vue组件。
一、如何定义一个组件？ 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别； 区别如下： 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。 备注：使用template可以配置组件结构。
组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树：
遇到一大堆复杂的问题时，直接上手解决的话是非常困难的。面对这种情况，我们可以将这个大问题细分成许多小问题，逐一的去研究解决这些小问题，累积下来，这个大问题也会被我们解决。
结论: Vue.extend实际是创建一个构造器,对应的初始化构造器,并将其挂载到标签上
将一个页面拆分成一个个小的功能块，每个功能块完成自己独立的功能，这样在之后的页面维护和管理就会方便许多。
由于 _render 和 _update 的过程还是挺复杂的，分成两期。这一期我们就先聊聊 _render 过程。
组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一: 大致可以分成三步 1.在我们引入vue.js之后,Vue会被注册为一个全局对象,我们使用对象本身的方法进行组件的创建 ------使用Vue这个全局对象的component方法进行全局注册一个组件
最近，新项目架构搭建在扩展组件的场景中：图表使用了extends方式，而公共业务server和view之间使用了mixins方式。对于二者的选择，我们通常会解释为extends的优先级高于mixins，但其真实的差异是由于其合并策略不同或者说在合并策略中执行的顺序不同导致的 – 源码
2、 将弹框组件扩展为 Vue 插件，通过 API 的方式进行调用，插件API的调用规则为 vm.$alert('提示消息') 。
每天上班写着重复的代码，当一个cv仔，忙到八九点，工作效率低，感觉自己没有任何提升。如何能更快的完成手头的工作，提高自己的开发效率，在上一篇《绝对干货~！学会这些Vue小技巧，可以早点下班和女神约会了》，小编整理了一些Vue开发技巧，今天小编又整理了一些新的Vue使用技巧。你们先加班，我先下班陪女神去逛街了。
作者：chinamasters https://segmentfault.com/a/1190000025157159
后端路由： 输入url>请求发送到服务器>服务器解析请求的路径>拿取对应的页面>返回回去 前端路由： 输入url>js解析地址>找到对应的地址的页面>执行页面生成的js>看到页面 vue-router工作流程
创建Vue的组件都有三个基本步骤是 【①创建组件构造器、②注册组件和③使用组件】。
各位，你们没有看错，现在是2021年，vue3.0都已经出来很长一段时间了，而本系列将要带各位阅读的是0.11版本，也就是vue最早的正式版本，发布时间大概是六七年前，那时，嗯，太久远，都忘了我那时候在干什么，原因是2.0和3.0已经是一个很完善的框架了，代码量也很大，作为一个没啥源码阅读经验的老菜鸟，我不认为我有这个能力去看懂它，但同时又很想进一步的去看看它的真面目，思来想去，有两种思路，一是找到2.0或3.0的最早提交版本，然后一步一步的看它新增了什么，二是看它的早期版本，众所周知，早期版本一般都比较简单，最后决定先拿最早的版本练练手。
支持：String、Number、Boolean、Array、Object、Date、Function、Symbol
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
我们面对乱麻的时候，当然是快刀斩。面对复杂问题的时候，我们最佳方案就是将问题进行拆解成一个个小问题，然后一个一个的解决。
keep-alive是 Vue 提供的一个内置组件，用来对组件进行缓存——在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
ref 子元素/组件引用 标记html标签时可以获取dom对象 标记组件标签时可以获取组件实例对象 通过id标记只能获取到组件最外层dom对象 <template> <template> <script> export default { ... methods:{ doSomething(){ // 通过VueComponent.$ref获取标记的元素DOM对象/组件实例对象（vc） this.$ref.02
今天就要开启我们 Component 探索之旅，旅途有点长，各位请坐好，不要睡着了
key 是为 Vue 中 vnode 的唯一标记，通过这个 key，diff 操作可以更准确、更快速
2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。
如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
Vue Class Component 是一个可以让你使用Class风格语法编写Vue组件的库. 例如, 下面是一个通过Vue Class Component编写的简单的计数器组件的例子:
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！重学巩固你的Vuejs知识体系，如果有哪些知识点遗漏，还望在评论中说明，让我可以及时更新本篇内容知识体系。欢迎点赞收藏！
“ 最近在学习使用Vue作为前端的框架，本文记录路由插件vue-router，以及搭建登录页面的过程。 ” vue-router 在使用vue-router时，我们需要做的就是把路由映射到各个组件，vue-router会把各个组件渲染到正确的地方。 1 安装、起步 · 安装 npm install vue-router --save · 起步 2 基本用法 · HTML Hello App! 01
不知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码，开始看，一行一行的看下去，看了几行就感觉，“我艹，这什么玩意儿”，然后就看不下去了。如果你有类似的经历，可以看看本文，本文会以几个常见开源库为例讲解几种常见的开源框架的代码架构，从架构出发，帮你轻松读懂框架源码。记住以下两个要点：
官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
一、构造器 1、vm（view model 表示Vue实例），每个Vuejs都是通过构造函数Vue创建Vue的根实例启动 var vm = new Vue({ //传入一个选项对象{}，可以包含数据data（object|function）、模板templete（会完全替代挂载元素，包含挂载元素本身）、方法methods、挂载元素el ( CSS选择器或HTMLElement实例 )、生命周期钩子等 //选项 }); 2、扩展Vue构造器，从而用预定义的选项创建可复用
那你觉得是不是很有意思，咱们new Vue之后，就可以使用他那么多的功能,可见Vue是暴出来的一个一个功能类函数，我们进入源码一探究竟：
mutation中的操作是一系列的同步函数，用于修改state中的变量的的状态。当使用vuex时需要通过commit来提交需要操作的内容。mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
