Vue生命周期beforeUpdate()和updated()

1、beforeUpdate()是针对视图层的，只有页面中渲染的数据发生改变或者渲染，才会触发这个生命周期函数

<template><div></div>
</template>
export default {data() {return {msg: 0,};},mounted(){this.msg = 1; //msg数据改变了},beforeUpdate(){console.log(this.msg); //没有触发}}

<template><div>{{msg}}</div>
</template>
export default {data() {return {msg: 0,};},mounted(){this.msg = 100; //msg数据改变了},beforeUpdate(){console.log(this.msg); //100this.msg = 200  //在beforeUpdate()中改变数据console.log(this.msg); //200  数据改变 但不会触发本身}}

2、updated()中修改数据是会触发beforeUpdate()的

<template><div class="about"><h1>This is an about page</h1><h1>This is an about page</h1><h1>This is an about page</h1><h2>-----------------------</h2>{{msg}}</div>
</template>
<script>export default {data() {return {msg: 0,};},mounted(){this.msg = 100;},beforeUpdate(){console.log(this.msg); // 第一次100  第二次300},updated(){console.log(this.msg);//第一次100  第二次300this.msg = 300;console.log(this.msg);//第一次300  第二次300}}
</script>

Vue生命周期beforeUpdate()和updated()相关推荐

Vue生命周期，mounted，destory,beforedestory,updated,
Vue生命周期教程 Vue 生命周期就是一个 Vue 实例从创建初始化到最终被销毁的过程.Vue 生命周期主要涉及到八个函数,分别为 beforeCreate.created.beforeMount. ...
vue生命周期updated
vue生命周期updated 不管是通过父组件props接收的数据还是组件本身data里的数据,只要在页面中使用这些数据,这些数据变化,都会触发组件的updated生命周期:如果数据不在页面中使用,那 ...
Vue 生命周期记录_学习笔记
官方给出的设计图入戏为了能更好的理解这个图呢,写了下面的demo <!DOCTYPE html> <html><head><meta charset=&qu ...
标注图+部分举例聊聊Vue生命周期
"你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高." 现在项目中遇到了,好好回头总结一波Vue生命周期,以后用到的时候再来翻翻. 啥叫Vue生命周 ...
少侠请重新来过 - Vue学习笔记(二) - Vue生命周期
Vue 生命周期和钩子每一个vue实例创建时,会经历一段初始化的过程,同时会调用其生命周期钩子,实例的钩子this指向它的Vue实例,不需要在钩子用箭头函数. <template>< ...
vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
异步加载在Vue生命周期哪个阶段更合理
react高阶面试题中有这么一道:为什么异步请求数据在didMount阶段更合适?同为MVVM中的翘楚,Vue是否也有类似问题呢?另外,我在平时也无开发过程中也会发现,每个人选择的那个生命周期阶段去异 ...
一文带你吃透Vue生命周期（结合案例通俗易懂）
文章目录本篇学习目标 1. vue生命周期 1.0_人的-生命周期 1.1_钩子函数 1.2_初始化阶段 1.3_挂载阶段 1.4_更新阶段 1.5_销毁阶段 2. axios 2.0_axios基 ...
Vue 生命周期LIFECYCLE是8个吗？
vue生命周期钩子个数是:11个. export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounte ...

Vue生命周期beforeUpdate()和updated()

Vue生命周期beforeUpdate()和updated()相关推荐

最新文章

热门文章