vue生命周期updated

不管是通过父组件props接收的数据还是组件本身data里的数据，只要在页面中使用这些数据，这些数据变化，都会触发组件的updated生命周期；如果数据不在页面中使用，那么不会触发组件的updated生命周期。

父组件：

<template><div class='father-view'><h3>父组件</h3><div class='flex-view'><span>name：</span><el-inputv-model="nameInput"class='name-input'/></div><div class='flex-view'><span>age：</span><el-input v-model="ageInput" /></div><Child:name="nameInput":age="ageInput"/></div>
</template><script>
import Child from './components/Child.vue'
export default {components: { Child },data() {return {nameInput: '',ageInput: ''}}
}
</script><style lang="stylus">
.father-view {border: 1px solid greenpadding: 20px.flex-view {display: flexjustify-content: flex-startspan {width: 100px}}.name-input {margin-bottom: 20px}
}
</style>

子组件：

<template><div class="child-view"><h3>子组件</h3><p>父组件传递给子组件的参数： {{ name }}</p><el-inputtype="text"v-model="myName"/></div>
</template><script>
export default {props: {name: {type: String,default: ''},age: {type: String,default: ''}},data() {return {myName: '',myAge: '',searchValue: ''}},watch: {name: {handler(n) {console.log('子组件watch监听props数据name的变化')this.searchValue = n}},age(n) {this.myAge = n;console.log('子组件watch监听props数据age的变化')}},updated() {console.log('子组件updated生命周期数据变化')}
}
</script><style lang="stylus">
.child-view {margin-top: 150pxpadding: 20pxborder: 1px solid red
}
</style>

从上例子中能看出，父组件通过prop传给子组件的name在页面中使用，name改变，那么触发子组件的updated生命周期；父组件通过prop传给子组件的age没有在页面中使用，age改变，那么没有触发子组件的updated生命周期。子组件的data数据myName改变，在页面中使用，触发updated生命周期；子组件的data数据myAge改变，没有在页面中使用，没有触发updated生命周期。

vue生命周期updated相关推荐

Vue生命周期，mounted，destory,beforedestory,updated,
Vue生命周期教程 Vue 生命周期就是一个 Vue 实例从创建初始化到最终被销毁的过程.Vue 生命周期主要涉及到八个函数,分别为 beforeCreate.created.beforeMount. ...
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] vue生命周期总共有几个阶段？
[vue] vue生命周期总共有几个阶段? beforeCreate:在 new 一个 vue 实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建.created:data 和 met ...

vue生命周期updated

vue生命周期updated

vue生命周期updated相关推荐

最新文章

热门文章