added Options/Lifecycle APIs

Author: User

API.js

@@ -2,6 +2,7 @@ const G_C = require('./apis/globalconfig')
 const G_API = require('./apis/globalapi')
 const O_D = require('./apis/optionsdata')
 const O_DOM = require('./apis/optionsdom')
+const O_LH = require('./apis/optionslifecyclehooks')
 
 const GlobalConfig = [
    G_C.SILENT,
@@ -45,10 +46,25 @@ const OptionsDOM = [
     O_DOM.RENDER_ERROR
 ]
 
+const OptionsLifecycleHooks = [
+    O_LH.BEFORE_CREATE,
+    O_LH.CREATED,
+    O_LH.BEFORE_MOUNT,
+    O_LH.MOUNTED,
+    O_LH.BEFORE_UPDATE,
+    O_LH.UPDATED,
+    O_LH.ACTIVATED,
+    O_LH.DEACTIVATED,
+    O_LH.BEFORE_DESTROY,
+    O_LH.DESTROYED
+
+]
+
 
 module.exports = {
     GlobalConfig,
     GlobalAPI,
     OptionsData,
-    OptionsDOM
+    OptionsDOM,
+    OptionsLifecycleHooks
 } 

apis/optionsdom.js

@@ -24,7 +24,7 @@ const EL = {
                         Runtime + Compiler build of Vue should be used.`
                         ,
 }
-                    // untested
+                    
 const TEMPLATE = {
     category: 'Options/DOM',
     name: 'template',

apis/optionslifecyclehooks.js

@@ -0,0 +1,118 @@
+const chalk = require('chalk')
+const custom = require('../customcolors')
+const colorComment = custom.colorComment
+const colorPrimitive = custom.colorPrimitive
+const colorError = custom.colorError
+const colorArgs = custom.colorArgs
+
+const cat = 'Options/Lifecycle Hooks'
+
+const BEFORE_CREATE = {
+    category: cat,
+    name: 'beforeCreate',
+    type: 'Function',
+    details: `Called synchronously after the instance has just been initialized,
+                        before data observation and event/watcher setup.`
+}
+
+const CREATED = {
+    category: cat,
+    name: 'created',
+    type: 'Function',
+    details: `Called synchronously after the instance is created.
+                        At this stage, the instance has finished processing the options
+                        which means the following have been set up: data observation, computed
+                        properties, methods, watch/event callbacks. However, the mounting phase
+                        has not been started, and the ${colorArgs('$el')} property will not be available yet.`
+}
+
+const BEFORE_MOUNT = {
+    category: cat,
+    name: 'beforeMount',
+    type: 'Function',
+    details: `Called right before the mounting begins: the ${colorArgs('render')} function is
+                        about to be called for the first time.
+                        ${chalk.bold('This hook is not called during server-side rendering')}.
+    `
+}
+
+const MOUNTED = {
+    category: cat,
+    name: 'mounted',
+    type: 'Function',
+    details: `Called after the instance has just been mounted where ${colorArgs('el')} is replaced by the newly created ${colorArgs('vm.$el')}.
+                        If the root instance is mounted to an in-document element, ${colorArgs('vm.$el')} will also be in-document
+                        when ${colorArgs('mounted')} is called. ${chalk.bold('This hook is not called during server-side rendering')}.
+    
+    `
+}
+
+const BEFORE_UPDATE = {
+    category: cat,
+    name: 'beforeUpdate',
+    type: 'Function',
+    details: `Called when the data changes, before the virtual DOM is re-rendered and patched.
+                        You can perform further state changes in this hook and they will not trigger additional re-renders.
+                        ${chalk.bold('This hook is not called during server-side rendering')}.
+    
+    `
+}
+
+const UPDATED = {
+    category: cat,
+    name: 'updated',
+    type: 'Function',
+    details: `Called after a data change causes the virtual DOM to be re-rendered and patched.
+                        The component’s DOM will have been updated when this hook is called,
+                        so you can perform DOM-dependent operations here. However, in most cases
+                        you should avoid changing state inside the hook. To react to state changes,
+                        it’s usually better to use a ${chalk.green('computed property')} or ${chalk.green('watcher')} instead.
+                        ${chalk.bold('This hook is not called during server-side rendering')}.
+    `
+}
+
+const ACTIVATED = {
+    category: cat,
+    name: 'activated',
+    type: 'Function',
+    details: `Called when a kept-alive component is activated.
+                        ${chalk.bold('This hook is not called during server-side rendering')}.`
+}
+
+const DEACTIVATED = {
+    category: cat,
+    name: 'deactivated',
+    type: 'Function',
+    details: `Called when a kept-alive component is deactivated.
+                        ${chalk.bold('This hook is not called during server-side rendering')}.`
+}
+
+const BEFORE_DESTROY = {
+    category: cat,
+    name: 'beforeDestroy',
+    type: 'Function',
+    details: `Called right before a Vue instance is destroyed. At this stage the instance is
+                        still fully functional. ${chalk.bold('This hook is not called during server-side rendering')}.`
+}
+
+const DESTROYED = {
+    category: cat,
+    name: 'destroyed',
+    type: 'Function',
+    details: `Called after a Vue instance has been destroyed. When this hook is called, all directives of the Vue instance
+                        have been unbound, all event listeners have been removed, and all child Vue instances have also been
+                        destroyed. ${chalk.bold('This hook is not called during server-side rendering')}.`
+}
+
+module.exports = {
+    BEFORE_CREATE,
+    CREATED,
+    BEFORE_MOUNT,
+    MOUNTED,
+    BEFORE_UPDATE,
+    UPDATED,
+    ACTIVATED,
+    DEACTIVATED,
+    BEFORE_DESTROY,
+    DESTROYED
+}

vue-help.js

@@ -7,6 +7,7 @@ const gc = api.GlobalConfig
 const ga = api.GlobalAPI
 const od = api.OptionsData
 const odom = api.OptionsDOM
+const olh = api.OptionsLifecycleHooks
 
 V.delimiter('vue-help$').show()
 
@@ -196,4 +197,66 @@ V.command('renderError', 'Options/DOM: #renderError').action(function(args, call
     const w = odom[3]
     this.log(O.logOptions(w))
     callback()
+})
+
+// Options/Lifecycle Hooks
+
+V.command('beforeCreate', 'Options/Lifecycle Hooks: #beforeCreate').action(function(args, callback){
+    const w = olh[0]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('created', 'Options/Lifecycle Hooks: #created').action(function(args, callback){
+    const w = olh[1]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('beforeMount', 'Options/Lifecycle Hooks: #beforeMount').action(function(args, callback){
+    const w = olh[2]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('mounted', 'Options/Lifecycle Hooks: #mounted').action(function(args, callback){
+    const w = olh[3]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('beforeUpdate', 'Options/Lifecycle Hooks: #beforeUpdate').action(function(args, callback){
+    const w = olh[4]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('updated', 'Options/Lifecycle Hooks: #updated').action(function(args, callback){
+    const w = olh[5]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('activated', 'Options/Lifecycle Hooks: #activated').action(function(args, callback){
+    const w = olh[6]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('deactivated', 'Options/Lifecycle Hooks: #deactivated').action(function(args, callback){
+    const w = olh[7]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('beforeDestroy', 'Options/Lifecycle Hooks: #beforeDestroy').action(function(args, callback){
+    const w = olh[8]
+    this.log(O.logOptions(w))
+    callback()
+})
+
+V.command('destroyed', 'Options/Lifecycle Hooks: #destroyed').action(function(args, callback){
+    const w = olh[9]
+    this.log(O.logOptions(w))
+    callback()
 })