Vue的生命周期函数中有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等函数。这些函数会在不同阶段执行，而before和after函数则表示在调用特定生命周期函数之前和之后运行的函数钩子。

new Vue({
el: '#app',
beforeCreate: function () {
console.log('beforeCreate');
},
created: function () {
console.log('created');
},
beforeMount: function () {
console.log('beforeMount');
},
mounted: function () {
console.log('mounted');
},
beforeUpdate: function () {
console.log('beforeUpdate');
},
updated: function () {
console.log('updated');
},
beforeDestroy: function () {
console.log('beforeDestroy');
},
destroyed: function () {
console.log('destroyed');
}
})

上述代码演示了Vue中生命周期函数beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed的调用顺序。其中before和after函数在各自生命周期函数之前和之后调用。

利用before和after函数，我们可以在相应的生命周期函数之前或之后进行额外的操作。例如，在beforeUpdate中可以检测数据变化并进行必要的更新，而在updated中则可以更新DOM元素显示。

总之，Vue的生命周期函数及其before和after钩子函数可以使我们在不同阶段对数据和DOM元素进行必要的操作，实现高效的开发和优秀的用户体验。