05、Vue3.x初步【应用 & 组件实例 & 生命周期钩子图】

最新推荐文章于 2023-08-11 10:57:41 发布

银色种子

最新推荐文章于 2023-08-11 10:57:41 发布

阅读量417

点赞数 3

分类专栏： Vuejs 从入门到应用文章标签： vue3.x生命周期钩子 vue3.x组件实例 vue3.x组件化思想 vue3.x 组件实例的属性 vue3.x入门

本文链接：https://blog.csdn.net/silvercell/article/details/115873342

版权

Vuejs 从入门到应用专栏收录该内容

6 篇文章 0 订阅

订阅专栏

应用 & 组件实例

主要是总结一下，之前的那些demo, 回顾并加点术语
东西还是那东西，用法还是那用法，逼格提升篇

1. 创建一个应用实例

创建一个应用实例, Vue.createApp(), 允许链式

<body>
	<div id="container">
	</div>
</body>
<script type="text/javascript">
	const cfg = {
		data(){
			return {
			}
		}
	}
	
	const app = Vue.createApp(cfg);
	app.component('SearchInput',  SearchInputComponent);
	app.directive('focus', FocusDirective);
	app.use(LocalePlugin);
	// 允许链式
	Vue.createApp(cfg).component('SearchInput', SearchInputComponent).directive('focus',FocusDirective).use(LocalePlugin);
</script>

2. 根组件

组件通过html的挂载点,挂到页面上.

组件是啥？一个个组成的部分，组成的单位。
挂载应用时, 作为渲染起点.
- 渲染起点：简答说用html展示数据，选中的（通过类、id... 选择器选中的）html就是渲染起点。
- 挂载：把数据渲染到html就是挂载数据

	const RootComponent = {}
	const app = Vue.createApp( RootComponent );
	const vm = app.mount('#container');  //根组件实例, vue-model,

真实应用都是被组织成一个嵌套的、可重用的组件树
- 理解：拆分，然后把能复用的拿出来就用
- 好处：整体视觉统一， 拆分维护方便,一改都改，减少代码量
- 总之， 组件要拆分的很小

Root Component
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

3. 组件实例property

组件实例 property (property中文翻译: 属性), 就是组件属性
理解组件实例，简单的来说， mount了。就是组件的实例。否则还在加载渲染呢
组件实例property：就是创建的实例的属性,
就是 vm 的属性比如， data, methods … 在它身上挂着的属性

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

组件实例 property (property中文翻译: 属性), 就是组件属性
组件的属性,通过组件实例进行暴露.
- 什么暴露？就是调用。只不过这块组件的属性用实例进行调用！
属性(property)有哪些?
- data, methods, props, computed, mounted, inject, setup … 内置属性以 $ 开头, $attrs , $emit …

4. 生命周期钩子

生命周期：在每个组件被创建时经过一系列的初始化过程,
过程中也会运行一些叫做生命周期钩子的函数, 给了用户在不同阶段添加自己的代码的机会
- 所谓生命周期钩子，就是在某个动作触发执行之前、之后，会被系统自行调用执行的函数，那你在这个会被调用的函数里添加自己的操作，场景触发自然也会自动被调用。
- 那有哪些钩子啊？？

5. 来理解一下生命周期钩子函数的调用

例子，写个created 钩子使用的demo
- created钩子作用：可以用来在一个实例被创建之后，立即自动执行内部代码

Vue.createApp({
  data() {
    return { count: 1}
  },
  created() {
    // `this` 指向 vm 实例
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

总结：

创建应用实例，应用也必须有一个根组件进行挂载
创建挂载点和挂载，根组件和其他组件
组件实例的属性很多，组件实例进行的调用
组件编写，要服用强，要拆分方便，容易维护。尽量拆解成单个功能块的组件。
生命周期钩子，和生命周期钩子函数的使用，根据时机进行触发。什么时机？生命周期运行的时机。

hello world! Author: Silvercell
Happy coding everyday!
欢迎关注我的专栏，打赏，请我喝个🍺啥的，
哈哈哈哈哈哈，点赞👍，评论，关注，素质三连~ 素质白嫖

银色种子

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
3
评论
05、Vue3.x初步【应用 & 组件实例 & 生命周期钩子图】

应用 & 组件实例主要是总结一下，之前的那些demo, 回顾并加点术语东西还是那东西，用法还是那用法，逼格提升篇1. 创建一个应用实例创建一个应用实例, Vue.createApp(), 允许链式<body> <div id="container"> </div></body><script type="text/javascript"> const cfg = { data(){ return
复制链接

扫一扫