Vue 生命周期钩子函数

Vue生命周期

每个vue实例在被创建时都需要经过一系列初始化过程。

如设置数据监听、编译模板、将实例挂载到DOM、在数据变化时更新DOM等。

同时在这个过程中也会运行一些角坐生命周期钩子的函数,这给了用户在不同阶段添加自己代码的机会。

2.6.1版本有8个生命周期

beforeCreate created

beforeCreate

在实例创建之前执行,此时data数据访问不到,不能通过this修改data属性

created

在实例创建完执行,此时可以拿到data数据,可以通过this修改data属性

此处可发Ajax请求,因为可以修改属性

此处修改数据不会触发beforeUpdate和updated钩子函数

取不到最终渲染完成的dom

var vm = new Vue({
    el: "#app",
    data: {
        msg: "hello world"
    },
    beforeCreate() {
        console.log("before....");
    },
    created() {
        //3秒之后msg改变
        setTimeout(() => this.msg = "hahaha", 3000)
    }
})

beforeMounte mounted

beforeMounte

挂载之前,编译模板已经结束,还没最终渲染到页面

可以修改data属性,不能拿到html最终渲染的数据值

修改data不会触发update、beforeUpdate

mounted

真实的DOM结点已经渲染到页面,可以操作渲染后的DOM

可以访问和修改data属性,可以触发beforeUpdate、updated钩子函数

beforeUpdate updated

只有在mounted里面修改data时两者才会执行,在beforeMoute、created里修改数据都不会执行

注意不能在update和beforeUpdate里面改数据,会造成死循环

beforeDestroyed destroyed

当实例或组件销毁时(清理它与其他实例的连接,解绑所有指令事件监听)调用这两个钩子,如 vm.$destroy();

beforeDestroy

实例卸载之前调用,可以清理一些资源,防止内存泄漏

destroyed

实例卸载之后调用

总结

beforeCreate与created的区别:是否能操作data属性数据

beforeMounte与mounted的区别:是否能操作DOM渲染完成的结点,是否能触发update相关的两个钩子函数:beforeUpdate,updated

beforeUpdate,updated的区别:数据更新时函数执行顺序的区别

beforeDestroy和destoryed的区别:vue实例销毁时函数执行顺序的区别

原文地址:https://www.cnblogs.com/ltfxy/p/12596654.html

时间: 2024-10-06 18:44:17

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 生命周期: 一个组件从创建到销毁的过程 let vm = new Vue({ el : "id", data : { }, 1. beforeCreate(){ 1. 当vue实例化的时候会做一个初始化的操作,在这个生命周期函数里面我们可以做初始化的loading 2. 在当前函数中访问不到data中的属性,但是可以通过Vue的实例进行访问 vm."属性" console.log(beforeCreate) } 2. created(){ 1. 当befor

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