Vue3.0 mixin的使用以及混合方式讲解

基本和2.0没啥区别，挂载方式有所改变

这里有一点要说的是，这里的check_url这个组件混入在App根组件的时候，官方原话说的很模糊，说是以恰当的方式"合并"。

合并这里不要误解，官方意思是数据会合并，并且以组件内部数据有限，如果出现冲突。

且如果是生命周期函数created，类似这种，他们是没有合并的，而是各自执行各自的，被合并的组件优先这里是check_url，然后执行根组件内部的组件。

也就是说，他们的生命周期并没有合并。

main.js

const check_url = {created() {console.log(this.$route)//{path: "/", name: undefined, params: {…}, query: {…}, hash: "", …}}
}
const app = createApp({mixins:[App,check_url] //这里的App是根组件
})
app.mount('#app')

根组件中的invite组件 invite.vue 中的js部分

export default {name: 'invite',created(){console.log(this.$route)//fullPath: "/invite", path: "/invite", query: {…}, hash: "", name: undefined, …}
}

通过这两个created可以看出，他们处于不同的生命周期。

Vue3.0 mixin的使用以及混合方式讲解相关推荐

sass之mixin的全局引入（vue3.0）
sass之mixin的全局引入(vue3.0) 1.scss文件(mixin.scss) /* 渐变 */ @mixin gradual($color, $color1){background: $c ...
Vue最全知识点「基础到进阶，覆盖vue3.0，建议收藏」
作者: 阿李卑斯 https://juejin.im/post/5ec358126fb9a0432a3c49e6 文末送<Vue.js从入门到项目实战>书籍希望你坚持看完并带走彩蛋声明 ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
【Vue】Docker + Nginx 部署 Vue3.0 项目
Docker + Nginx 部署 Vue3.0 项目 1.用指令 npm run build 打包vue.js项目(该项目是在WebStorm里面新建的Vue空项目). 打包成功后,会生成一个目录d ...
freemaker if 多个条件_第4天｜14天搞定Vue3.0，条件渲染和template
所谓的条件,指的就是满足什么条件,允许做什么事,不满足时,是不允许做的.如共享单车,规定满12周岁或以上才可以骑行,没满的则不被允许.学每门编程语言,条件语句都是必须熟练掌握的,Vue3.0的也不例外 ...
Vue3.0 备受热捧！2020 前端开发进阶必读
你好,我是汤小洋. 前华为全栈工程师,南京大学软件工程硕士,拥有11年全栈开发及内部培训分享经验. 作为一名前端人,学习从不是一件容易的事,这是我一路走过来的真实感受."只要付出,就有收获& ...
Vue3.0 Composition API与Vue2.x 使用的 Options API
Vue3.0 所采用的 Composition API 与 Vue2.x 使用的 Options API 有什么不同开始之前 Composition API 可以说是Vue3最大的特点,那么为什么要 ...
pb调用键盘钩子的例子_搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）...
作为一个刚刚入行工作不久的前端菜鸟,Vue2.x都没整熟练.但看着身边人都在学习Vue3,我也不敢怠慢,毕竟Vue3正式版已经发布两个月了,我还是耐着性子好好的阅读了一下Vue3.0的文档.没有其他大 ...
Vue最全知识点，面试必备（基础到进阶，覆盖vue3.0，持续更新整理，欢迎补充讨论）
声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,对自己有很大帮助才分享出来,参考文章传送:1.童欧巴对vue知识的整理 2.我是你的超级英雄对vue知识的整理 3.vue官网基础篇 ...

Vue3.0 mixin的使用以及混合方式讲解

Vue3.0 mixin的使用以及混合方式讲解相关推荐

最新文章

热门文章

Vue3.0 mixin的使用 以及混合方式讲解

Vue3.0 mixin的使用 以及混合方式讲解相关推荐

最新文章

热门文章

Vue3.0 mixin的使用以及混合方式讲解

Vue3.0 mixin的使用以及混合方式讲解相关推荐