vue实例、组件与生命周期函数
vue实例及vue组件基础概念
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
template: `<div>{{message}}</div>`
})
const vm = app.mount('#root')
备注:
- createApp 表示创建一个Vue应用,存储到app变量中
- createApp 中传入的参数({}对象)表示,这个应用最外层的组件,应该如何展示
- app.mount('#root') 表示这个Vue应用只作用于id为root的div上,只管理这个节点
- vm 代表的就是vue应用的根组件
- vue的编程是一种面向数据的编程,定义了数据messgae,定义了模板template,vue自动的会将数据和模板管理起来,变成页面中展示的效果hello world,vue这种面向数据的编程的模式,实际上是参考了MVVM这种设计模式
- mvvm设计模式中,m -> model 数据(这里的message),v -> view 视图(这里的template),vm -> view model 视图数据连接层(数据和视图自动连接),数据(这里的message)和视图(这里的template)都是我们自己定义的,数据和视图的关联并不是我们自己做的,而是vue帮助我们做的,更具体点是vue的组件帮我们做的,这也是这里为什么把根组件叫vm(view model)的原因
- 如何使用这个vm呢?我们可以使用
vm.$data
获取data中定义的数据,如果使用vm.$data.message
修改,message的值,页面的内容也会跟着发生变化
vue生命周期函数
定义
在某一时刻自动执行的函数
生命周期函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue实例组件及生命周期函数</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'hello world'
}
},
// 在实例生成之前自动执行的函数
beforeCreate() {
console.log('beforeCreate');
},
// 在实例生成之后自动执行的函数
created() {
console.log('created');
},
// 在组件内容被渲染到页面之前自动执行的函数(实例挂载到页面之前)
beforeMount() {
console.log(document.getElementById('root').innerHTML,'beforeMount');
},
// 在组件内容被渲染到页面之后自动执行的函数(实例挂载到页面之后)
mounted() {
console.log(document.getElementById('root').innerHTML,'mounted');
},
// 当data中的数据发生变化时会立即自动执行的函数
beforeUpdate() {
console.log(document.getElementById('root').innerHTML,'beforeUpdate');
},
// 当data中的数据发生变化,同时页面完成更新并重新渲染后,会自动执行的函数
updated() {
console.log(document.getElementById('root').innerHTML,'updated');
},
// 当vue实例销毁时自动执行的函数
beforeUnmount() {
console.log(document.getElementById('root').innerHTML,'beforeUnmount');
},
// 当vue实例销毁时,且DOM完全销毁之后,自动执行的函数
unmounted() {
console.log(document.getElementById('root').innerHTML,'unmounted');
},
template: `<div>{{message}}</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
备注:
- 当我们写了
const app = Vue.createApp({...}) const vm = app.mount('#root**')
vue就开始执行内部的逻辑,首先会分析代码中是否有事件的绑定,如v-on:click
或者生命周期函数- 执行第一个生命周期函数
beforeCreate
- 分析数据的双向绑定和依赖注入,此时vue的实例已经创建完成
- 执行第二个生命周期函数
created
- 接着判断vue实例中是否有
template
选项,如果有就走左边的逻辑,取template
中的内容作为模板,然后将模板变成render函数(目的是为了让数据和render函数结合才能把内容渲染出来)。如果没有template
就走右边的逻辑,会把root
里面的DOM标签或者说root
的innerHtml作为模板- 执行第三个生命周期函数
beforeMuout
- 接着将函数和数据结合生成新的DOM,然后用新的DOM替换div为root的标签,此时vue的实例已经挂载到页面上了(页面中的hello world 就被展现到页面上了)
- 执行第四个生命周期函数
Mounted
- 当数据发生变化的时候,第五个生命周期函数
beforeUpdate
会被执行- 当数据发生变化,同时页面发生更新后,第六个生命周期函数
updated
会被执行- 假如想把vue的应用销毁掉,或者说让vue不再接管id为root的DOM元素了,让它从DOM的挂载点上移除下来就用
app.unmount()
。当让vue的应用失效时,第七个生命周期函数bdforeUnmount
会自动的执行- 当vue实例销毁时,且DOM完全销毁之后,第八个生命周期函数
unmounted
会自动的执行
如下图: 比较beforeMount
和mounted
我们可以发现在beforeMount
中组件的内容还没有挂载到root节点上,因此获取不到页面中内容,但是在mounted
时,也就是组件的内容被渲染到页面上时,取获取到页面中的内容就可以获取到
如下图: 比较beforeUpdate
和updated
当我们改变data中数据的时候,此时页面还没有重新渲染,因此beforeUpdate
中打印的还是页面更新之前的内容hello world
,当页面数据发生变化并且页面发生重新渲染之后,updated
生命周期函数才会执行,此时页面中的内容已是重新渲染后的内容,所以打印bye world
如下图: 比较bdforeUnmount
和unmounted
我们发现在bdforeUnmount
时,也就是在vue应用销毁之前,获取到的页面中的内容还是不变的,但是unmounted
时,也就是彻底的把vue实例销毁后,已经获取不到页面中的任何内容了
转载自:https://juejin.cn/post/7236325900718604347