v-effect

Author: yyx990803

demos/effect.html

@@ -0,0 +1,9 @@
+<script type="module">
+  import { createApp } from '../src'
+  createApp().mount()
+</script>
+
+<div v-scope="{ count: 0 }">
+  <div v-effect="$el.textContent = count"></div>
+  <button @click="count++">++</button>
+</div>

index.html

@@ -5,15 +5,11 @@
 </style>
 <ul>
   <li><a href="/demos/data.html">v-scope</a></li>
+  <li><a href="/demos/effect.html">v-effect</a></li>
   <li><a href="/demos/bind.html">v-bind</a></li>
   <li><a href="/demos/on.html">v-on</a></li>
   <li><a href="/demos/if.html">v-if</a></li>
   <li><a href="/demos/for.html">v-for</a></li>
   <li><a href="/demos/model.html">v-model</a></li>
   <li><a href="/demos/reuse.html">Logic Reuse</a></li>
 </ul>
-
-<div v-scope="{ count: 0 }">
-  {{ count }}
-  <button @click="count++">inc</button>
-</div>

src/directives/effect.ts

@@ -0,0 +1,5 @@
+import { Directive } from '.'
+
+export const effect: Directive = ({ get, effect }) => {
+  effect(get)
+}

src/directives/index.ts

@@ -1,11 +1,12 @@
 import { Context } from '../walk'
-import { effect } from '@vue/reactivity'
+import { effect as rawEffect } from '@vue/reactivity'
 import { bind } from './bind'
 import { on } from './on'
 import { show } from './show'
 import { text } from './text'
 import { html } from './html'
 import { model } from './model'
+import { effect } from './effect'
 
 export interface Directive<T = Element> {
   (ctx: DirectiveContext<T>): (() => void) | void
@@ -14,7 +15,7 @@ export interface Directive<T = Element> {
 export interface DirectiveContext<T = Element> {
   el: T
   get: (exp?: string) => any
-  effect: typeof effect
+  effect: typeof rawEffect
   exp: string
   arg?: string
   modifiers?: Record<string, true>
@@ -27,5 +28,6 @@ export const builtInDirectives: Record<string, Directive<any>> = {
   show,
   text,
   html,
-  model
+  model,
+  effect
 }

src/index.ts

@@ -1,5 +1,6 @@
 export { createApp } from './app'
-export { reactive, effect } from '@vue/reactivity'
+export { nextTick } from './scheduler'
+export { reactive } from '@vue/reactivity'
 
 import { createApp } from './app'
 

src/scheduler.ts

@@ -2,11 +2,13 @@ let queued = false
 const queue: Function[] = []
 const p = Promise.resolve()
 
+export const nextTick = (fn: () => void) => p.then(fn)
+
 export const queueJob = (job: Function) => {
   if (!queue.includes(job)) queue.push(job)
   if (!queued) {
     queued = true
-    p.then(flushJobs)
+    nextTick(flushJobs)
   }
 }