Vue extend使用示例深入分析_vue.js_

Vue.extend()虽然已近用过很多次了，但都没有深入思考过这个东西，仔细想了想，有点意思

一、使用场景

按需使用组件，也叫懒加载，性能蹭蹭往上走

扩展的组件，其自由度高到你无法想象

二、补充组件注册

平日里，我们使用组件：

黄金玩家：

 import A from "./A.vue"; export default { components: { A }, }

铂金玩家

import Vue from "vue" import A from "./A" Vue.component("A", A) 

钻石玩家

import Vue from "vue"; // 检索目录下的模块 const req = require.context(".", true, /\.vue$/); req.keys().forEach(fileName => { // require模块 const componentConfig = req(fileName); const name = fileName.name || fileName.replace(/^\.\/(.*\/)?/, "").replace(/\.vue$/, ""); Vue.component(name, componentConfig.default || componentConfig); });

王者玩家

不必多说，今日主角！闪亮登场！

 // 创建一个构造器 const Constructor = Vue.extend(test); // 利用构造函数创建实例 //创建过程中可 向组件中传入数据 const instance = new Constructor({ propsData:{ age:'23' } }); // instance.age = 29 // 挂载到某个dom上 instance.$mount(this.$refs.container)

三、深度解析

聊聊天

为什么我会对其赞不绝口，我收了钱吗？也有可能。

回归正题，开始聊这个之前先提一下vue的工作机制，尤其是cli的打包运作。在项目完成后，执行命令打包，只会将项目里用到的 .vue、.js、.css、.json、.svg等等文件进行打包，所以如果你是从老项目迁移开发，原本几百兆的文件夹，打包后可能只有十几二十兆，当然这需要你的懒加载做的比较好。

上面说的还是有点抽象，说点我们能感知到的。假设你写了下面这么一个组件test.vue，但是你脑子转太快了，以至于手速都跟不上，所以，你犯错了，age没定义你就使用了，那势必会报错对吧？其实并不会，你不导入，不使用它，一点事情没有，它只会在那错下去孤独终老。

亮点是什么呢？这里的test组件的prop可以直接去掉：

父组件中以实例属性形式网上挂接数据，自由度真的太高了！！！这样运用起来，可以封装出意想不到的组件库。现在主流UI库的很多巧妙逻辑都是使用了，Vue.extend(),只不过是搭配上函数对懒加载进行控制

到此这篇关于Vue extend使用示例深入分析的文章就介绍到这了,更多相关Vue extend内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！