Vue 团队在设计 Vue3 时的一个大目标是使其在大型项目中更具可伸缩性。 其中一部分是将Options API
重新设计为Composition API
,以实现更好的代码组织。
但是通过消除对 this
的大多数引用,而是使用显式的context
和props
变量,可以提高大型Vue项目的可读性。
如何注册 Vue3 全局组件
现在,我们来看看如何注册Vue3全局组件,方便在我们整个项目都能访问。 与我们在Vue2中声明它们的方式稍有不同,但也是非常简单。
什么是全局组件
首先,我们要还了解Vue3全局组件是什么以及为什么要使用它。
通常,当我们想在 Vue 实例中包含一个组件时,我们会在本地注册它,一般是这样使用:
但是,假设有一个组件,我们知道它会在多个文件中多次使用。 所以在每个文件都需要写一遍上述的代码-尤其是在我们重构了项目或进行某些操作的情况下,就会比较麻烦。
在这种情况下,全局注册组件是有用的,这样就可以在主根Vue实例的所有子组件中访问该组件。换句话说,全局注册一个组件意味着我们不必在每个文件中导入它。
Vue2 中全局组件是如何工作的
在Vue2中,无论我们在哪里创建Vue实例,我们都只需要调用Vue.component方法来注册全局组件。
这个方法有两个参数:
-
全局组件的名称
-
我们的组件本身
import Vue from ‘vue’
import PopupWindow from ‘./components/PopupWindow’
import App from ‘./App.vue’
Vue.component(‘PopupWindow’, PopupWindow) // global registration - can be used anywhere
new Vue({
render: h => h(App)
}).$mount(‘#app’)
现在,此 PopupWindow 组件可以在此Vue实例的所有子级中使用。
那么在 Vue3 中呢
在Vue3中,由于创建Vue实例的工作方式略有不同(使用createApp
),所以代码略有不同,但理解起来同样简单。
比起从Vue2对象中声明全局组件,我们首先必须创建我们的应用程序。然后,可以像以前一样运行相同的.component
方法。
import { createApp } from ‘vue’
import PopupWindow from ‘./components/PopupWindow’
import App from “./App.vue”
const app = createApp(App)
app.component(‘PopupWindow’, PopupWindow) // global registration - can be used anywhere
app.mount(‘#app’)
~完,我是刷碗智,我要去刷碗了,骨的白!
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:
https://leavue.co/2020/08/an-introduction-to-vue3-props-a-beinners-guide/
https://leavue.co/2020/08/how-to-register-a-vue3-global-component/
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;