理解Vue.mixin,利用Vue.mixin正确的偷懒
关于Vue.mixin在vue官方文档中是这么解释的:
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
我们的理解:Vue.mixin给我们提供了一种混入Vue实例的方法,创建了混入对象之后,我们自定义的方法或者变量可以很轻松的挂载在Vue实例上,给我们的偷懒带来方便;
Vue.mixin为我们提供了两种混入方式:局部混入和全局混入;
本文还是以demo形式来进行学习讲解,如果有条件最好还是跟着demo敲一遍,这样印象才会深刻;
局部混入:
顾名思义就是部分混入,也就是只有引入了mixin的混入对象才可以使用,并且只有在引入了mixin混入对象的组件中才生效;
来,知道了概念,我们一起来看看代码:
首先自己搭建Vue的开发环境,然后我们在src目录中新建两个vue文件,分别是page1.vue和page2.vue;
page1.vue
<template> <div>page1的值是:</div> </template> <script> export default { data () { return { } }, } </script> <style scoped> </style>
page2.vue
<template> <div>page2的值是:</div> </template> <script> export default { data () { return { } } } </script> <style scoped> </style>
然后我们修改App.vue
<template> <div id="app"> <button @click="method1">page1</button> <button @click="method2">page2</button> <router-view></router-view> </div> </template> <script> export default { name: 'App', methods:{ method1(){ this.$router.push('/page1'); }, method2(){ this.$router.push('/page2'); } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
在src目录下创建router.js文件,配置路由实现跳转
import Vue from "vue"; import VueRouter from "vue-router"; Vue.use(VueRouter); import page1 from "./page1"; import page2 from "./page2"; const routes=[ {path:"/page1",component:page1}, {path:"/page2",component:page2} ] const router=new VueRouter({ routes }) export default router
最后将路由引入main.js中:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router.js' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
完成上述准备工作之后,我们可以看到现在的页面效果如下:
没有报错,我们开始正式进入学习Vue.mixin:
首先我们在src目录下新建一个名为mixin的文件夹并在mixin文件中创建一个mixin.js文件:
//抛出混入对象,方便外部访问 export const mixin={ data(){ return { number:1 } } }
可以看到我们在混入对象中创建了一个变量,是的,混入对象跟Vue实例的格式是一样的;
然后我们可以将mixin.js引入到我们的page1.vue和page2.vue中
page1.vue
<template> //这里读的值其实是mixin的值,因为这个时候mixin已经混入到vue实例中了 <div>page1的值是:{{number}}</div> </template> <script> //引入mixin.js import {mixin} from "./mixin/mixin" export default { //这里注意:属性名为mixins,值为数组类型 mixins:[mixin], data () { return { } }, } </script> <style scoped> </style>
page2.vue
<template> <div>page2的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } } } </script> <style scoped> </style>
这个时候我们的混入对象已经成功混入到Vue实例中,你们可以点击看看效果,是可以正常运行并且能读取到值的;
现在我们来修改page1.vue的代码:
<template> <div>page2的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } } } </script> <style scoped> </style>
page2不变,再运行可以发现,我们的page1.vue中的值是执行了mounted,所以产生了自增
由此,我们可以知道mixin混入对象的变量是不会共享的;也就是你page1发生了变化,并不会通知mixin进行实时刷新数据,发生的变化只会在page1.vue中生效,不影响其他组件;
现在我们修改mixin.js和page1.vue中的代码:
mixin.js
export const mixin={ data(){ return { number:1 } }, created(){ console.log("mixin混入对象") } }
page1.vue
<template> <div>page1的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { } }, created(){ console.log("这里是page1"); } } </script> <style scoped> </style>
这个时候我们再运行可以发现控制台输出是这个样子的:
是的,mixin混入对象中声明了:如果是同名钩子函数将合并为一个数组,因此都被调用,但是混入对象的钩子将在自身实例钩子之前触发;
值为对象的选项,例如methods,components等如果变量名和mixin混入对象的变量名发生冲突,将会以组件优先并进行递归合并,相当于组件数据直接覆盖了mixin中的同名数据;
我们可以修改代码mixin.js和page1.vue
mixin.js
export const mixin={ data(){ return { number:1 } }, methods:{ demo1(){ console.log("mixin混入对象") } } }
page1.vue
<template> <div>page1的值是:{{number}}</div> </template> <script> import {mixin} from "./mixin/mixin" export default { mixins:[mixin], data () { return { number:10 } }, mounted(){ this.demo1(); }, methods:{ demo1(){ console.log("这里是page1"); } } } </script> <style scoped> </style>
运行代码我们可以很清晰的看到都是执行我们组件内的值;
因为在vue中我们在实例中声明变量也是通过键值对的形式来声明的,其实也是一个对象;
全局混入:
全局混入我们只需要把mixin.js引入到main.js中,然后将mixin放入到Vue.mixin()方法中即可;
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router.js' import mixin from "./mixin/mixin.js" Vue.config.productionTip = false Vue.mixin(mixin) /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })
是的,全局混入更为便捷,我们将不用在子组件声明,全局混入将会影响每一个组件的实例,使用的时候需要小心谨慎;这样全局混入之后,我们可以直接在组件中通过this.变量/方法来调用mixin混入对象的变量/方法;
很多同学可能看到这里会有一些疑问,这不就跟Vuex差不多嘛,其实不是的:
mixin混入对象和Vuex的区别:
Vuex是状态共享管理,所以Vuex中的所有变量和方法都是可以读取和更改并相互影响的;
mixin可以定义公用的变量或方法,但是mixin中的数据是不共享的,也就是每个组件中的mixin实例都是不一样的,都是单独存在的个体,不存在相互影响的;
mixin混入对象值为函数的同名函数选项将会进行递归合并为数组,两个函数都会执行,只不过先执行mixin中的同名函数;
mixin混入对象值为对象的同名对象将会进行替换,都优先执行组件内的同名对象,也就是组件内的同名对象将mixin混入对象的同名对象进行覆盖;
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
指尖前端重构(React)技术调研分析
摘要:重构前的技术文档调研与分析,包括技术选型为什么选择react,应用过程中的注意事项等。 一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早,但其在原理上并没有React创新的性能优化,且自身相对来说显得笨重。 Vue出现最晚,其核心原理学习了React,只是语法形式的变化,关系上来说React是开拓者,Vue是学习者。 React社区有强大活力与创新能力,不断涌现革命性的创新产品,其中包括可以使用JS操作原生控件的React Native,Vue后来跟进学习出了类似的Weex,但两者成熟度差很多。 目前来看React的生态系统要比Vue大的多,在github、stackoverflow等最大的技术社区搜索两者,React的搜索结果是Vue的十倍左右,另外据近期统计使用React的站点是Vue的几百倍以上。更大的生态意味着更多可用的资源,以及遇到问题可以得到更多的有效参考与帮助,这也是除了性能之外选择React的核心原因。 选择React之后,应用会在以下几个方面有提升。 第一,原先的ht...
- 下一篇
操作系统学习(二)--进程描述和执行
这是操作系统系列第 2 篇。 如果你想知道操作系统每天都在做些什么,那就打开你的资源监视器: 资源监视器截图,Windows 10 单独通过这一张图,我们就能够总结出操作系统的几个重要功能: 进程管理 线程管理 内存管理 I/O 管理(包含了磁盘调度) 文件管理,这一功能在图里没有表现出来,但我相信每个使用计算机的人都知道它。 为什么我要从进程开始讲起呢? 原因很简单,我们每天使用计算机,包括手机和电脑,本质上是使用运行在其操作系统上的应用程序。对于我们来讲,操作系统最为直观的功能就是进程管理,所以,让我们从进程管理入手,由表及里,一步步深挖操作系统的本质。 进程是什么? 我在第一篇文章里简单提到了进程这一概念,这里再详细讲一下,加深理解。 操作系统的设计从根本上来说是为了迎合用户需求,对个人用户来说,需求就是在一台计算机上运行多个应用程序,以满足生活和工作的需要。但应用程序这么多,不可能让每一个程序占用一个 CPU 核心啊,因为 CPU 核心是有限的,人的需求是无限的。 所以操作系统就需要将无限(夸张一下)的应用程序,分配到有限的 CPU 上去。 当我们打开一堆程序时,这些程序就会被...
相关文章
文章评论
共有0条评论来说两句吧...