mixins的实用案例和常见问题
文章目录
- mixins介绍
- mixins局部使用和使用同名钩子函数的执行顺序
- 看源码:
- 执行结果:
- 结果分析
- mixins函数覆盖问题
- 看源码
- 执行结果
- 结果分析
- mixins变量替换合并问题
- 看源码
- 执行结果
- 结果分析
- 全局引用mixin
- 新建一个mixinjs
- main.js注册
- 组件直接使用
- 执行结果
- 写到后面
mixins介绍
官方链接
- 说人话就是vue给我们提供了一种更加灵活的实现业务实现逻辑的方式。
mixins局部使用和使用同名钩子函数的执行顺序
看源码:
<template><div class="hello"><input v-model="name" /><button @click="func_name()">点击</button></div>
</template><script>
//验证调用先后顺序
var watchcount = {//验证调用的先后顺序updated() {console.info(this.count + "我是mixins的updated方法");}
};
export default {name: "HelloWorld",data() {return {count: 0,name: ""};},mixins: [watchcount],updated() {console.info(this.count + "我是updated的方法");},watch: {name: function(newval, oldval) {this.count++;}}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
input {width: 250px;height: 30px;outline: none;border-radius: 4px;border: 1px solid #000000;
}
button {width: 90px;height: 30px;outline: none;border-radius: 4px;color: #ffffff;border: none;background: burlywood;
}
button:hover {width: 90px;height: 30px;outline: none;border-radius: 4px;color: #000000;border: none;background: burlywood;
}
</style>
执行结果:
1我是mixins的updated方法
1我是updated的方法
结果分析
我们首先看到了mixins是怎么使用的,我们定义一个变量,直接将我们需要的逻辑实现,这里我监听了input里面的name的指,做了一个updated的操作,每次值的变化都会引起我们mixins和vuejs的变化,那么我们验证了第一个问题就是mixins的执行顺序的问题,当存在相同钩子函数的时候,mixins是优先执行的。
mixins函数覆盖问题
看源码
<template><div class="hello"><input v-model="name" /><button @click="func_name()">点击</button></div>
</template><script>
//验证调用先后顺序
var watchcount = {methods: {func_name() {console.info(this.count + "我是mixin里面的method的方法");}},
};
export default {name: "HelloWorld",data() {return {count: 0,name: "",message : '您好,我是来自原生vue内容'};},mixins: [watchcount],methods: {func_name() {console.info(this.count + "我是原生vue里面的method的方法");}},watch: {name: function(newval, oldval) {this.count++;}}
};
执行结果
0我是原生vue里面的method的方法
结果分析
由于上面的已经将样式什么的全部贴了上来,所以这个例子就不贴样式了,自己测试的时候自己加上就可以了,这里我们说一下现象,我们可以看到的就是当我们同时使用两个同名函数的时候呢,会出现一个问题就是我们的mixins里面的函数被覆盖掉了,这个是需要注意的点。
mixins变量替换合并问题
看源码
<template><div class="hello"><input v-model="name" /><button @click="func_name()">点击</button></div>
</template><script>
//验证同名合并性
var minxin_data = {data : function() {return {message : '您好,我是来自minxins',sex : "男"}}
}
export default {name: "HelloWorld",data() {return {count: 0,name: "",message : '您好,我是来自原生vue内容'};},mixins: [minxin_data],created() {console.info(this.$data)},watch: {name: function(newval, oldval) {this.count++;}}
};
</script>
执行结果
count: 0
name: “”
message: “您好,我是来自原生vue内容”
sex: “男”
结果分析
我们可以看到,上面我在mixins里直接定义了message和sex,我在下面的vue实例中也定义了一个message和name、count这几个,我们要验证的是同名的会怎么样,不同名的会怎么样,结果给我们的信息是同名的会被vue里面的覆盖掉,不同名的会被加到一个新的数组里面。
全局引用mixin
- 上面我们说的全部都是局部引用一个mixins,下面说一下怎么全局引用这个模块
新建一个mixinjs
let mixin = {data() {return {}},methods: {func_name() {console.info("我是来自全局的mixin")}},
};
export default mixin;
main.js注册
import Vue from 'vue'
import App from './App'
import Mixin from './states/mixins' //路径不要写错
import router from './router'
Vue.mixin(Mixin) //注册使用
Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',router,components: { App },template: '<App/>'
})
组件直接使用
<template><div class="hello"><input v-model="name" /><button @click="func_name()">点击</button></div>
</template>
执行结果
我是来自全局的mixin
结果分析:这里我直接运行的,是可以的,前提是我将局部的和vue里面的全部都注释掉了该函数,也就是说我初步测试的结论是全局的是不比局部的优先执行的,但是网上给我的信息是全局是优先执行的,所以这个问题有待考证。这里还要注意的一个点是全局使用的是mixin是没有s的。
写到后面
- 写到这里mixin的使用和遇到的基本的问题就写完了,但是这里简单的说一下,我们在使用的时候尽量使用我们的局部的,全局的可能会污染一些我们公共的组件中的功能,所以谨慎使用,分发路由的时候使用全局的还是很方便的。感谢您的阅读,喜欢的可以关注一下,一起交流讨论,也可以加我的微信进群,下篇文章见!
mixins的实用案例和常见问题相关推荐
- python编程求圆的面积案例_Python实用案例编程入门:第七章 调式手段
本章的主题为调试手段,这是程序开发必不可少的步骤,也是占用时间最多的环节.在程序员的正常开发工作中,调试工作至少占据1/3的时间,而实际编码工作相对占用实际比较少.因此,无论您是初学者,还是编程兴趣爱 ...
- 《用于物联网的Arduino项目开发:实用案例解析》—— 3.4 小结
本节书摘来自华章出版社<用于物联网的Arduino项目开发:实用案例解析>一 书中的第3章,第3.4节,作者[美]安德尔·杰韦德(Adeel Javed),更多章节内容可以访问云栖社区&q ...
- Java语言最新实用案例教程_Java 语言实用案例教程
基本信息 书名:Java 语言实用案例教程 出版价格:48元 作者:常玉慧, 王秀梅 出版社:科学出版社 出版日期:2016-10-1 ISBN:9787030497383 字数:387000 页码: ...
- java水印图片_JAVA实用案例之图片水印开发
写在最前面 上周零零碎碎花了一周的时间研究水印的开发,现在终于写了个入门级的Demo,做下笔记同时分享出来供大家参考. Demo是在我上次写的 JAVA实用案例之文件导入导出(POI方式) 框架基础上 ...
- 计算机主板最常见的问题,计算机主板功能 电脑实用技巧解决常见问题
电脑实用技巧解决常见问题 1.解决问题 插电即开机问题 现象:有些朋友有关机后断开电源板电源的习惯,可是却常常被一个问题困扰,就是电源板一通电,计算机就自动开机了,Power键形同虚设.解决问题:有些 ...
- 《R语言机器学习:实用案例分析》——1.2节R的数据结构
本节书摘来自华章社区<R语言机器学习:实用案例分析>一书中的第1章,第1.2节R的数据结构,作者[印度] 拉格哈夫·巴利(Raghav Bali)迪潘简·撒卡尔(Dipanjan Sark ...
- jquery audio没有声音_Python实用案例编程入门:第十四章 通过声音控制您的计算机
本章的主题为通过声音来控制您的电脑.当下的语音识别已经相对比较成熟,比如有的车载系统,或手机都支持语音识别,您可以通过声音来下达指令.比如您告诉导航系统"我要去北京",它会自动帮您 ...
- 《R语言机器学习:实用案例分析》——1.3节使用函数
本节书摘来自华章社区<R语言机器学习:实用案例分析>一书中的第1章,第1.3节使用函数,作者[印度] 拉格哈夫·巴利(Raghav Bali)迪潘简·撒卡尔(Dipanjan Sarkar ...
- 《R语言机器学习:实用案例分析》——1.8节总结
本节书摘来自华章社区<R语言机器学习:实用案例分析>一书中的第1章,第1.8节总结,作者[印度] 拉格哈夫·巴利(Raghav Bali)迪潘简·撒卡尔(Dipanjan Sarkar), ...
最新文章
- 手撸一个JdbcTemplate,带你了解其原理
- win10蓝屏问题,关于驱动kisSaasUrlRedirectKnl64.sys 的
- Xamarin Essentials教程使用指南针Compass
- 关于c数据类型的范围
- java连接oracle密码错误,java代码连接Oracle数据库出错,求解,以下是错误信息
- 试题 基础练习 回文数
- java根据模板生成PDF
- 数量词a lot of、much、many、a little、a few_29
- Paypal如何实现循环扣款(订阅)?
- MD5文件加解密工具类 MD5Utils
- linux 硬盘测试几种工具
- 高德地图通过经纬度获取位置信息
- html背景渐变蓝色,CSS3网页渐变色背景,适用于IE
- python爬虫公众号音频源代码_python爬取音频下载的示例代码
- 八百八十岁也没活明白
- 保姆式教学--教室友从买服务器到怎么搭建内网隧道
- 搜索引擎是如何抓取网站内容的
- Linux hook系统调用open/read/write
- 时间转换 给定一个以秒为单位的时间t,要求用“<H>:<M>:<S>”的格式来表示这个时间。<H>表示时间,<M>表示分钟,而<S>表示秒,它们都是整数且没有前导的“0”。
- MySQL 到 ClickHouse 实时数据同步实操分享
热门文章
- IT屌丝:SKYCC组合营销软件事件营销案例
- 【Python】均值回归策略回测(日内高频数据)
- eclipse安装SVN插件步骤
- python微信好友分析_基于python实现微信好友数据分析(简单)
- 计算机网络战队名称大全,游戏战队名字大全要霸气
- 2020京东全球科技探索者大会来啦!三大体系CEO约你来开会!
- Python—numpy模块下函数介绍(一)numpy.ones、empty等
- catti二级笔译综合能力真题_catti二级笔译综合能力试题精选及答案解析
- [Django1.5] two-scoops-django-best-practices 读书笔记
- Scikit-learn学习系列 | 4. sklearn特征降维方法汇总(方差过滤,卡方,F过滤,互信息,嵌入法)