经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue extend使用示例深入分析
来源:jb51  时间:2022/8/23 13:27:07  对本文有异议

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

一、使用场景

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

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

二、补充组件注册

平日里,我们使用组件:

黄金玩家:

  1. <template>
  2. <A/>
  3. </template>
  4. import A from "./A.vue";
  5. export default {
  6. components: {
  7. A
  8. },
  9. }

铂金玩家

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

钻石玩家

  1. import Vue from "vue";
  2. // 检索目录下的模块
  3. const req = require.context(".", true, /\.vue$/);
  4. req.keys().forEach(fileName => {
  5. // require模块
  6. const componentConfig = req(fileName);
  7. const name =
  8. fileName.name ||
  9. fileName.replace(/^\.\/(.*\/)?/, "").replace(/\.vue$/, "");
  10. Vue.component(name, componentConfig.default || componentConfig);
  11. });

王者玩家

不必多说,今日主角!闪亮登场!

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

三、深度解析

聊聊天

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

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

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

  1. <template>
  2. <div class="container">
  3. 我是扩展,挂接外面的div的组件啦
  4. <div>{{ age }}</div>
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {};
  11. }
  12. };

但是你只要一导入,使用,立马报错:

再次回到刚刚那个点:你不引入它,就不会报错。那按需引入,使用到才引入,有没有一种办法,我使用的时候再传age给test组件呢?岂不是美哉?Vue.extend()就可以完美做到!

再浅谈一下Vue.extend()是个啥

他也不是什么特别高大上的东西,官方说是个继承构造器,讲人话就是构造函数。通过构造函数可以实例化对象,这个构造函数很特殊,他是Vue构造函数的子构造函数,继承与Vue的Constructor(),所以理所当然的,他的参数就与Vue的参数一样:

上个例子瞧瞧

子组件声明props接收

  1. <template>
  2. <div class="container">我是扩展,挂接外外面的div的组件啦
  3. <div>{{age}}</div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. age: {
  10. type: String,
  11. default: ""
  12. }
  13. }
  14. };

父组件用extend控制实例化这个对象并挂载到对应DOM上,可以使用propData进行传值

  1. <template>
  2. <div ref="container" class="container">
  3. </div>
  4. </template>
  5. <script>
  6. import Vue from "vue";
  7. import test from "./components/Vue.extend/test";
  8. export default {
  9. mounted() {
  10. // 创建一个构造器
  11. const Constructor = Vue.extend(test);
  12. // 利用构造函数创建实例
  13. //创建过程中可 向组件中传入数据
  14. const instance = new Constructor({
  15. propsData:{
  16. age:'23'
  17. }
  18. });
  19. // 挂载到某个dom上
  20. instance.$mount(this.$refs.container)
  21. },
  22. methods: {}
  23. };
  24. </script>

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

  1. <template>
  2. <div class="container">我是扩展,挂接外外面的div的组件啦
  3. <div>{{age}}</div>
  4. </div>
  5. </template>

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

  1. <template>
  2. <div ref="container" class="container">
  3. </div>
  4. </template>
  5. <script>
  6. import Vue from "vue";
  7. import test from "./components/Vue.extend/test";
  8. export default {
  9. mounted() {
  10. // 创建一个构造器
  11. const Constructor = Vue.extend(test);
  12. // 利用构造函数创建实例
  13. //创建过程中可 向组件中传入数据
  14. const instance = new Constructor();
  15. //可以直接以属性方式挂接到实例上
  16. instance.age = 29
  17. // 挂载到某个dom上
  18. instance.$mount(this.$refs.container)
  19. },
  20. };
  21. </script>

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号