vue的混入可以使用生命周期吗

vue的混入可以使用生命周期。mixins(混入)中的生命周期会与引入mixins的组件的生命周期整合在一起调用,而且mixins中的生命周期函数会比引入mixins的组件调用的快。需要注意,多个mixins的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突或覆盖。

vue的混入可以使用生命周期吗

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

mixins(混入)基本介绍

我们在开发过程中,会遇到一些相同逻辑和功能的组件,我们不会在每一个组件中都写一套代码,这样会导致代码冗余。

mixins的作用就是将相同的逻辑和功能抽离出来,分成单个文件,组件只需引入mixins就可以实现相同功能。

mixins使用

也是在src文件夹中创建mixins文件夹,在里面去写对应的mixin.js文件。如下所示:

立即学习“前端免费学习笔记(深入)”;

1.png

用一个js文件将vue的script部分抽离出来,如下所示:

  data(){    return {}  },  methods:{},  computed:{},  filters:{},  created(){},  mounted(){    console.log("我是mixins");  }}复制代码

登录后复制

我们就可以在组件中引入mixin,去使用如下所示:

2.png

mixin的特性

1.mixins中的生命周期会与引入mixins的组件的生命周期整合在一起调用,而且mixins中的生命周期函数会比引入mixins的组件调用的。【相关推荐:vuejs视频教程、vuejs视频教程】

3.png

4.png

5.png

2.组件的data、methods、filters会覆盖mixins里的同名data、methods、filters。

6.png

7.png

8.png

3.不同mixin里的同名方法,按照引进的顺序,最后的覆盖前面的同名方法。

mixin的缺点

1、变量来源不明确(隐式传入),不利于阅读,使代码变得难以维护。

组件里可以引入多个mixin,并直接隐式调用mixin里的变量/方法,这会让我们有时候混乱 区分不出这些变量和方法 分别是哪个mixin里的?

2、多个mixins的生命周期会融合到一起运行,但是同名属性、同名方法无法融合,可能会导致冲突或覆盖。

比如组件1中的方法要输出属性info,
但是组件2中也有同名属性info,且覆盖了组件1中的属性info,
那么当执行组件1中的方法时,输出的确实组件2中的属性,
这个我们可以避免,但是一不小心就会导致冲突,很容易制造混乱。

3、mixins和组件可能出现多对多的关系,复杂度较高

即一个组件可以引用多个mixins,一个mixins也可以被多个组件引用。

(学习视频分享:vuejs视频教程、vuejs视频教程)

以上就是vue的混入可以使用生命周期吗的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2924070.html

(0)
上一篇 2025年3月11日 18:53:32
下一篇 2025年3月11日 18:53:49

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue是实时刷新dom吗

    vue不是实时刷新dom。Vue中的数据更新是异步的,意味着在修改完Data之后并不能立刻获取修改后的DOM元素。Vue在更新DOM时是异步执行的,只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更,如果同一…

    2025年3月11日 编程技术
    000
  • vue项目只有一个vue实例么

    不是,vue项目中可以包含多个vue实例。在vue项目中,一般只有一个VUE实例在main.js中定义,其他都是vue组件实例。Vue是由一个个实例构建而成的,一个组件就是一个Vue的实例,每个组件内部都可以写属性,因此每一个组件都是一个V…

    2025年3月11日 编程技术
    200
  • vue适用多页面应用吗

    vue适用多页面应用。vue在工程化开发的时候依赖于webpack,而webpack是将所有的资源整合到一块后形成一个html文件 一堆js文件;如果想使用vue实现多页面应用,就需要对它的依赖进行重新配置,即通过修改webpack配置来让…

    2025年3月11日 编程技术
    200
  • 怎么查询当前vue的版本

    查询当前vue版本的两种方法:1、在cmd控制台内,执行“npm list vue”命令查询版本,输出结果就是vue的版本号信息;2、在项目中找到并打开package.json文件,查找“dependencies”项即可看到vue的版本信息…

    2025年3月11日
    200
  • vue运用了哪些模式

    vue运用的设计模式:1、单例模式,确保一个类只有一个实例对象,并提供一个全局访问点供其访问。2、工厂模式,是用来创建对象的一种模式,不必暴露构造函数的具体逻辑,而是将逻辑封装在一个个函数之中。3、装饰器模式,允许向现有的函数添加新的功能,…

    2025年3月11日
    200
  • vue组件中data不能是函数吗

    不是,vue组件中data必须是一个函数。vue中组件是用来复用的,为了防止data复用,将其定义为函数。vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内d…

    2025年3月11日 编程技术
    200
  • vue组件由几部分组成

    vue组件由3部分组成:1、template,设置组件的模板结构;2、script,设置组件的JavaScript行为;3、style,设置组件的样式。每个组件中必须包含template模板结构,而script行为和style样式是可选的组…

    2025年3月11日
    200
  • vue模板预编译是什么

    当vue进行打包时,会直接把组件中的模板转换为render函数,这叫做模板预编译。模板预编译的好处:运行时不再需要编译模板,提高了运行效率;且打包结果中不再需要vue的编译代码,减少了打包体积。 本教程操作环境:windows7系统、vue…

    2025年3月11日
    200
  • vue webpack可打包哪些文件

    在vue中,webpack可以将js、css、图片、json等文件打包为合适的格式,以供浏览器使用;在webpack中js、css、图片、json等文件类型都可以被当做模块来使用。webpack中各种模块资源可打包合并成一个或多个包,并且在…

    2025年3月11日 编程技术
    200
  • vue dom是什么意思啊

    dom是一种文档对象模型,同时也是用于html编程的接口,通过dom来操作页面中的元素。DOM是HTML文档的内存中对象表示,它提供了使用JavaScript与网页交互的方式。DOM是节点的层次结构(或树),其中document节点作为根。…

    2025年3月11日
    200

发表回复

登录后才能评论