Vue知识体系进阶应用总结

/*styleslightly*/作为前端三大框架之一，vue是前端开发者的必备技能。那么如何系统的学习和掌握vue呢？为此，我对知识体系做了一个简单的总结。请多多包涵，不足之处请指正。喜欢的话可以给个赞哦！本文主要讲述vue开发中的一些高级应用，希望对大家有所帮助。相关推荐总结Vue知识体系基础介绍Vue知识体系实战技巧总结如果plugin是对象，必须提供install方法。如果插件是一个函数，它将被用作安装方法。在调用install方法时，会将Vue作为参数传入。这个方法需要在调用newVue()之前调用。我们在使用插件或者第三方组件库的时候会使用到Vue.use方法，比如importiViewfrom'iview'Vue.use(iView)那么Vue.use到底是做什么的呢？我们看一下源码|(this._installedPlugins=[])if(installedPlugins.indexOf(plugin)>-1){returnthis}//附加参数constargs=toArray(arguments,1)args.unshift(this)if(typeofplugin.install==='function'){plugin.install.apply(plugin,args)}elseif(typeofplugin==='function'){plugin.apply(null,args)}installedPlugins.push(plugin)返回这个}}us从上面可以看出插件参数是一个函数或者一个对象类型。首先，Vue会在已安装的插件列表中寻找这个插件。如果没有，它将安装插件。如果是，它会跳出该函数，这样可以确保只使用该插件。安装一次。然后使用toArray方法将参数改成数组，然后判断插件的install属性是函数，还是插件本身是函数，最后执行plugin.install或plugin方法。举个例子举个实际例子1.写两个插件constPlugin1={install(a){console.log(a)}}functionPlugin2(b){console.log(b)}export{Plugin1,Plugin2}2.导入并使用这两个插件importVuefrom'vue'import{Plugin1,Plugin2}from'./plugins'Vue.use(Plugin1,'parameter1')Vue.use(Plugin2,'parameter2')在这点我们在运行项目代码的时候就可以使用上面两个插件了。Vue.mixin混入（mixins）提供了一种非常灵活的方式来在Vue组件中分发可重用的功能。混合对象可以包含任意组件选项。当组件使用mixin时，mixin的所有选项都将“混合”到组件自己的选项中。1.定义一个mixin.jsexportdefaultmixin{data(){return{name:'mixin'}},created(){console.log('mixin...',this.name);},mounted(){},methods:{//日期转换格式Date(dateTime,fmt='YYYY,MM,DD,HH:mm:ss'){if(!dateTime){return''}moment.locale('zh-CN')dateTime=moment(dateTime).format(fmt)returndateTime}}}2.在vue文件中使用mixinimport'@/mixin'；//importmixinfileexportdefault{mixins:[mixin],//usagedata(){return{userName:"adimin",time:this.formatDate(newDate())//数据源data中的时间这个vue文件是通过引用mixin的方法}}}或者在main.js中全局使用，所有页面都可以使用importmixinfrom'./mixin'Vue.mixin(mixin)MergeOptions当组件和mixins有选项的时候同名，这些选项将以适当的方式“合并”。内部会递归合并数据对象，当发生冲突时，组件数据优先。同名的钩子函数会合并到一个数组中，所以都会被调用。mixin的钩子将在组件自己的钩子之前被调用。值为对象的选项，如方法、组件和指令，将被合并到同一个对象中。当两个对象的键名冲突时，取组件对象的键值对。Vue.extendVue.extend属于Vue的全局API。它使用基本的Vue构造函数，创建一个“子类”。参数是一个包含组件选项的对象。如下：