vue生命周期钩子函数解读步骤

  

vue 生命周期:
  一个组件从创建到销毁的过程

let vm = new Vue({
  el : "id",
  data : {

  },
  1. beforeCreate(){
      1. 当vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading
      2. 在当前函数中访问不到data中的属性,但是可以通过Vue的实例进行访问 vm."属性"
      console.log(beforeCreate)
  }
  2. created(){
      1. 当beforeCreate执行完毕以后,会执行当前函数,在当前函数中我们可以访问data中的属性
      2. 当前生命周期函数执行的时候会将data中所有的属性和methods身上所有的方法添加到vue的实例身上,同时会将data中所有的属性添加一个getter/setter方法
      3. 如果需要进行前后端数据交互(ajax请求的时候)需要在当前生命周期函数中使用
      console.log(created)
  }
  3(1). 如果没有找到vue中的el 会使用
      vue的实例方法
      vm.$mount("id") 绑定el
      优先级
      vue中的el优先级比vm.$mount("id") 高
  3(2). 在找到data中的el时:
      new Vue({
      el :"id",
      //渲染虚拟DOM
      render : function(h){
      return h(App)
      },
      render : h => h(App) ,//es6返回值写法

      })
  4. 如果没有找到template模板的时候,就走outerHTML
      beforeMount(){
        beforeMount : 挂载前:数据和模板还没有相结合,
        (渲染)
        render函数初次被调用时:数据和模板还没有相结合,同时还没有渲染到html页面上,
        1. beforeMount作用:
            渲染前data中数据最后的修改
        console.log(beforeMount)
  }
  5. mounted(){
        mounted : 挂载后:数据和模板进行相结合,渲染成真实的DOM结构,
        1. 在当前生命周期函数里面我们就可以访问到真实的DOM结构,
        2. 在Vue中我们可以通过$refs来访问到真实的DOM结构
        3. ref类似于id一样 值必须是唯一的 访问时我们可以通过 :this.$refs.属性

        console.log(mounted)
  }
      5.(1). beforeUpdate(){
          beforeUpdate : 更新前,
          1. 只要data中的属性发生了改变,那么这个生命周期函数就会执行,render函数会再次执行
          2. 在这个生命周期函数中我们可以对数据进行最后的修改,同时也可以访问到最新的DOM结构和数据
          console.log(beforeUpdate)
      }
      5.(2). updated(){
          updated : 更新后,
          1. 当前生命周期函数中我们可以访问到最新的DOM结构(数据更新最新的DOM结构)和数据
      }

  6. beforeDestroy(){
      1.beforeDestroy 销毁前:在销毁之前还可以访问到DOM结构 以及相关的数据(data),
      2. 在这个生命周期函数中我们可以将绑定的事件进行移除
      console.log(beforeDestroy);
      vm.$destroy() 销毁组件
  }
  7. dertroyed(){
      dertroyed :销毁后,
      1. 在这个生命周期函数中将数据和模板之间的关系断开(函数自己销毁,不需要手动)
      2. 在这个生命周期函数中我们还是可以访问到data中的属性,但访问不到DOM结构了
  }

})

原文地址:https://www.cnblogs.com/LY69/p/10376703.html

时间: 2024-11-08 21:34:41

vue生命周期钩子函数解读步骤的相关文章

对vue生命周期/钩子函数的理解

对于实现页面逻辑交互等效果,我们必须知晓vue的生命周期,才能愉快的玩耍,知道我们写的东西应该挂载到哪里,vue官方给出的api讲解的那叫一个简单啊,如下: 所有的生命周期钩子自动绑定this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此this与你期待的 Vue 实例不同,this.fetchTodos的行为未定义. 下面附加

vue生命周期钩子函数

转载自:https://segmentfault.com/a/1190000008879966 vue生命周期探究(一) 前言 在使用vue开发的过程中,我们经常会接触到生命周期的问题.那么你知道,一个标准的工程项目中,会有多少个生命周期勾子吗?让我们来一起来盘点一下: 根组件实例:8个 (beforeCreate.created.beforeMount.mounted.beforeUpdate.updated.beforeDestroy.destroyed) 组件实例:8个 (beforeCr

Vue生命周期/钩子函数的理解

对于实现页面逻辑交互等效果,我们必须弄懂vue的生命周期,知道我们写的东西应该挂载到哪里.vue官方api给了简单的逻辑,如下: 所有的生命周期钩子自动绑定this上,因此你可以访问数据,属性和方法进行运算,所以要特别注意的是不能使用箭头函数来定义一个生命周期方法(例如created: () => this.fetchTodos()). 下面附加一张生命周期图示 <!DOCTYPE html> <html> <head> <title></tit

Vue 生命周期钩子函数

Vue生命周期 每个vue实例在被创建时都需要经过一系列初始化过程. 如设置数据监听.编译模板.将实例挂载到DOM.在数据变化时更新DOM等. 同时在这个过程中也会运行一些角坐生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会. 2.6.1版本有8个生命周期 beforeCreate created beforeCreate 在实例创建之前执行,此时data数据访问不到,不能通过this修改data属性 created 在实例创建完执行,此时可以拿到data数据,可以通过this修改da

VueRouter和Vue生命周期(钩子函数)

一.vue-router路由 1.介绍 vue-router是Vue的路由系统,用于定位资源的,在页面不刷新的情况下切换页面内容.类似于a标签,实际上在页面上展示出来的也是a标签,是锚点.router需要相应的js文件,可到官网下载或者使用CDN: https://unpkg.com/vue-router/dist/vue-router.js使用Vue需要引入相应的JS文件,可到官网下载或者直接使用CDN:https://cdn.jsdelivr.net/npm/[email protected

react中的生命周期钩子函数? 每个都是干什么用的?

首先react有10个生命周期钩子函数 挂载期constructor 数据接收 实现继承super(props)componentWillMount 数据挂载之前 可以操作数据 不可以操作domcomponentDidMount 数据挂载之后 可以操作数据和domrender 渲染组件 和 html 标签 更新期shouldComponentUpdate 检测组件内的变化 可以用作页面性能的优化(默认值为true)componentReceiveProps 接收组件传入输入数据component

vue实例的生命周期 —— 钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会. vue有8种生命周期函数: 钩子函数 触发的行为  在此阶段可以做的事情 beforeCreadted 在实例创建以前调用,没有实例化,数据访问不到 vue实例的挂载元素$el和数据对象data都为undefined,还未初始化.   加loading事件

vue 生命周期钩子

每个vue实例被创建时都会经历一系列初始化的过程,像是一个生命从无到有的过程,所以叫生命周期,而这个过程都有对应的不同阶段,也就对应了生命周期不同的钩子函数,这些生命周期函数,作为vue实例的属性使用,只有到了这一过程的时候,对应的函数才会被调用,总结下来有如下方法: beforeCreate:在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用: created:在实例创建完成后被立即调用.在这一步,实例已完成以下的配置:数据观测 (d

Vue生命周期钩子---2

vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执行. ps:下面代码可以直接复制出去执行 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="http