前言
⭐️ 本专栏主要内容为「 Vue3官方文档 」的学习过程 ✍🏼
⭐️ 本专栏适合人群：Vue小白、学完一遍Vue的掘友 👨🏼💻
⭐️ 本专栏的阅读顺序和官方文档顺序相同 📖
⭐️ 英雄不问出处，这个专栏一定让你收获满满 🥳！
⭐️ 静心，思考，实操，坚持，巩固，满载而归 🥰！
⭐️ 欢迎各位掘友在评论区交流 🤡
本节内容
- 应用实例和组件实例
- 根组件
- 组件实例的property
- 生命周期和钩子函数
第一节 创建一个应用实例
通过createApp创建一个新的应用实例。
const app = Vue.createApp({
// 选项
})
通过app注册的组件是“全局”的，
const app = Vue.createApp()
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)
应用实例的大部分方法都会返回同一实例，支持链式调用
const app = Vue.createApp()
.component('SearchInput', SearchInputComponent)
.directive('focus', FocusDirective)
.use(LocalePlugin)
第二节 根组件
传递给createApp的选项用于配置根组件。当挂载应用时，该组件作为渲染的起点。
一个应用需要挂在到一个DOM元素中
const App = {
// 选项
}
const app = Vue.createApp(App)
const vm = app.mount('#app') // mount里面是要挂载的DOM元素
app.mount 不返回应用实例本身app，他返回的是根组件实例vm
每个组件都有自己的组件实例vm，所有的组件共享一个应用实例app
第三节 组件实例 property
const app = Vue.createAPP({
data() {
return {
count: 4
}
},
props: {
// 属性
},
components: {
// 组件
},
methods: {
// 方法
},
computed() {
// 计算属性
},
watch() {
// 侦听器
},
setup(props, context) {
// vue3 setup语法糖
}
})
const vm = app.mount('#app')
console.log(vm.count) // 4
组件实例的所有property，无论如何定义，都可以在组件的模板中访问
Vue通过组件实例暴露了一些内置property，如$attrs和$emit。内置的property都有一个 $ 前缀，避免与用户定义的property冲突
在这里，我们要知道property如果出现同名，他们的同名优先级是怎样的?
props > data > methods > computed > watch
第四节 生命周期钩子
每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
生命周期钩子的 this 上下文指向调用它的当前活动实例。
不要在property或回调上使用箭头函数
因为箭头函数没有this，this会作为变量一直像上次词法作用域查找，知道找到为止。
经常导致
Cannot read property of undefined或this.myMethod is not a function
Vue生命周期的四个阶段
Vue生命周期主要分为四个阶段：构建、渲染、更新、销毁
构建： 实例初始化，配置选项property
渲染： 编译模板，替换数据，将模版挂在到真实DOM树上
更新： 检测data中的数据是否为最新的，虚拟DOM重新渲染并更新到真实DOM上
销毁： Vue实例被销毁，实例上的所有东西都解除绑定。
钩子函数
beforeCreate
在实例初始化之后进行数据侦听和事件侦听器的配置之前同步调用
组件中的data、method都不可用
created
在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，数据侦听、计算属性、方法、事件/侦听器的回调函数已配置完成。但挂载阶段还没开始
可以刚访问到组件的data、method、computed、watch等
但是还有挂载到真实DOM树上
beforeMount
在挂载开始之前被调用：相关的render函数首次被调用
编译模板，构建虚拟DOM树，将vue中的template编译成html，数据未替换
该钩子在服务器端渲染期间不被调用。
mounted
实例挂载完成后被调用，这时候传递给app.mount的元素已经被新创建的vm.$el替换了。如果根实例被挂载到一个文档内的元素上，当 mounted 被调用时， vm.$el 也会在文档内。 注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick
将响应的数据也加到了编译后的HTML，并挂载到mount指向的el上。
该钩子在服务器端渲染期间不被调用。
beforeUpdate
在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。
此时Vue实例中的data发生变化，但是视图层的DOM还没有更新。
该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务器端进行。
updated
在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。
你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或侦听器取而代之。
注意，updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等待整个视图都渲染完毕，可以在 updated 内部使用 vm.$nextTick
beforeUnmount
在卸载组件实例之前调用，在这个阶段，实例仍然是完全正常的。
该钩子在服务器端渲染期间不被调用。
unmounted
卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。
该钩子在服务器端渲染期间不被调用。
