Vue实例和组件实例

一.创建一个应用实例

每一个vue应用都是通过createApp函数创建一个新的应用实例开始的
const app = Vue.createApp({ /*选项*/ })
该应用实例是用来在应用中注册“全局”组件的

//创建一个Vue应用
const app = Vue.createApp({})//添加组件app.component('SearchInput',SearchInputComponent)//添加指令app.directive('focus',FocusDirective)//使用插件app.use(LocalePlugin)//应用实例暴露的大多数方法都会返回该同一实例，允许链式：
Vue。createApp ({}).component('SearchInput',SearchInputComponent).directive('focus',FocusDirective).use(LocalePlugin)

二.根组件

传递给createApp的选项用于配置根组件.当我们挂载应用时,该组件被用作渲染的起点.
一个应用需要被挂载道一个DOM元素中,例如,如果你想把一个Vue应用挂载道<div id= "app">:

设置Vue组件的选项
const RootComponent = { /*选项*/ }
将组件的选项传入实例中,创建Vue
const app = Vue.createApp(RootComponent)
挂载道指定的DOM元素上
const vm = app.mount('#app')
文档中经常会使用vm这个变量命表示组件实例

三.组件实例property

data中定义的property是通过组件实例暴露的：

const app = Vue.createApp({data(){return {count:4}}})
const vm = app.mount('#app')
console.log(vm.count)  // = > 4

Vue还通过组件实例暴露了一些内置property,如$attrs和$emit,这些property都有一个$前缀，以避免与用户定义的property名冲突。

四.生命周期钩子

每一组件在被创建时都要经过一系列的初始化过程----例如，需要设置数据监听，编译模板，将实例挂载道DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如create钩子可以用来在一个实例被创建之后执行代码：

//Vue选项
Vue.createApp({data(){//属性return {count:1}},created(){//created钩子可以用来在该实例被创建之后执行//`this`指向vm实例console.log('count is : ' + this.count)// = > "count is :1"}
})

也有一些其它的钩子，在实例生命的不同阶段被调用，如mounted，updated和unmounted.
生命周期钩子的this上下指向调用它的当前活动实例。
注意：
不要在选项property或回调上使用箭头函数，比如created:() = > console.log(this.a)或wm.$watch(;'a',newValue=>this.myMethod())
因为箭头函数并没有this,this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

五.生命周期图示

如图生命周期：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wEoqyakv-1655687209526)(D:\Desktop\lifecycle.svg)]

一旦创建Vue实例，就会产生很多个环节

第一部分：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tgYW6OcV-1655687209529)(D:\Desktop\Snipaste_2022-06-08_15-48-11.png)]

(第一个环节)init Events&Lifecycle：初始化制定规则，比如生命周期有几个，名称有哪些；事件修饰符等等，但是数据代理还未开始。
第一个生命周期函数beforeCreate,此时：无法通过vm访问道data中的数据，methods中的方法。

beforeCreate(){console.log('beforeCreate');console.log(this); //Vue输出无_datadebugger;//打断点
}

(第二个环节)init injections&reactivity：初始化响应式，数据检测，数据代理
第二个生命周期函数created，此时：可以通过vm访问data中的数据，methods中配置的方法

created(){console.log('created');console.log(this);debugger;//打断点
}

第二部分（解析模板，生成虚拟DOM）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qR5Z3PGS-1655687209530)(D:\Desktop\Snipaste_2022-06-08_16-23-57.png)]

此阶段Vue开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容

验证代码：

beforeMount(){console.log('beforeMount');console.log(this);debugger;//打断点
}

如果Vue中没有el，到这里就结束了，后面的代码不执行，显示页面也是未经解析的。

当再次调用vm.$mount('#root')，页面就会重新解析

第三部分(部分页面挂载)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n0Z52RQz-1655687209531)(D:\Desktop\Snipaste_2022-06-08_16-25-27.png)]

beforeMount(){}:此时：页面呈现的是未经Vue编译的DOM结构；所有对DOM的操作，最终都不奏效

验证：

在Console中操作DOM替换标签内的内容，放开断点，最后页面中还是不显示；或者在函数内部修改数据，页面最终也不会显示。

Create vm.$el and replace “el” with it（将vm身上的el替换掉整个el的环节）：将内存中的虚拟DOM转为真实DOM插入页面。

验证$el为真实DOM的代码：

            mounted() {console.log('mounted', this.$el);console.log('是否为真实DOM', this.$el instanceof HTMLElement);//结果为true}