Examples vue following structures:
<script>
export default {
name: "App",
data() {//数据定义 函数方法，返回数据的方式
return {};
},
methods: {
// 组件的方法
},
watch: {
// watch监听方法，擅长处理的场景：一个数据影响多个数据
watch是去监听一个值的变化，然后执行相对应的函数。
},
computed: {
// computed擅长处理的场景：一个数据受多个数据影响
computed是计算属性，也就是依赖其它的属性计算所得出最后的值
},
beforeCreate () {
// 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
},
created () {
// （在实例创建完成后被立即调用。实例已经创建完成之后被调用。
在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，
watch/event 事件回调。然而，挂载阶段还没开始，
$el 属性目前不可见。初始化数据请求写这里
},
beforeMount () {
// 在挂载开始之前被调用：相关的 render 函数首次被调用。
},
mounted () {//页面初始化方法
// 编译好的HTML挂载到页面完成后执行的事件钩子
初始化数据除非有依赖dom的放在mounted()里面，加个nextTick
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
// 此钩子函数中一般会做一些ajax请求获取数据进行数据初始化
console.log("Home done");
},
beforeUpdate () {
// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
// 只有更新和模板发生关联的数据才会触发这个钩子
// 和模板绑定的数据更新之前
},
updated () {
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
// 该钩子在服务器端渲染期间不被调用。
},
beforeDestroy () {
// 实例销毁之前调用。在这一步，实例仍然完全可用。一般用于清除定时器
//$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer); })
},
destroyed () {
// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
}
};
</script>
--------------------------------------------------------
vue lifecycle hook creates a total of eight plays in the destruction of the instance instance vue various times were as follows for each call
First vue in the implementation of new for initialization command
. 1, beforeCreate () function is called, and the initialization response capabilities
2, initialization is completed Subsequently call create () function
Next will parse html template, the template from the template to acquire or render, or in the initialization has been written from the get go this time you can create a DOM
3, after the end of the hook trigger beforeMount create DOM
4, mounted trigger (but not necessarily have been added to the DOM, you can use nextTick to ensure this) after the element is created.
this.$nextTick()
//mounted钩子中使用判断元素是否已经 添加到DOM上并传入个回调函数，在回调函数中添加需要在元素被添加到 DOM 后运行的代码。So far initialization has been completed and added to the DOM elements on the user may have seen our components
5, when processing data update beforeUpdate) function will be triggered
6, after applying the update, updated hook is triggered. When multiple data changes, the hook function can be triggered multiple times
7, before the component dom gone from the inside, will trigger beforeDestroy () hook function
8, triggering Destory () function when the assembly is a go
