vue中mixin的一点理解

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别？

组件在引用之后相当于在父组件内开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，单本质上两者还是泾渭分明，相对独立。

而mixins则是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。

单纯组件引用：

父组件 + 子组件 >>> 父组件 + 子组件

mixins：

父组件 + 子组件 >>> new父组件

值得注意的是，在使用mixins时，父组件和子组件同时拥有着子组件内的各种属性方法，但这并不意味着他们同时共享、同时处理这些变量，两者之间除了合并，是不会进行任何通信的。最开始看到mixins的时候，天真的我似乎看到了一种向下的类似vuex的数据共享方案，心情十分激动啊。但是仔细一研究官方api和一些技术博客，才发现自己。。。天真。

具体使用以及内容合并策略请参照官方API及其他技术贴等

https://cn.vuejs.org/v2/guide/mixins.html

http://www.deboy.cn/Vue-mixins-advance-tips.html

转载于:https://www.cnblogs.com/heioray/p/6888982.html

vue中mixin的一点理解相关推荐

mixin机制 vue_谈谈vue中mixin的一点理解
谈谈vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情 ...
Vue中diff算法的理解
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DOM结 ...
Vue中虚拟DOM的理解
Vue中虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这 ...
vue中特殊符号的理解如$
vue中特殊符号的理解如$ 1)$ mount:vue内部除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $ ,以便与用户定义的属性区分开来:$ mount是 Vuex 源码 ...
vue中mixin 感觉很牛逼（父子组件融合成一个新组件）
vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引 ...
Vue中mixin的使用
什么是混入? 混入通过注入配置项到vue实例用来提升复用性 1. 基础使用 const myMixin = {created: function () {this.hello();},methods: ...
9.Vue中mounted的简单理解
mounted是vue中的一个钩子函数,一般在初始化页面完成后,再对dom节点进行相关操作.官方文档的解释如下,钩子函数的官方链接为 https://cn.vuejs.org/v2/api/# ...
vue中Mixin和extends详解
一.认识Mixin 目前我们使用组件化开发方式来开发应用程序,但是在不同组件之间存在一些相同的代码逻辑,此时我们希望对相同的代码逻辑进行抽取. 在vue2和vue3中都支持使用Mixin来解决,Mi ...
关于C#中委托的一点理解
C#中委托是一种类型.可以这么笼统的理解:int型变量代表一个整型,而委托类型的变量代表一个方法的地址(将方法名称传入constructor并实例化该委托变量). --By Brisk Yu 1 为何 ...

vue中mixin的一点理解

vue中mixin的一点理解相关推荐

最新文章

热门文章