VUE PROTOTYPING
这个概念主要是为了能够撇开庞大的项目依赖，独立debug单个组件。
安装vue/cli-service-global
npm install -g @vue/cli-service-global
开始使用prototyping:创建一个组件命名为lifecycle.vue的文件
<template>
<div>
<h1>Vue Lifecycle hooks</h1>
<ul>
<li v-for="(item, n) in list" :key="n">
{{ item }} <a @click="deleteItem(item)">Delete</a>
</li>
</ul>
<strong>Add a new item in the list array and save while running localhost to preview the destroy hooks</strong>
</div>
</template>
<script>
export default {
data() {
return {
list: [
'Vue Lifecycle Hooks',
'beforeCreate : Runs when your component has been initialized. data has not been made reactive and events are not set up in your DOM',
'created : You will be able to access reactive data and events, but the templates and DOM are not mounted or rendered. This hook is generally good to use when requesting asynchronous data from a server since you will more than likely want this information as early as you can before the virtual DOM is mounted',
'beforeMount : A very uncommon hook as it runs directly before the first render of your component and is not called in Server-Side Rendering',
'mounted : Mounting hooks are among the most common hooks you will use since they allow you to access your DOM elements so non-Vue libraries can be integrated',
'beforeUpdate : Runs immediately after a change to your component occurs, and before it has been re-rendered. Useful for acquiring the state of reactive data before it has been rendered',
'updated : Runs immediately after the beforeUpdate hook and re-renders your component with new data changes',
'beforeDestroy : Fired directly before destroying your component instance. The component will still be functional until the destroyed hook is called, allowing you to stop event listeners and subscriptions to data to avoid memory leaks',
'destroyed : All the virtual DOM elements and event listeners have been cleaned up from your Vue instance. This hook allows you to communicate that to anyone or any element that needs to know this was completed'
],
}
},
methods: {
deleteItem(value) {
this.list = this.list.filter(item => item !== value)
},
},
beforeCreate() {
alert('beforeCreate: data is static, thats it')
},
created() {
alert('created: data and events ready, but no DOM')
},
beforeMount() {
alert('beforeMount: $el not ready')
},
mounted() {
alert('mounted: DOM ready to use')
},
beforeUpdate() {
alert(
'beforeUpdate: we know an update is about to happen, and have the data'
)
},
updated() {
alert('updated: virtual DOM will update after you click OK')
},
beforeDestroy() {
alert('beforeDestroy: about to blow up this component')
},
destroyed() {
alert('destroyed: this component has been destroyed')
},
}
</script>
