Vue

by Samuel Fullman

HTML

<div id="app">
  Main app stats: {{ stats }} - {{ count }}
  <br>
  <my-component></my-component>
  <br>
  This fiddle demonstrates the progression of lifecycle hooks for a Vue application as well as components and subcomponents.  Vue's logical process is very intuitive and there are no surprises.  Be sure and have the console visible when you run this.<br><br>
  In terms of actual display of the HTML changes, Chrome appears to lag behind the `updated` hook (or it's somehow accelerated the alerts); watch carefully and you notice the correct and expected behavior in Firefox, though the console output is the same (although Chrome has this weird thing where it populates `console.log(this.$el)` onto the line after the alert).
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Arial;
  color: #444;
}

#app {
  background: #eee;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

Vue

/**
     * This script allows you to pause and see the progression of app being compiled.  After testing I have found that Firefox's rendering, compared to the console output, is as I would expect; the page is updated to the degree that I'd expect on each alert().  For Chrome this is not the case.  Whether Chrome is just lagging on the rendering, or accelerating the alerts, I'm not sure.
     */
    var app;     //this is not needed as long as we don't need an external reference to the app

    //the component method alone will not call any of these hooks; Vue apparently stores these in memory and they only get called when Vue sees it has a match in a parent component and needs to render one of them.
    Vue.component('my-component', {
    	template: '<span>My component: {{ stats }} - {{ count }} <my-sub-component></my-sub-component></span>',
        data: function(){
    		return {
    			stats: 'component stats here',
                count: 0,
            }
        },
        beforeCreate: function(){
        	console.log('(my component beforeCreate)');
        },
		created: function(){
			console.log('(my component created)');
		},
		beforeMount: function(){
			console.log('(my component beforeMount)');
		},
		mounted: function(){
			console.log('(my component mounted)');
		},
		beforeUpdate: function(){
			console.log('(my component beforeUpdate)');
		},
		updated: function(){
			console.log('(my component updated)');
		},
    });

	Vue.component('my-sub-component', {
		template: '<div><strong>sub-component here</strong></div>',
		data: function(){
			return {
			}
		},
		beforeCreate: function(){
			console.log('(my sub-component beforeCreate)');
		},
		created: function(){
			console.log('(my sub-component created)');
		},
		beforeMount: function(){
			console.log('(my sub-component beforeMount)');
		},
		mounted: function(){
			console.log('(my sub-component mounted)');
		},
		beforeUpdate: function(){
			console.log('(my sub-component...