函数式组件

llifangyin · Feb 19, 2025 · 484c248 · 484c248
1 parent e3c588b
commit 484c248
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 58 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,11 @@
-# vue3-learn vue3的使用项目
-cd vue3-learn
-npm install
-npm dev
+# vue3-learn
 
 
-# source-code-analysis  vue3的源码分析
+1. **source-code-analysis** 
+ vue3的**源码分析** 从0到1逐步手敲vue3源码
 
+2. **ssr**
+**服务端渲染demo**
 
-# ssr ssr项目demo
+3. **vue-project**
+**vue官网深度指南** **vue官网API**  逐一试验
diff --git a/source-code-analysis/packages/runtime-core/src/createVnode.ts b/source-code-analysis/packages/runtime-core/src/createVnode.ts
@@ -1,5 +1,5 @@
 import { isTeleport } from "./Teleport";
-import { isObject, isString, ShapeFlags } from "@vue/shared";
+import { isFunction, isObject, isString, ShapeFlags } from "@vue/shared";
 export function isVnode(vnode){
     return vnode.__v_isVNode
 }
@@ -17,8 +17,10 @@ export function createVNode(type, props, children?) {
     :isTeleport(type)
     ?ShapeFlags.TELEPORT//传送门
     :isObject(type) 
-    ?ShapeFlags.STATEFUL_COMPONENT://有状态组件
-     0;
+    ?ShapeFlags.STATEFUL_COMPONENT//有状态组件
+    :isFunction(type)
+    ?ShapeFlags.FUNCTIONAL_COMPONENT//函数式组件
+    :0;
     const vnode = {
         __v_isVNode: true,
         type,

diff --git a/source-code-analysis/packages/runtime-core/src/renderer.ts b/source-code-analysis/packages/runtime-core/src/renderer.ts
@@ -293,6 +293,23 @@ export function createRenderer(renderOptions) {
         updateProps(instance,instance.props,nextVNode.props)
     }
 
+    function renderComponent(instance) {
+        // console.log(instance,'instance')
+        // 
+        const {render,vnode,proxy,props,attrs} = instance
+        console.log(props,attrs,'props attrs')
+        // props {}   attrs:{xxx} 函数式组件没有props，属性传递给attrs
+        if(vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT){
+            // 有状态组件
+          return render.call(proxy,proxy)
+        }else{
+            // 函数式组件
+            // vue3中无性能优化，不推荐使用
+            console.log(vnode,'vnode')
+            return  vnode.type(attrs)
+        }
+
+    }
     // 给组件创建一个ReactiveEffect
     function  setupRenderEffect(instance,container,anchor,parentComponent) {
         const componentUpdateFn = ()=>{
@@ -307,7 +324,9 @@ export function createRenderer(renderOptions) {
                 }
                 // console.log(render,'render')
                 //  可以被访问到的对象，props state attr
-                const subTree = render.call(instance.proxy,instance.proxy)//执行render函数
+
+                // const subTree = render.call(instance.proxy,instance.proxy)//执行render函数
+                const subTree = renderComponent(instance)
                 // 第一个state是this 第二个是参数
                 // subTree  return h(xxx)是个虚拟节点 即要渲染的虚拟节点
                 instance.subTree = subTree
@@ -328,10 +347,12 @@ export function createRenderer(renderOptions) {
                     invokeHooks(bu)
                 }
                 // 基于状态的组件更新
-                const prev = instance.subTree
-                const next = render.call(instance.proxy,instance.proxy)
-                patch(prev,next,container,anchor,instance)
-                instance.subTree = next
+                // const subTree = render.call(instance.proxy,instance.proxy)
+                const subTree = renderComponent(instance)
+                patch(instance.subTree,subTree,container,anchor,instance)
+                instance.subTree = subTree
+
+                // update
                 if(u){
                     invokeHooks(u)
                 }

diff --git a/source-code-analysis/packages/runtime-dom/dist/index.html b/source-code-analysis/packages/runtime-dom/dist/index.html
@@ -43,38 +43,11 @@
             onBeforeUnmount,
             getCurrentInstance,
          } from './runtime-dom.js'
-        const myComponent = {
-            props:{
-                value:{
-                    type:Number,
-                }
-            },
-            setup(props,{attrs,emit,slots,expose}){
-                // expose({value:500})
-                return ()=>{
-                    return  h('div',{},[props.value])
-                }
-            }
-        }
-        const vueComponemt = {
-            setup(props,{attrs,emit,slots,expose}){
-                const age = ref(10)
-                const comp = ref(null)
-                onMounted(()=>{
-                    // ref属性的值
-                    // 如果当前组件有expose属性，那么则是expose属性的值
-                    //  如果当前组件无expose,获取的是组件的实例
-                    // 如果放到dom元素上，那么则是dom元素
-                    console.log(comp.value,'mounted')
-                })
-                return ()=>{
-                    return  h(myComponent,{value:age.value,ref:comp})
-                    // return  h('div',{value:age.value,ref:comp})
-
-                }
-            }
-        }
-        render(h(vueComponemt), app)
+
+         function functionalComponent(props) {
+            return h('div', null, props.a + props.b)
+         }
+        render(h(functionalComponent,{a:1,b:2}), app)
 
     </script>
 </body>

diff --git a/source-code-analysis/packages/runtime-dom/dist/runtime-dom.js b/source-code-analysis/packages/runtime-dom/dist/runtime-dom.js
diff --git a/source-code-analysis/packages/runtime-dom/dist/runtime-dom.js.map b/source-code-analysis/packages/runtime-dom/dist/runtime-dom.js.map
diff --git a/source-code-analysis/todo.md b/source-code-analysis/todo.md
@@ -4,7 +4,7 @@
 - [x] L40 组件emit 以及卸载
 - [x] L41 teleport实现
 - [x] L42 provide inject实现
-- [ ] L43 函数式组件原理
+- [x] L43 函数式组件原理
 - [x] L44 ref实现原理
 - [x] L45 生命周期原理
 - [ ] L46 keep-alive