vue 生命周期笔记

生命周期：一个组件从创建到销毁的这个过程叫做生命周期生命周期钩子函数

1、组件从创建到销毁的过程

1、创建前创建后

2、挂载前挂载后

3、更新前更新后

4、销毁前销毁后

beforeCreate:

当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading

created:(*****)

创建后:

1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法

2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上

3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法，因此如果需要进行

前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定

那么这个属性身上就不会有getter/setter方法，因此数据也不会动态的进行改变

beforeMount：

挂载前：

数据和模板还没有进行相结合，在这个生命周期函数中我们可以进行数据最后的修改

在当前生命周期函数中是访问不到真实的DOM结构

mounted:(*****)

挂载后：

数据和模板已经结合，在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构

$refs

ref="值必须是整个VDom中唯一";

访问的时候通过this.$refs.值

ref与document的区别？

document是从整个页面去查找DOM结构，这个DOM结构肯定是已经插入到页面的DOM结构

ref是从当前vm的虚拟DOM中找到的当前元素,ref是从内存当中找到的DOM结构

beforeUpdate:

更新前：

当data中的数据发生了改变的时候就会执行

1、可以访问到真实的DOM结构

2、可以对数据做最后的修改

3、当前生命周期函数中的数据和模板还没有更新完毕

updated:

更新后：

1、数据更新后最新的DOM结构

2、在当前生命周期函数中需要特别的注意，因为当前函数是一个频繁触发的函数。

因此如果在当前生命周期函数中做一些事件绑定或者实例化的时候需要做一个提前判断

beforeDestroy:*

销毁前

1、在这个生命周期函数中，还是可以继续访问到真实的DOM结构以及data中的数据

2、一般我们都会在这个生命周期函数中做一些事件解绑/移除的操作

destroyted:

销毁后：

1、将DOM与数据之间的关联进行断开

2、在当前生命周期函数中是访问不到真实的DOM结构

以上生命周期函数中

多次执行的生命周期函数

1、beforeUpdate

2、updated*

组件第一个创建的时候会执行哪些生命周期函数

beforeCreate

created*

beforeMount

mounted*

innerText innerHTML outerText outerHTML

vm实例身上的方法

$mount() 手动设置挂载点例子：vm.$mount("#app");

$destroy(); 销毁

$forceUpdate 强制更新 (强制调用了render方法);

$on() 事件绑定

$emit() 事件触发

$off() 事件解绑

$once() 只绑定一次

转载于:https://www.cnblogs.com/tong-yao/p/10622890.html

vue 生命周期笔记相关推荐

Vue 学习笔记（2）Vue 生命周期、组件
Vue Vue 生命周期 Vue 中组件(Component) 全局组件的开发局部组件的开发组件中 props 的使用在组件上声明静态数据传递给组件内部在组件上声明动态数据传递给组件内部 pr ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
Vue生命周期(个人理解)
描述:今天进度到生命周期 other-teacher只讲了两个项目使用到的生命周期剩下的自己扩展,哎,自己来了兴趣,为啥,自己第一次面试的时候记得很清楚.面试官:"简单说一下你对vue生命 ...
标注图+部分举例聊聊Vue生命周期
"你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高." 现在项目中遇到了,好好回头总结一波Vue生命周期,以后用到的时候再来翻翻. 啥叫Vue生命周 ...
vue hot true 不起作用_从源码解读 Vuex 注入 Vue 生命周期的过程
第一篇文章我会结合 Vue 和 Vuex 的部分源码,来说明 Vuex 注入 Vue 生命周期的过程. 说到源码,其实没有想象的那么难.也和我们平时写业务代码差不多,都是方法的调用.但是源码的调用树会 ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
异步加载在Vue生命周期哪个阶段更合理
react高阶面试题中有这么一道:为什么异步请求数据在didMount阶段更合适?同为MVVM中的翘楚,Vue是否也有类似问题呢?另外,我在平时也无开发过程中也会发现,每个人选择的那个生命周期阶段去异 ...

vue 生命周期笔记

vue 生命周期笔记相关推荐

最新文章

热门文章

vue 生命周期 笔记

vue 生命周期 笔记相关推荐

最新文章

热门文章

vue 生命周期笔记

vue 生命周期笔记相关推荐