Vue声明周期（笔记-自己的理解）

来给我倒一杯java

已于 2022-02-18 21:44:01 修改

阅读量1.1k

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-02-17 22:32:10 首次发布

本文链接：https://blog.csdn.net/qq_49896911/article/details/122989808

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是vue的生命图示

一共有八个生命周期函数。

new Vue()

创建Vue实例相当于以下代码

var vm = new Vue({})

之后就是init Event 和 LifeCycle 初始化事件和生命周期函数

beforeCreate()

首先字面意思在创建之前，那么Vue会发生什么呢？

初始化data里面的数据
初始化方法事件
将data里面的数据交给观察者实例（watch）

此时若在代码中打印data里面的数据将undifined 因为是在初始化之前打印的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message:'hello world'
      },
      // new vue创建vue实例 -> init初始化生命周期函数 -> beforeCreated()
      beforeCreate() { 
        console.log(this.$el)
        console.log(this.message)
        console.log('----beforeCreate----') 
      }
    })
  </script>
</body>
</html>

created()

这时候数据初始化完毕，也已经有了methods里面的方法

在这个阶段，因为获得了data，那么我们就可以对后端接口发起请求，获取数据，这时候我们常常会写这样的代码：

created() {
  this.getData()
}

methods() {
  async getData(){
    awati xxx() //具体的请求方法
  }
}

接下来他会判断是否有挂载了el，其实就是在vue中需要这么一行代码

var vm = new Vue({
    el: '#app' //你html上的id 找到一个节点挂载
})

如果没挂载，那么等待挂载当有事件触发挂载

就是类似于以下这种写法

var vm = new Vue({})

vm.$mount('#app') //需要挂载上去

接下来vue会判断有没有vue实例里面参数是否含有tempate模板

如果有则编译template并渲染成dom

<!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>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    var vm = new Vue({
      data: {
        message: 'hello world'
      },
      template: '<div>我是模板内的{{message}}</div>',
      beforeMount(){
        console.log(this.$el)
      }
    })
    vm.$mount('#app')
  </script>
</body>

</html>

运行结果

那此时我们如果有外部的html结构呢，会渲染哪一个呢？

<!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>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <span>我是span里的{{message}</span>
  </div>
  <script>
    var vm = new Vue({
      data: {
        message:'hello world'
      },
      template: '<div>我是模板内的{{message}}</div>',
    })
    vm.$mount('#app')
  </script>
</body>
</html>

为啥呢

beforemount()

这个函数运行的时候我们已经初始化了dom，也已经渲染上去了，但是数据呢没有绑定在模板之中就是相当于#app获取的dom结构，里面的数据依旧是{{xxx}}这种形式

接下来要做的就是data中的数据渲染到dom结构中，经过vue里面的一系列操作，数据就实现了双向绑定。

再回到之前的话题，为啥外部有html结构，内部有template页面最终渲染的确是template呢

在这个函数执行之后，就要渲染成render函数，他呢直接将vue内部的template的转化成render函数，生命周期会执行 replace el ,所以vue会替换掉之前的(#app) dom结构，渲染成内部template。

然后呢render

mounted()

数据已经绑定成功，dom完全渲染，此时可以操作dom了。

下面给出总图以及代码

<!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>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  <script>
    var vm = new Vue({
      data: {
        message:'hello world'
      },
      template: '<div>我是模板内的{{message}}</div>',
      beforeCreate() { 
        console.log(this.$el)
        console.log(this.message)
        console.log('----beforeCreate----') 
      },
      created() {
        console.log(this.$el)
        console.log(this.message)
        console.log('----created----')
      },
      beforeMount () {
        console.log(this.$el)
        console.log(this.message)
        console.log('----beforeMount----')
      },
      mounted () {
        console.log(this.$el)
        console.log(this.message)
        console.log('----mounted----')
      },
      beforeDestroy(){
        console.log(this.$el)
        console.log(this.message)
        console.log('----beforeDestroy----')
      }
    })
    vm.$mount('#app')
  </script>
</body>
</html>

beforeUpdate()

数据的更新之前会new新得结点与之前节点比较并且查找到指定范围，最后更新里面的数据，并render渲染。

updated()

在updated也可以操作dom

不足之处希望大家批评指正

参考文章https://blog.csdn.net/weixin_42707287/article/details/111641286

来给我倒一杯java

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue声明周期（笔记-自己的理解）

这是vue的生命图示一共有八个生命周期函数。new Vue()创建Vue实例相当于以下代码var vm = new Vue({})之后就是init Event 和 LifeCycle 初始化事件和生命周期函数beforeCreate()首先字面意思在创建之前，那么Vue会发生什么呢？初始化data里面的数据初始化方法事件将data里面的数据交给观察者实例（watch）此时若在代码中打印data里面的数据将undifined 因为是在初始化之前打印的..
复制链接

扫一扫

专栏目录