remove v-init, use lifecycle events

Author: yyx990803

README.md

@@ -42,12 +42,16 @@ Or, use the ES modules build:
 <script>
 ```
 
-### `v-init`
+### Lifecycle Events
 
-Use `v-init` to execute one-off inline statements when an element is processed:
+You can listen to the `mounted` and `unmounted` lifecycle events for each element:
 
 ```html
-<div id="foo" v-init="console.log($el.id)"></div>
+<div
+  v-if="show"
+  @mounted="console.log('mounted!')"
+  @unmounted="console.log('unmounted!')"
+></div>
 ```
 
 ### `v-effect`
@@ -171,8 +175,8 @@ const html = ({ el, get, effect }) => {
 ### `petite-vue` only
 
 - `v-scope`
-- `v-init`
 - `v-effect`
+- `@mounted` & `@unmounted` events
 
 ### Has Different Behavior
 

examples/todomvc.html

@@ -137,7 +137,7 @@
     .mount('#app')
 </script>
 
-<div id="app" v-init="setupRouting()" v-effect="save()" v-cloak>
+<div id="app" @mounted="setupRouting" v-effect="save()" v-cloak>
   <section class="todoapp">
     <header class="header">
       <h1>todos</h1>

src/directives/index.ts

@@ -6,7 +6,6 @@ import { show } from './show'
 import { text } from './text'
 import { html } from './html'
 import { model } from './model'
-import { init } from './init'
 import { effect } from './effect'
 
 export interface Directive<T = Element> {
@@ -30,6 +29,5 @@ export const builtInDirectives: Record<string, Directive<any>> = {
   text,
   html,
   model,
-  init,
   effect
 }

src/directives/init.ts

@@ -1,6 +1,7 @@
 import { Directive } from '.'
 import { hyphenate } from '@vue/shared'
 import { listen } from '../utils'
+import { nextTick } from '../scheduler'
 
 // same as vue 2
 const simplePathRE =
@@ -34,6 +35,14 @@ export const on: Directive = ({ el, get, exp, arg, modifiers }) => {
       ? get(`(e => ${exp}(e))`)
       : get(`($event => { ${exp} })`)
 
+    // special lifecycle events
+    if (arg === 'mounted') {
+      nextTick(handler)
+      return
+    } else if (arg === 'unmounted') {
+      return () => handler()
+    }
+
     if (modifiers) {
       // map modifiers
       if (arg === 'click') {