feat(all): 添加评论

runlong-yao · Aug 26, 2024 · 5985fad · 5985fad
1 parent 8cae984
commit 5985fad
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 2 deletions.
diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts
@@ -526,6 +526,7 @@ const emptyAppContext = createAppContext()
 let uid = 0
 
 export function createComponentInstance(
+  //组件对应的vnode
   vnode: VNode,
   parent: ComponentInternalInstance | null,
   suspense: SuspenseBoundary | null,

diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
@@ -359,6 +359,9 @@ const isElementRoot = (vnode: VNode) => {
   )
 }
 
+//性能优化，对于过于庞大的渲染，可以用组件来避免重复渲染，在渲染前会对组件进行prop的比较
+//shouldUpdateComponent => hasPropsChanged => false
+
 export function shouldUpdateComponent(
   prevVNode: VNode,
   nextVNode: VNode,

diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
@@ -1224,6 +1224,7 @@ function baseCreateRenderer(
     // mounting
     const compatMountInstance =
       __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
+    //instance = ComponentIntertnalInstance
     const instance: ComponentInternalInstance =
       compatMountInstance ||
       (initialVNode.component = createComponentInstance(
@@ -1397,7 +1398,7 @@ function baseCreateRenderer(
           if (__DEV__) {
             startMeasure(instance, `render`)
           }
-          //VNode
+          //componentInstance => VNode
           const subTree = (instance.subTree = renderComponentRoot(instance))
           if (__DEV__) {
             endMeasure(instance, `render`)
@@ -1474,7 +1475,6 @@ function baseCreateRenderer(
         initialVNode = container = anchor = null as any
       } else {
         let { next, bu, u, parent, vnode } = instance
-
         if (__FEATURE_SUSPENSE__) {
           const nonHydratedAsyncRoot = locateNonHydratedAsyncRoot(instance)
           // we are trying to update some async comp before hydration

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
@@ -526,6 +526,7 @@ export const createVNode = (
   __DEV__ ? createVNodeWithArgsTransform : _createVNode
 ) as typeof _createVNode
 
+//响应式数据改变，肯定导致vNode重新生成
 function _createVNode(
   type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
   props: (Data & VNodeProps) | null = null,

diff --git a/test/index2.html b/test/index2.html
@@ -0,0 +1,68 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+</head>
+<body>
+    <div id="app">
+
+    </div>
+</body>
+
+<script type="module">
+import { createApp,h,ref,defineComponent,reactive } from "../packages/vue/dist/vue.esm-browser.prod.js";
+const Comp =  defineComponent({
+    props:['data'],
+    render(){
+        console.log("Comp render")
+        return [
+            h("h1", `value:${this.data}`),
+            h("h1", `${Date.now()}`)
+        ];
+    }
+})
+createApp({
+    setup(){
+        // const count = ref(0)
+        // const title = ref("这是标题")
+
+        const data = reactive({
+            title:"这是标题",
+            count:0
+        })
+
+        function inc() {
+            data.count++
+        }
+        function titleInc() {
+            data.title = data.title + 1
+        }
+
+        return {
+            data,
+            inc,
+            titleInc
+        }
+    },
+    render(){
+        console.log('app render');
+
+        //vNode
+        return [
+            h("h1",this.data.title),
+            h(Comp, {data: this.data.count}),
+            h("button", {
+                onclick: this.inc
+            }, "inc"),
+            h("button", {
+                onclick: this.titleInc
+            }, "titleInc"),
+            h("h1", `value:${Date.now()}`),
+        ];
+    }
+}).mount("#app");
+
+//mount
+</script>
+</html>
diff --git a/test/index3.html b/test/index3.html
@@ -0,0 +1,69 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+</head>
+<body>
+    <div id="app">
+
+    </div>
+</body>
+
+<script type="module">
+import { createApp,h,ref,defineComponent,reactive } from "../packages/vue/dist/vue.esm-browser.prod.js";
+const Comp =  defineComponent({
+    props:['data'],
+    render(){
+        console.log("Comp render")
+        return [
+            h("h1", `value:${this.data}`),
+            h("h1", `${Date.now()}`)
+        ];
+    }
+})
+createApp({
+    setup(){
+        const count = ref(0)
+        const title = ref("这是标题")
+
+        // const data = reactive({
+        //     title:"这是标题",
+        //     count:0
+        // })
+
+        function inc() {
+            count.value++
+        }
+        function titleInc() {
+            title.value = title.value + 1
+        }
+
+        return {
+            count,
+            title,
+            inc,
+            titleInc
+        }
+    },
+    render(){
+        console.log('app render');
+
+        //vNode
+        return [
+            h("h1",this.title),
+            h(Comp, {data: this.count}),
+            h("button", {
+                onclick: this.inc
+            }, "inc"),
+            h("button", {
+                onclick: this.titleInc
+            }, "titleInc"),
+            h("h1", `value:${Date.now()}`),
+        ];
+    }
+}).mount("#app");
+
+//mount
+</script>
+</html>
diff --git a/test/index4.html b/test/index4.html
@@ -0,0 +1,76 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Index</title>
+</head>
+<body>
+    <div id="app">
+
+    </div>
+</body>
+
+<script type="module">
+import { createApp,h,ref,defineComponent,reactive } from "../packages/vue/dist/vue.esm-browser.prod.js";
+//内部的count只会重新渲染内部组件
+const Comp =  defineComponent({
+    setup(){
+        const count = ref(1)
+        function inc() {
+            count.value++
+        }
+        return {count,inc}
+    },
+    render(){
+        return [
+            h("h1", `value:${this.count}`),
+            h("h1", `${Date.now()}`),
+            h("button", {
+                onclick: this.inc
+            }, "inc"),
+        ];
+    }
+})
+createApp({
+    setup(){
+        const count = ref(0)
+        const title = ref("这是标题")
+
+        // const data = reactive({
+        //     title:"这是标题",
+        //     count:0
+        // })
+
+        function inc() {
+            count.value++
+        }
+        function titleInc() {
+            title.value = title.value + 1
+        }
+
+        return {
+            count,
+            title,
+            inc,
+            titleInc
+        }
+    },
+    render(){
+        console.log('app render');
+
+        //vNode
+        return [
+            h("h1",this.title),
+            h(Comp, {data: this.count}),
+
+            h("button", {
+                onclick: this.titleInc
+            }, "titleInc"),
+            h("h1", `value:${Date.now()}`),
+        ];
+    }
+}).mount("#app");
+
+//mount
+</script>
+</html>