深入了解Vue之Mixin

1、与vuex的区别

vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。

Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。

2、与公共组件的区别

组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。

Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。

要注意的知识点:

(1)当全局引入mixin时使用的是Vue.mixin(mixin);而单文件引入时使用的是mixins:[mixin],有一个”s“的差别,别忘记写。

(2)当混合里面包含异步请求函数,而我们又需要在组件中使用异步请求函数的返回值时,我们会取不到此返回值,解决方案:不要返回结果而是直接返回异步函数

错误案例:


错误案例

正确案例:


正确案例

(3)如果组件和基类对象(Mixin)含有同名选项时:

钩子函数: 混合为一个数组 ,基类对象(Mixin)的钩子将在组件自身钩子之前调用

值为对象的选项: 如 methods, components 和 directives,将被混合为同一个对象。 两个 对象键名冲突时,取组件对象的键值对。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,465评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,666评论 0 6
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,795评论 4 129
  • 今天看了一本敢于否定哈佛教育体系的书,《反脆弱》。我们现在人都过于想追求稳定,但其实长期的稳定只会使我们更加的脆弱...
    演说知音阅读 2,953评论 0 0
  • 我们都曾疯狂过,我们都曾追逐过,我们都曾年轻过……但这都是我们的曾经。
    卡尖阅读 2,555评论 0 0