vue复习——mixins

最新推荐文章于 2024-04-29 05:33:08 发布
最新推荐文章于 2024-04-29 05:33:08 发布
阅读量79 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goutinga/article/details/120189330
版权

Mixins(混入)

混入，很久没用了，复习一下，我所理解的混入其实与computed一样，不会改变原先的值，只会做一层过滤。就像computed一样，像filter一样，像vuex中的getter一样。

接下来，我用几张图片来展示一下混入的用法，这几张图片分别从，值，方法，生命周期来展示。


值

混合对象中的参数num
在这里插入图片描述

组件1中的参数num进行+1的操作
在这里插入图片描述

组件2中的参数num未进行操作
在这里插入图片描述

看两组件中分别输出的num值
在这里插入图片描述

可以看到，确实只是过滤的作用


方法

混入对象中的方法
在这里插入图片描述

组件中的方法
在这里插入图片描述

打印输出
在这里插入图片描述


生命周期

混入对象函数中的console
在这里插入图片描述
组件函数中的console
在这里插入图片描述
打印台打印
在这里插入图片描述

付金廷
关注
专栏目录
Vue2+Vue3（脚手架）
qq_47296476的博客
01-17 1630
组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。放在他们共同的父组件上（状态提升）。​ (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）
Vue2学习笔记之知识点大总结
Qiuxuntao的博客
05-20 1558
文章目录1、初识Vue2、Vue模版语法3、数据绑定4、el与data的两种写法5、MVVM模型6、Vue的数据代理7、事件处理7.1、事件的基本使用7.2、事件修饰符7.3、键盘事件8、计算属性 1、初识Vue 初识Vue： 1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象； 2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法； 3.root容器里的代码被称为【Vue模板】； 4.Vue实例和容器是一一对应的； 5
MVC和MVVM有什么区别
weixin_70443954的博客
11-28 5248
Vue、MVC、MVVM、双向数据绑定、数据驱动视图
MVC和MVVM模式的区别
qq_34185872的博客
04-17 1935
在 MVVM 中，ViewModel 充当视图（View）和模型（Model）之间的中介，并向视图公开数据和命令（Command）。MVC 模式中，控制器（Controller）充当视图（View）和模型（Model）之间的中介，将用户输入从视图传递到模型并将模型状态更新反映回视图。这种方式有助于分离应用程序的不同部分，并促进代码重用和可维护性。数据绑定：MVVM 中的视图和 ViewModel 之间通过数据绑定实现双向通信，而在 MVC 中，视图和控制器之间只能通过事件监听和回调等方式进行单向通信。
mvc优点和缺点
XU13915421641的博客
10-16 1158
优点 耦合性低 视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。 模型是自包含的，并且与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。如果把数据库从MySQL移植到Oracle，或者改变基于RDB...
Mvvm 与 mvc 的区别
yzkdcsdn的博客
11-18 6117
Mvvm 与 mvc 的区别MVVMMVC两者在思想上的区别 MVVM MVVM 分为三部分：分别是 M（Model，模型层），V（View，视图层），V（ViewModel，V 与 M 连接的桥梁，也可以看作为控制器MVC 的 C 层） 1、M：模型层，主要负责业务数据相关 2、V：视图层，负责视图相关，细分下来就是 html+css 层 3、VM：V 与 M 沟通的桥梁，负责监听 M 或者 V 的修改，是实现MVVM 双向绑定的要点；因此开发者只需关注业务逻辑，不需要手动操作 DOM，不需要关注数据状态
MVC与MVVM的区别与联系？各自的优缺点？MVP模式
good7ob的博客
12-07 1059
MVC是一种经典的架构模式，它将应用程序分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。每个组件有不同的责任。模型（Model）：负责管理应用程序的数据和业务逻辑。它通常不直接与用户界面交互，而是提供数据供视图和控制器使用。视图（View）：负责呈现数据给用户，并将用户的输入反馈给控制器。视图通常是 passives（被动的），它们不处理业务逻辑。控制器（Controller）：充当模型和视图之间的中介，处理用户输入并更新模型和视图。
【Vue】面试题总结 - 基础知识总结 - 复习专用 - 组件相关 - Vue家族 - 源码相关
YK菌的博客
06-03 2794
文章目录1. 基础知识2. 源码知识 1. 基础知识 2. 源码知识
vue3 + vite + js 配置Eslint + prettier_vite+js+vue3配置eslint(2)
最新发布
2401_84446882的博客
04-29 692
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化。
Vant 源码解析——IndexBar
u011581932的博客
09-10 1702
本篇笔者来讲解一下 index-bar和 index-anchor的实现原理和细节处理，以及结合实际场景会对其进行拓展，来实现Wechat通讯录相似的功能，保证让index-bar变得更加生动有趣，满足更多的业务场景。
MVC和MVVM的区别
m0_74079165的博客
09-22 685
模型处理数据逻辑，视图负责显示数据，控制器负责处理用户交互和协调模型和视图之间的通信。视图模型类似于控制器，但它更关注于视图和模型之间的数据绑定和交互。2. 数据绑定方式：在MVC中，视图和模型之间的通信通常是通过控制器进行的，而在MVVM中，视图和视图模型之间使用数据绑定来实现。这意味着视图模型中的数据更直接地影响到视图的显示。3. 可重用性：由于MVVM模式中视图模型的存在，视图和视图模型之间的解耦更好。视图和视图模型之间的解耦以及数据绑定使得可以更容易地模拟视图模型的行为并进行测试。
MVC与MVVM：两种前端架构模式对比
你若盛开，清风自来
03-25 2538
本文将介绍MVC和MVVM两种前端架构模式的概念、特点以及它们在现代前端开发中的应用，帮助您了解如何选择适合项目需求的前端架构模式。🎉 MVC和MVVM是两种广泛使用的前端架构模式，它们各有特点和适用场景。通过了解MVC和MVVM的概念、特点以及它们在现代前端开发中的应用，我们可以更好地选择适合项目需求的前端架构模式，提高开发效率和代码质量。
MVC的优缺点
Jackson0328的博客
11-18 1303
MVC的优点： 1.耦合性低 视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码，同样，一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离，所以很容易改变应用程序的数据层和业务规则。 2.重用性高 MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码，因为多个视图能共享一个模型，它包括任何WEB（HTTP）浏览器或者无线浏览器（wap），比如，用户可以通过电脑也可通过手机来订购某样产品，虽然订购的方式不一样，但处理订购产品的方式.
学php用mvc和mvvm哪个好用,MVVM和MVC有什么区别
weixin_39622084的博客
04-02 293
MVVM与MVC的区别有：1、mvvm各部分的通信是双向的，而mvc各部分通信是单向的；2、mvvm是真正将页面与数据逻辑分离放到js里去实现，而mvc里面未分离。【推荐教程：MVC教程】MVCMVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。View 传送指令到 ControllerController 完成业务逻辑后，要求 Model 改变状...
MVC和MVVM区别
热门推荐
qq_40007317的博客
06-09 1万+
1、MVC MVC是一种设计模式： M（Model）：模型层。是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据； V（View）：视图层。是应用程序中处理数据显示的部分，视图是依据模型数据创建的； C（Controller）：控制层。是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示返回的数据。 2、MVVM vue框
MVC与MVVM区别
阳光下的冷静的博客
04-22 5449
MVC 在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。 特点：把业务逻辑、模型数据、用户界...
MVC、MVVM简介及区别
Jiang_mua的博客
11-04 2948
MVC、MVVM简介及区别前言一、MVC1.什么是MVC？2.mvc设计模式的好处二、MVVM1.元素2.目标思想3.总结三、区别总结 前言 一个常规软件或者 APP 一般都是服务于某种商业或者非商业述求，我们平常称为“业务需求”。随着业务需求的扩张、一个软件会变得越来越庞大，越来越复杂。所以一般都会有一套完整的架构设计、研发流程以及质量管理体系来保证整个研发过程。关于“架构设计”，这是一个很大的话题，伴随着我们的业务需求，它会涉及到方方面面，我们今天来谈一谈mvc与mvvm。 提示：以下是本篇文章正文
混合mixin函数_Vue中的“混合”——mixins使用方法
06-01
在 Vue 中，混合（mixins）是一种可以复用组件选项的方式。通过混合，我们可以将多个组件选项合并为一个组件选项，从而提高代码的复用性。 混合可以包含任意组件选项，如 data、methods、computed、watch、生命周期钩子等。当多个组件需要共享相同的选项时，我们可以使用混合来减少代码冗余。 使用混合非常简单，只需要定义一个混合对象，然后在组件中使用 mixins 选项将混合对象添加到组件选项中即可。例如： ``` // 定义一个混合对象 var myMixin = { created: function () { console.log('混合对象的 created 钩子被调用') } } // 使用混合对象 Vue.component('my-component', { mixins: [myMixin], created: function () { console.log('组件的 created 钩子被调用') } }) ``` 在上面的代码中，我们定义了一个混合对象 myMixin，其中包含了一个 created 生命周期钩子。然后在组件中使用 mixins 选项将 myMixin 添加到组件选项中。最终，组件的 created 钩子和混合对象的 created 钩子都会被调用。 需要注意的是，当混合对象和组件选项中含有同名选项时，混合对象的选项会覆盖组件选项的同名选项。如果混合对象中的选项是钩子函数，那么它们会在组件对应的钩子函数之前调用。 另外，混合对象可以被其他混合对象所继承，从而实现更复杂的代码复用。如果多个混合对象中含有同名选项，那么它们会按照混合对象的顺序依次调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值