support v-once

Author: yyx990803

README.md

@@ -309,6 +309,7 @@ Check out the [examples directory](https://github.com/vuejs/petite-vue/tree/main
 - `v-html`
 - `v-text`
 - `v-pre`
+- `v-once`
 - `v-cloak`
 - `reactive()`
 - `nextTick()`
@@ -324,7 +325,6 @@ Some features are dropped because they have a relatively low utility/size ratio
 - Transition, KeepAlive, Teleport, KeepAlive
 - `v-for` deep destructure
 - `v-on="object"`
-- `v-once`
 - `v-is` & `<component :is="xxx">`
 - `v-bind:style` auto-prefixing
 

index.html

@@ -17,6 +17,7 @@ <h2>Tests</h2>
   <li><a href="/tests/if.html">v-if</a></li>
   <li><a href="/tests/for.html">v-for</a></li>
   <li><a href="/tests/model.html">v-model</a></li>
+  <li><a href="/tests/once.html">v-once</a></li>
   <li><a href="/tests/multi-mount.html">Multi mount</a></li>
 </ul>
 

src/walk.ts

@@ -29,6 +29,10 @@ export const createContext = (parent?: Context): Context => {
     blocks: [],
     cleanups: [],
     effect: (fn) => {
+      if (inOnce) {
+        queueJob(fn)
+        return fn as any
+      }
       const e: ReactiveEffect = rawEffect(fn, {
         scheduler: () => queueJob(e)
       })
@@ -42,6 +46,7 @@ export const createContext = (parent?: Context): Context => {
 const dirRE = /^(?:v-|:|@)/
 const modifierRE = /\.([\w-]+)/g
 const interpolationRE = /\{\{([^]+?)\}\}/g
+let inOnce = false
 
 export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
   const type = node.nodeType
@@ -73,6 +78,12 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
       }
     }
 
+    // v-once
+    const hasVOnce = checkAttr(el, 'v-once') != null
+    if (hasVOnce) {
+      inOnce = true
+    }
+
     // process children first before self attrs
     walkChildren(el, ctx)
 
@@ -92,6 +103,10 @@ export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
     if (deferredModel) {
       processDirective(el, 'v-model', deferredModel, ctx)
     }
+
+    if (hasVOnce) {
+      inOnce = false
+    }
   } else if (type === 3) {
     // Text
     const data = (node as Text).data

tests/once.html

@@ -0,0 +1,16 @@
+<script type="module">
+  import { createApp } from '../src'
+  createApp().mount()
+</script>
+
+<div v-scope="{ count: 5 }">
+  {{ count }}
+  <div v-once>
+    <h2>Once</h2>
+    {{ count }}
+    <span v-text="count"></span>
+    <span v-for="i in count">{{ i }}</span>
+  </div>
+  <span v-text="count"></span>
+  <button @click="count++">++</button>
+</div>