vue父子组件的生命周期顺序
vue父子组件的生命周期顺序
加载渲染过程
1 | 父beforeCreate -> 父created-> 父beforeMount-> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted |
父组件会先执行到beforeMount，接着会执行子组件钩子到挂载结束，再挂载父组件。
子组件更新过程
1 | 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated |
父组件更新过程
1 | 父beforeUpdate -> 父updated |
销毁过程
1 | 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed |
来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的
docs/《Vue》笔记/02.组件/90.vue父子组件的生命周期顺序.md。
原作者：xugaoyi。许可证：MIT。
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 Barry's Blog！
相关推荐
2020-02-15
非父子组件传值
非父子组件间传值当组件的嵌套多时，非父子组件间传值就显得复杂，除了使用vuex实现之外，还可以通过Bus（或者叫 总线/发布订阅模式/观察者模式）的方式实现非父子组件间传值。 123456789101112131415161718192021222324252627282930313233343536373839404142<div id="root"> <child1 content="组件1：点我传出值"></child1> <child2 content="组件2"></child2></div><script type="text/javascript"> Vue.prototype.bus = new Vue() // 每个Vue原型上都会有bus属性,而且指向同一个Vue实例 Vue.component('child1', ...
2020-02-17
使用animate库
vue中使用Animate.css库自定义过渡类名我们可以通过以下 attribute 来自定义过渡类名： enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css结合使用十分有用。 使用Animate.css库1234567<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hel...
2020-02-04
v-if vs v-show
v-if vs v-showAPI v-if 根据渲染条件决定是否把元素渲染到DOM页面，而v-show不管渲染条件是什么，都会把元素渲染到DOM页面，只是简单的切换CSS的显示隐藏。 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/30.v-if vs v-show.md。原作者：xugaoyi。许可证：MIT。
2020-02-04
计算属性 vs 方法 vs 侦听属性
计算属性 vs 方法 vs 侦听属性API 如果一个功能同时可以使用计算属性(computed)、方法(methods)、侦听属性(watch)来实现的时候推荐使用计算属性。 计算属性 方法 侦听属性 计算属性是基于它们的响应式依赖进行缓存的 每当触发重新渲染时，调用方法将总会再次执行函数 有缓存，但相比计算属性，实现起来要复杂很多。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/20.计算属性 vs 方法 vs 侦听属性.md。原作者：xugaoyi。许可证：MIT。
2020-02-13
使用组件的细节点
使用组件的细节点解析 DOM 模板时的注意事项1234567891011121314151617<div id="root"> <table> <tbody> <row></row> <row></row> <row></row> </tbody> </table></div><script type="text/javascript"> Vue.component('row', { template: '<tr><td>this is a row</td></tr>' }) var vm = new Vue({ ...
2020-02-04
兄弟组件传值
兄弟组件传值子组件1中把值传到父组件,父组件获取值传入子组件2 父组件： 123456789101112131415<子组件1 @方法名x="方法名y"></子组件1><子组件2 :值名称x="值x"></子组件2 >data() { return { 值x: '' }},methods: { 方法名y(值) { this.值x = 值 }} 子组件1： 1this.$emit('方法名x', 值) // 传出值 子组件2： 123456props: { 值名称x: { // 接收父组件传入值 type: String, default: '' }} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔...
