{"id":26208364,"url":"https://github.com/jiefancis/simple-vue","last_synced_at":"2026-05-17T04:33:59.958Z","repository":{"id":168178686,"uuid":"478181990","full_name":"jiefancis/simple-vue","owner":"jiefancis","description":"vue源码分析 \u0026\u0026 实现一个mini-vue","archived":false,"fork":false,"pushed_at":"2022-05-11T01:27:36.000Z","size":70,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T21:46:09.693Z","etag":null,"topics":["defineproperty","javascript","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jiefancis.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-05T15:07:33.000Z","updated_at":"2022-05-10T06:07:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"a080bf55-cdee-4850-b358-ee7f6dd1bb5b","html_url":"https://github.com/jiefancis/simple-vue","commit_stats":null,"previous_names":["jiefancis/simple-vue"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jiefancis/simple-vue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiefancis%2Fsimple-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiefancis%2Fsimple-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiefancis%2Fsimple-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiefancis%2Fsimple-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jiefancis","download_url":"https://codeload.github.com/jiefancis/simple-vue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiefancis%2Fsimple-vue/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33127343,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-16T18:38:32.183Z","status":"online","status_checked_at":"2026-05-17T02:00:05.366Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["defineproperty","javascript","vue","vue3"],"created_at":"2025-03-12T06:28:34.107Z","updated_at":"2026-05-17T04:33:59.945Z","avatar_url":"https://github.com/jiefancis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"实现一个mini-Vue\n=============\n\n### vue2和vue3\n\n-  vue2是面向对象，所有的模块都为这个组件实例服务，并且将各种api和属性挂载在实例上，页面中开发者通过this拿到组件实例\n\n-  vue3函数式编程，vue3则是在框架内部维护一个组件对象，不对外暴露[简单实现](https://github.com/jiefancis/simple-vue/blob/master/Vue3/demo.js)\n\n### 虽然vue3已经慢慢普及了，还是把vue2的实现细节看了看，深入了解以下问题：\n\n- 双向绑定对于数组与普通对象的处理有什么不同？\n- 多个数据或者一个数据被多次更新，会立马更新视图吗？\n- [watch侦听对象新值与旧值相等的原因及解决](https://github.com/jiefancis/simple-vue/issues/3)\n- vue2父子组件通信中子组件如何获取到父组件传递的props？\n- 子组件如何实现$emit的事件中的this指向父组件？\n- vue的全局api（Vue.extend Vue.use Vue.mixin Vue.component）注册后如何实现全局都可使用？\n- 三种watcher（computed watch render）分别在什么时候实例化以确保数据能收集到正确的watcher？\n- provide和inject如何实现深层传递？\n- 全（局）子组件的处理有什么不同？\n- render(h)的h函数中如何区分tag和component？\n\n### Vue框架的核心\n-  响应系统\n\n-  编译器\n\n-  渲染器\n\n-  组件化  \n\n\n### 响应系统\n- watcher分类\n  - computed watcher\n  - watch watcher   \n  - render watcher  \n\n- 依赖收集与触发\n  - 确保每个数据都有自已的依赖收集器dep，在合适的时机收集依赖。\n\n  - 收集watcher前需要将当前watcher标记为待收集状态（new Watcher() -\u003e pushTarget）\n\n\n### 组件化\n\n-  单文件组件中js部分里的export default导出的是组件对象\n   - 单文件组件template被编译器编译并生成render函数，将render函数赋值到组件对象中  \n\n-  Vdom如何描述组件？\n   - 执行（父）组件的render函数生成组件vdom的过程中，vue在解析到（子）组件标签时，首先取得注册的子组件对象Ctor，并通过Vue.extend(Ctor)将Ctor构造成原型对象为Vue的构造函数\n\n   - 在组件data.hook对象添加 init函数，init函数实现组件的初始化和挂载操作（即new Vue().$mount()）\n\n   - 创建vnode并返回，vnode中componentOptions属性包含组件的构造函数等参数\n\n-  子组件在父组件的哪个生命周期中执行挂载(更新)？\n\n   - 在patch挂载中，createElm挂载前会判断当前vnode是否是组件？判断依据为当前vnode数据的data.hook.init是否存在？是则执行init()操作，对组件进行初始化及挂载操作；此时父组件处在beforeMount阶段\n\n   - 因此，父子组件的生命周期执行顺序为父beforeCreate -\u003e 父created -\u003e 父beforeMount -\u003e 子beforeCreated -\u003e 子created -\u003e 子beforeMount -\u003e 子mounted -\u003e 父mounted\n\n### 父子组件\n\n-  事件\n   -  vm实例内部维护一个属性：_events，当通过vm.$on(name, fn)注册事件时，vm_events内部维护一个数组，（vm._events[name] = [fn]）\n\n-  provide与inject\n   -  遍历子组件的inject，如果在子组件中找不到对应的属性，vm.$parent访问父组件查找\n\n-  props与$emit如何访问到父组件的数据？\n   - self是父组件vm实例\n   - self.$emit，此时self是父组件，input事件保存在子组件input内部，在$emit触发时，input内部vm是父组件，因此确保了input事件正确执行\n\n```\nprops: ['value'],\nrender: function (createElement) {\n  var self = this\n  return createElement('input', {\n    domProps: {\n      value: self.value\n    },\n    on: {\n      input: function (event) {\n        self.$emit('input', event.target.value)\n      }\n    }\n  })\n}\n```\n\n### vue-router如何实现路由变化与视图响应式更新关联？\n- VueRouter.install种将 $route、_route 赋予响应式  \n\n- router-view组件中访问$route （返回_route）触发依赖收集并收集到render watcher，这个阶段watcher为render watcher。\n\n- router.push等api变化最后会触发 app._route = newRoute的操作触发依赖更新  \n\n\n### vuex如何实现响应式？\n\n-  Store.state赋值为响应式（new Vue({ data: Store.state})）\n\n- 在页面渲染过程中，当访问到store的数据，触发依赖收集（此时是render watcher），将new Watcher(vm, updateComponent)收集到数据中，等待数据发生改变触发依赖更新\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiefancis%2Fsimple-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiefancis%2Fsimple-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiefancis%2Fsimple-vue/lists"}