likes
comments
collection
share

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

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

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会自动的执行

如下图： 比较beforeMount和mounted

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

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

如下图： 比较beforeUpdate和updated

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

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

如下图： 比较bdforeUnmount和unmounted

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

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

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