资讯专栏INFORMATION COLUMN

vue中extend,mixins,extends,components,install的几个操作

beita / 890人阅读

摘要:前言你知道,用法吗你知道他们的区别吗你知道他们的执行顺序嘛下面都能找到这些答案使用构造器创建一个子类参数是包含组件选项的对象是全局的创建构造器实例传入的数据为对应的标签最外层必须只有一个标签这是扩展的数据创建实例,并挂载到一个元素上。

前言
你知道extend,mixins,extends,components,install用法吗?
你知道他们的区别吗?
你知道他们的执行顺序嘛?
下面都能找到这些答案.
1.Vue.extend

1.使用vue构造器,创建一个子类,参数是包含组件选项的对象;
2.是全局的

// 创建构造器
var Profile = Vue.extend({
  template: "

{{extendData}}
实例传入的数据为:{{propsExtend}}

",//template对应的标签最外层必须只有一个标签 data: function () { return { extendData: "这是extend扩展的数据", } }, props:["propsExtend"] }) // 创建 Profile 实例,并挂载到一个元素上。可以通过propsData传参. new Profile({propsData:{propsExtend:"我是实例传入的数据"}}).$mount("#app-extend")

结论:
Vue.extend实际是创建一个构造器,对应的初始化构造器,并将其挂载到标签上

github源码,请戳这里 ,欢迎star

2.Vue.component

1.将通过 Vue.extend 生成的扩展实例构造器注册(命名)为一个全局组件,参数可以是Vue.extend()扩展的实例,也可以是一个对象(会自动调用extend方法)
2.两个参数,一个组件名,一个extend构造器或者对象

//1.创建组件构造器
  var obj = {
    props: [],
    template: "

{{extendData}}

",//最外层只能有一个大盒子,这个和对应规则一致 data: function () { return { extendData: "这是Vue.component传入Vue.extend注册的组件", } }, }; var Profile = Vue.extend(obj); //2.注册组件方法一:传入Vue.extend扩展过得构造器 Vue.component("component-one", Profile) //2.注册组件方法二:直接传入 Vue.component("component-two", obj) //3.挂载 new Vue({ el: "#app" }); //获取注册的组件 (始终返回构造器) var oneComponent=Vue.component("component-one"); console.log(oneComponent===Profile)//true,返回的Profile构造器
3.mixins

值可以是一个混合对象数组,混合实例可以包含选项,将在extend将相同的选项合并
mixins代码:

    var mixin={
    data:{mixinData:"我是mixin的data"},
    created:function(){
      console.log("这是mixin的created");
    },
    methods:{
      getSum:function(){
        console.log("这是mixin的getSum里面的方法");
      }
    }
  }

  var mixinTwo={
    data:{mixinData:"我是mixinTwo的data"},
    created:function(){
      console.log("这是mixinTwo的created");
    },
    methods:{
      getSum:function(){
        console.log("这是mixinTwo的getSum里面的方法");
      }
    }
  } 

  var vm=new Vue({
    el:"#app",
    data:{mixinData:"我是vue实例的data"},
    created:function(){
      console.log("这是vue实例的created");
    },
    methods:{
      getSum:function(){
        console.log("这是vue实例里面getSum的方法");
      }
    },
    mixins:[mixin,mixinTwo]
  })
  
  //打印结果为:
  这是mixin的created
  这是mixinTwo的created
  这是vue实例的created
  这是vue实例里面getSum的方法

结论:
1.mixins执行的顺序为mixins>mixinTwo>created(vue实例的生命周期钩子);
2.选项中数据属性如data,methods,后面执行的回覆盖前面的,而生命周期钩子都会执行

3.extends

extends用法和mixins很相似,只不过接收的参数是简单的选项对象或构造函数,所以extends只能单次扩展一个组件

var extend={
    data:{extendData:"我是extend的data"},
    created:function(){
      console.log("这是extend的created");
    },
    methods:{
      getSum:function(){
        console.log("这是extend的getSum里面的方法");
      }
    }
  }

  var mixin={
    data:{mixinData:"我是mixin的data"},
    created:function(){
      console.log("这是mixin的created");
    },
    methods:{
      getSum:function(){
        console.log("这是mixin的getSum里面的方法");
      }
    }
  }
  
    
  var vm=new Vue({
    el:"#app",
    data:{mixinData:"我是vue实例的data"},
    created:function(){
      console.log("这是vue实例的created");
    },
    methods:{
      getSum:function(){
        console.log("这是vue实例里面getSum的方法");
      }
    },
    mixins:[mixin],
    extends:extend
  })
  
  //打印结果
  这是extend的created
  这是mixin的created
  这是vue实例的created
  这是vue实例的getSum里面的方法

结论:
1.extends执行顺序为:extends>mixins>mixinTwo>created
2.定义的属性覆盖规则和mixins一致

4.components

注册一个局部组件

//1.创建组件构造器
  var obj = {
    props: [],
    template: "

{{extendData}}

",//最外层只能有一个大盒子,这个和对应规则一致 data: function () { return { extendData: "这是component局部注册的组件", } }, }; var Profile = Vue.extend(obj); //3.挂载 new Vue({ el: "#app", components:{ "component-one":Profile, "component-two":obj } });
5.install

1.是开发vue的插件,这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象(可选)
2.vue.use方法可以调用install方法,会自动阻止多次注册相同插件

 var MyPlugin = {};
  MyPlugin.install = function (Vue, options) {
    // 2. 添加全局资源,第二个参数传一个值默认是update对应的值
    Vue.directive("click", {
      bind(el, binding, vnode, oldVnode) {
        //做绑定的准备工作,添加时间监听
        console.log("指令my-directive的bind执行啦");
      },
      inserted: function(el){
      //获取绑定的元素
      console.log("指令my-directive的inserted执行啦");
      },
      update: function(){
      //根据获得的新值执行对应的更新
      //对于初始值也会调用一次
      console.log("指令my-directive的update执行啦");
      },
      componentUpdated: function(){
      console.log("指令my-directive的componentUpdated执行啦");
      },
      unbind: function(){
      //做清理操作
      //比如移除bind时绑定的事件监听器
      console.log("指令my-directive的unbind执行啦");
      }
    })

    // 3. 注入组件
    Vue.mixin({
      created: function () {
        console.log("注入组件的created被调用啦");
        console.log("options的值为",options)
      }
    })

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log("实例方法myMethod被调用啦");
    }
  }

  //调用MyPlugin
  Vue.use(MyPlugin,{someOption: true })

  //3.挂载
  new Vue({
    el: "#app"
  });
  
6.各个方法之间的关系
Vue.extend和Vue.component是为了创建构造器和组件;
mixins和extends是为了拓展组件;
install是开发插件; 总的顺序关系: Vue.extend>Vue.component>extends>mixins

github源码,请戳这里,欢迎star

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52627.html

相关文章

  • vueextendmixinsextends,components,install几个操作

    摘要:前言你知道,用法吗你知道他们的区别吗你知道他们的执行顺序嘛下面都能找到这些答案使用构造器创建一个子类参数是包含组件选项的对象是全局的创建构造器实例传入的数据为对应的标签最外层必须只有一个标签这是扩展的数据创建实例,并挂载到一个元素上。 前言 你知道extend,mixins,extends,components,install用法吗? 你知道他们的区别吗?你知道他们的执行顺序嘛? 下面...

    沈俭 评论0 收藏0
  • 面试被问到Vue?想进一步提升?那就停下来看一下吧

    摘要:两个对象键名冲突时,取组件对象的键值对。允许声明扩展另一个组件可以是一个简单的选项对象或构造函数,而无需使用。这主要是为了便于扩展单文件组件。 Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在...

    andot 评论0 收藏0
  • Vue extend / component / mixins / extends 的区别

    摘要:父组件在前,子组件在后。,,首先会在子组件里查找,如果没有,才会沿着原型链向上,找父组件中对应的属性。 在segmentfault上看到了一个问题vue.extend, vue.component 区别,突然有些方,好歹也写了几个小vue项目,自己都弄不清楚这些东西... new Vue()、component 首先我们来约定一个选项对象 baseOptions,后面的代码会用到. ...

    Kylin_Mountain 评论0 收藏0
  • vue源码解析-插件入侵机制

    摘要:代码如下核心这里会再次合并一下上的全局的一些指令或则组件或则过滤器到组件的构造函数上最后在内部组件初始化时。会调用这里还是把构造函数的放在了上供后续使用总的来说。将原型指向根构造函数的自然而然就会有的原型上的所有属性和方法。。 插件:聪明的程序员往往希望能更高(tou)效(lan)的完成指定的工作,插件就是按照一定的封装方式,暴露接口。让我们利用这些接口更快捷的实现功能。升职加薪。每个...

    Mike617 评论0 收藏0
  • Vue with typescript

    摘要:想要使用语法的话,配合,这个插件,体验更佳,这个插件在语法中实现了。这种方式最接近的单文件组件的写法,如果一个完善项目从改成,用这种方法很快,只要加上和一些必要的变量类型就好了,然后用包裹就好。不推荐混入用这种方式写,无法实现多继承。 最近尝试了一下 TypeScript,试着把一个 Vue 项目改成了 TypeScript 的,感觉还不错 目前 Vue 和 TypeScript 的配...

    JerryWangSAP 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<