likes
comments
collection
share

vue实例、组件与生命周期函数

作者站长头像
站长
· 阅读数 31

vue实例及vue组件基础概念

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world'
        }
    },
    template: `<div>{{message}}</div>`
})
const vm = app.mount('#root')

备注:

  1. createApp 表示创建一个Vue应用,存储到app变量中
  2. createApp 中传入的参数({}对象)表示,这个应用最外层的组件,应该如何展示
  3. app.mount('#root') 表示这个Vue应用只作用于id为root的div上,只管理这个节点
  4. vm 代表的就是vue应用的根组件
  5. vue的编程是一种面向数据的编程,定义了数据messgae,定义了模板template,vue自动的会将数据和模板管理起来,变成页面中展示的效果hello world,vue这种面向数据的编程的模式,实际上是参考了MVVM这种设计模式
  6. mvvm设计模式中,m -> model 数据(这里的message),v -> view 视图(这里的template),vm -> view model 视图数据连接层(数据和视图自动连接),数据(这里的message)和视图(这里的template)都是我们自己定义的,数据和视图的关联并不是我们自己做的,而是vue帮助我们做的,更具体点是vue的组件帮我们做的,这也是这里为什么把根组件叫vm(view model)的原因
  7. 如何使用这个vm呢?我们可以使用vm.$data获取data中定义的数据,如果使用vm.$data.message修改,message的值,页面的内容也会跟着发生变化

vue生命周期函数

定义

在某一时刻自动执行的函数

生命周期函数

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>

备注:

  1. 当我们写了const app = Vue.createApp({...}) const vm = app.mount('#root**')vue就开始执行内部的逻辑,首先会分析代码中是否有事件的绑定,如v-on:click或者生命周期函数
  2. 执行第一个生命周期函数beforeCreate
  3. 分析数据的双向绑定和依赖注入,此时vue的实例已经创建完成
  4. 执行第二个生命周期函数created
  5. 接着判断vue实例中是否有template选项,如果有就走左边的逻辑,取template中的内容作为模板,然后将模板变成render函数(目的是为了让数据和render函数结合才能把内容渲染出来)。如果没有template就走右边的逻辑,会把root里面的DOM标签或者说root的innerHtml作为模板
  6. 执行第三个生命周期函数beforeMuout
  7. 接着将函数和数据结合生成新的DOM,然后用新的DOM替换div为root的标签,此时vue的实例已经挂载到页面上了(页面中的hello world 就被展现到页面上了)
  8. 执行第四个生命周期函数Mounted
  9. 当数据发生变化的时候,第五个生命周期函数beforeUpdate会被执行
  10. 当数据发生变化,同时页面发生更新后,第六个生命周期函数updated会被执行
  11. 假如想把vue的应用销毁掉,或者说让vue不再接管id为root的DOM元素了,让它从DOM的挂载点上移除下来就用app.unmount()。当让vue的应用失效时,第七个生命周期函数bdforeUnmount会自动的执行
  12. 当vue实例销毁时,且DOM完全销毁之后,第八个生命周期函数unmounted会自动的执行

如下图: 比较beforeMountmounted

vue实例、组件与生命周期函数

我们可以发现在beforeMount中组件的内容还没有挂载到root节点上,因此获取不到页面中内容,但是在mounted时,也就是组件的内容被渲染到页面上时,取获取到页面中的内容就可以获取到

如下图: 比较beforeUpdateupdated

vue实例、组件与生命周期函数

当我们改变data中数据的时候,此时页面还没有重新渲染,因此beforeUpdate中打印的还是页面更新之前的内容hello world,当页面数据发生变化并且页面发生重新渲染之后,updated生命周期函数才会执行,此时页面中的内容已是重新渲染后的内容,所以打印bye world

如下图: 比较bdforeUnmountunmounted

vue实例、组件与生命周期函数

我们发现在bdforeUnmount时,也就是在vue应用销毁之前,获取到的页面中的内容还是不变的,但是unmounted时,也就是彻底的把vue实例销毁后,已经获取不到页面中的任何内容了

转载自:https://juejin.cn/post/7236325900718604347
评论
请登录