子组件

;\n }\n}\n\nclass Super extends Component {\n constructor(props) {\n super(props);\n this.sub = React.createRef();\n }\n handleOnClick() {\n this.sub.callback();\n }\n render() {\n return (\n

\n \n

\n );\n }\n}\n\n\n```\n\n#### ref的函数式声明\n\n* 优点：ref写法简洁\n* 缺点：使用了HOC的子组件不可用，无法指向真是子组件（同上）\n\n使用方法和上述的一样，就是定义ref的方式不同。\n\n```csharp\n...\n\n_{this.sub = ref}>}\n\n...\n\n\n```\n\n#### 使用props自定义onRef属性\n\n* 优点：假如子组件是嵌套了HOC，也可以指向真实子组件。\n* 缺点：需要自定义props属性\n\n```typescript\nimport React, { Component } from 'react';\nimport { observer } from 'mobx-react'\n\n@observer\nclass Sub extends Component {\n\tcomponentDidMount(){\n // 将子组件指向父组件的变量\n\t\tthis.props.onRef && this.props.onRef(this);\n\t}\n\tcallback(){\n\t\tconsole.log(\"执行我\")\n\t}\n\trender(){\n\t\treturn (

子组件

);\n\t}\n}\n\nclass Super extends Component {\n\thandleOnClick(){\n // 可以调用子组件方法\n\t\tthis.Sub.callback();\n\t}\n\trender(){\n\t\treturn (\n

\n\t\t\t

click

\n\t\t\t_{this.Sub = node }>}\n\t \t

)\n\t}\n}\n\n\n```\n\n### 函数组件、Hook组件\n\n#### useImperativeHandle\n\n* 优点： 1、写法简单易懂 2、假如子组件嵌套了HOC，也可以指向真实子组件\n* 缺点： 1、需要自定义props属性 2、需要自定义暴露的方法\n\n```javascript\nimport React, { useImperativeHandle } from 'react';\nimport { observer } from 'mobx-react'\n\n\nconst Parent = () => {\n let ChildRef = React.createRef();\n\n function handleOnClick() {\n ChildRef.current.func();\n }\n\n return (\n

\n \n \n

\n );\n};\n\nconst Child = observer(props => {\n //用useImperativeHandle暴露一些外部ref能访问的属性\n useImperativeHandle(props.onRef, () => {\n // 需要将暴露的接口返回出去\n return {\n func: func,\n };\n });\n function func() {\n console.log('执行我');\n }\n return

子组件

;\n});\n\nexport default Parent;\n\n```\n\n#### forwardRef\n\n使用forwardRef抛出子组件的ref\n\n这个方法其实更适合自定义HOC。但问题是，withRouter、connect、Form.create等方法并不能抛出ref，假如Child本身就需要嵌套这些方法，那基本就不能混着用了。forwardRef本身也是用来抛出子元素，如input等原生元素的ref的，并不适合做组件ref抛出，因为组件的使用场景太复杂了。\n\n```javascript\nimport React, { useRef, useImperativeHandle } from 'react';\nimport ReactDOM from 'react-dom';\nimport { observer } from 'mobx-react'\n\nconst FancyInput = React.forwardRef((props, ref) => {\n const inputRef = useRef();\n useImperativeHandle(ref, () => ({\n focus: () => {\n inputRef.current.focus();\n }\n }));\n\n return \n});\n\nconst Sub = observer(FancyInput)\n\nconst App = props => {\n const fancyInputRef = useRef();\n\n return (\n

\n \n fancyInputRef.current.focus()}\n >父组件调用子组件的 focus\n

\n )\n}\n\nexport default App;\n\n\n```\n\n### 总结\n\n父组件调子组件函数有两种情况\n\n* 子组件无HOC嵌套：推荐使用ref直接调用\n* 有HOC嵌套：推荐使用自定义props的方式\n",{"_54":508,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/286/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/286/timeline",{"_54":511,"_56":57,"_58":512,"_60":513,"_62":514,"_64":515,"_66":516,"_68":517,"_70":518,"_72":519,"_74":520,"_107":521,"_127":128,"_129":26,"_130":-5,"_131":524,"_133":525,"_155":148,"_149":527,"_151":528,"_154":-5,"_158":159,"_160":529,"_165":-5,"_166":530,"_168":531,"_180":533,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/277","https://api.github.com/repos/pro-collection/interview-question/issues/277/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/277/comments","https://api.github.com/repos/pro-collection/interview-question/issues/277/events","https://github.com/pro-collection/interview-question/issues/277",1662739503,"I_kwDOJGDC6c5jG2Qv",277,"[Vue] watch 和 computed 的区别和理解",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[522,523],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":526,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-11T15:23:05Z","2023-04-11T15:23:06Z",{"_162":148,"_163":148,"_164":148},"**计算属性computed :**\n\n1. 支持缓存，只有依赖数据发生改变，才会重新进行计算，计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。computed是计算属性的; 它会根据所依赖的数据动态显示新的计算结果, 该计算结果会被缓存起来。computed的值在getter执行后是会被缓存的。如果所依赖的数据发生改变时候, 就会重新调用getter来计算最新的结果。\n\n2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化\n\n3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值\n\n4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed\n\n5. 如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。\n\n6. 适用于一些重复使用数据或复杂及费时的运算。我们可以把它放入computed中进行计算, 然后会在computed中缓存起来, 下次就可以直接获取了。\n\n7. 如果我们需要的数据依赖于其他的数据的话, 我们可以把该数据设计为computed中。\n\n8. computed 是基于响应性依赖来进行缓存的。只有在响应式依赖发生改变时它们才会重新求值, 也就是说, 当msg属性值没有发生改变时, 多次访问 reversedMsg 计算属性会立即返回之前缓存的计算结果, 而不会再次执行computed中的函数。但是methods方法中是每次调用, 都会执行函数的, methods它不是响应式的。\n\n9. computed中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set变成可读写属性, 但是methods中的成员没有这样的。\n\n\n**侦听属性watch：**\n\n1.watch它是一个对data的数据监听回调, 当依赖的data的数据变化时, 会执行回调。在回调中会传入newVal和oldVal两个参数。Vue实列将会在实例化时调用$watch(), 他会遍历watch对象的每一个属性。watch的使用场景是：当在data中的某个数据发生变化时, 我们需要做一些操作, 或者当需要在数据变化时执行异步或开销较大的操作时. 我们就可以使用watch来进行监听。watch普通监听和深度监听不支持缓存，数据变，直接会触发相应的操作；\n\n2.watch里面有一个属性为deep，含义是：是否深度监听某个对象的值, 该值默认为false。watch支持异步；\n\n3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；\n\n4.当一个属性发生变化时，需要执行对应的操作；一对多；\n\n5.监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，\n\n**watch 和 computed的区别是：**\n\n相同点：他们两者都是观察页面数据变化的。\n\n不同点：computed只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。 watch每次都需要执行函数。watch更适用于数据变化时的异步操作。\n\n当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别，请勿滥用。\n",{"_54":532,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/277/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/277/timeline",{"_54":535,"_56":57,"_58":536,"_60":537,"_62":538,"_64":539,"_66":540,"_68":541,"_70":542,"_72":543,"_74":544,"_107":545,"_127":128,"_129":26,"_130":-5,"_131":554,"_133":555,"_155":148,"_149":557,"_151":558,"_154":-5,"_158":159,"_160":559,"_165":-5,"_166":560,"_168":561,"_180":563,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/276","https://api.github.com/repos/pro-collection/interview-question/issues/276/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/276/comments","https://api.github.com/repos/pro-collection/interview-question/issues/276/events","https://github.com/pro-collection/interview-question/issues/276",1662664081,"I_kwDOJGDC6c5jGj2R",276,"const 和 readonly 的区别",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[546,553],{"_66":547,"_68":548,"_54":549,"_113":550,"_115":551,"_117":26,"_118":552},5232527330,"LA_kwDOJGDC6c8AAAABN-IH4g","https://api.github.com/repos/pro-collection/interview-question/labels/TypeScript","TypeScript","258B51","TypeScript 语法部分",{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":556,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-11T14:48:36Z","2023-04-11T14:48:37Z",{"_162":148,"_163":148,"_164":148},"TypeScript 中不可变量的实现方法有两种：\n\n使用 ES6 的 const 关键字声明的值类型\n被 readonly 修饰的属性\n2、TypeScript 中 readonly：\n\nTypeScript 中的只读修饰符，可以声明更加严谨的可读属性。通常在 interface 、 Class 、 type 以及 array 和 tuple 类型中使用它，也可以用来定义一个函数的参数。\n\n3、两者区别：\n\n（1）const 用于变量， readonly 用于属性\n\n（2）const 在运行时检查， readonly 在编译时检查\n\n（3）const 声明的变量不得改变值，这意味着，const 一旦声明变量，就必须立即初始化，不能留到以后赋值； \nreadonly 修饰的属性能确保自身不能修改属性，但是当你把这个属性交给其它并没有这种保证的使用者（允许出于类型兼容性的原因），他们能改变。\n```typescript\nconst foo: {\n readonly bar: number;\n} = {\n bar: 123\n};\nfunction iMutateFoo(foo: { bar: number }) {\n foo.bar = 456;\n}\niMutateFoo(foo);\nconsole.log(foo.bar); // 456\n```\n\n（4）const 保证的不是变量的值不得改动，而是变量指向的那个内存地址不得改动，例如使用 const 变量保存的数组，可以使用 push ， pop 等方法。\n但是如果使用 ReadonlyArray 声明的数组不能使用 push ， pop 等方法。\n\n\n",{"_54":562,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/276/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/276/timeline",{"_54":565,"_56":57,"_58":566,"_60":567,"_62":568,"_64":569,"_66":570,"_68":571,"_70":572,"_72":573,"_74":574,"_107":575,"_127":128,"_129":26,"_130":-5,"_131":578,"_133":579,"_155":148,"_149":581,"_151":582,"_154":-5,"_158":159,"_160":583,"_165":-5,"_166":584,"_168":585,"_180":587,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/275","https://api.github.com/repos/pro-collection/interview-question/issues/275/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/275/comments","https://api.github.com/repos/pro-collection/interview-question/issues/275/events","https://github.com/pro-collection/interview-question/issues/275",1662655424,"I_kwDOJGDC6c5jGhvA",275,"枚举和常量枚举的区别",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[576,577],{"_66":547,"_68":548,"_54":549,"_113":550,"_115":551,"_117":26,"_118":552},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":580,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-11T14:44:32Z","2023-04-11T14:44:33Z",{"_162":148,"_163":148,"_164":148},"枚举和常量枚举（const枚举）：使用枚举可以清晰地表达意图或创建一组有区别的用例\n\n```typescript\n// 枚举\nenum Color { Red, Green, Blue }\n\n// 常量枚举\nconst enum Color { Red, Green, Blue }\n```\n\n区别：\n\n1. 枚举会被编译时会编译成一个对象，可以被当作对象使用\n\n```typescript\n// 枚举\nenum Color {\n Red,\n Green,\n Blue\n}\n\nvar sisterAn = Color.Red\n// 会被编译成 JavaScript 中的 var sisterAn = Color.Red\n// 即在运行执行时，它将会查找变量 Color 和 Color.Red\n```\n\n2. const 枚举会在 typescript 编译期间被删除，const 枚举成员在使用的地方会被内联进来，避免额外的性能开销\n\n```typescript\n// 常量枚举\nconst enum Color {\n Red,\n Green,\n Blue\n}\n\nvar sisterAn = Color.Red\n// 会被编译成 JavaScript 中的 var sisterAn = 0\n// 在运行时已经没有 Color 变量\n```\n\n由此可见，使用常量枚举会有更好的性能。\n\n定义的枚举，在经过编译器编译后是一个对象，这个对象我们可以在程序运行时使用，前面有说到。但有时定义枚举可能只是为了让程序可读性更好，而不需要编译后的代码，即不需要编译成对象。typescript中考虑到这种情况，所以加入了 const enum (完全嵌入的枚举)。\n\n\n",{"_54":586,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/275/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/275/timeline",{"_54":589,"_56":57,"_58":590,"_60":591,"_62":592,"_64":593,"_66":594,"_68":595,"_70":596,"_72":597,"_74":598,"_107":599,"_127":128,"_129":26,"_130":-5,"_131":602,"_133":603,"_155":185,"_149":605,"_151":606,"_154":-5,"_158":159,"_160":607,"_165":-5,"_166":608,"_168":609,"_180":611,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/273","https://api.github.com/repos/pro-collection/interview-question/issues/273/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/273/comments","https://api.github.com/repos/pro-collection/interview-question/issues/273/events","https://github.com/pro-collection/interview-question/issues/273",1659781732,"I_kwDOJGDC6c5i7kJk",273,"ts 中 type 和 interface的区别",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[600,601],{"_66":547,"_68":548,"_54":549,"_113":550,"_115":551,"_117":26,"_118":552},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":604,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-09T07:29:21Z","2023-08-06T07:44:59Z",{"_162":148,"_163":148,"_164":148},"### 相同点\n\n1. 都可以描述一个对象或者函数\n\n- interface\n\n```typescript\ninterface User {\n name: string\n age: number\n}\n\ninterface SetUser {\n (name: string, age: number): void;\n}\n```\n\n- ts\n\n```typescript\ntype User = {\n name: string\n age: number\n};\n\ntype SetUser = (name: string, age: number) => void;\n```\n\n2. 都允许拓展（extends） interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。\n\n### 差异点\n\n- **type**\n - type 可以声明基本类型别名，联合类型，元组等类型\n - type 语句中还可以使用 typeof 获取实例的类型进行赋值\n - 其他骚操作\n\n```typescript\ntype StringOrNumber = string | number;\ntype Text = string | { text: string };\ntype NameLookup = Dictionary;\ntype Callback = (data: T) => void;\ntype Pair = [T, T];\ntype Coordinates = Pair;\ntype Tree = T | { left: Tree, right: Tree };\n```\n\n- **interface**\n - interface 能够声明合并\n```typescript\ninterface User {\n name: string\n age: number\n}\n\ninterface User {\n sex: string\n}\n\n/*\nUser 接口为 {\n name: string\n age: number\n sex: string \n}\n*/\n```\n\n一般来说，如果不清楚什么时候用interface/type，能用 interface 实现，就用 interface , 如果不能就用 type 。\n\n",{"_54":610,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/273/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/273/timeline",{"_54":613,"_56":57,"_58":614,"_60":615,"_62":616,"_64":617,"_66":618,"_68":619,"_70":620,"_72":621,"_74":622,"_107":623,"_127":128,"_129":26,"_130":-5,"_131":626,"_133":627,"_155":148,"_149":629,"_151":630,"_154":-5,"_158":159,"_160":631,"_165":-5,"_166":632,"_168":633,"_180":635,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/272","https://api.github.com/repos/pro-collection/interview-question/issues/272/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/272/comments","https://api.github.com/repos/pro-collection/interview-question/issues/272/events","https://github.com/pro-collection/interview-question/issues/272",1659780547,"I_kwDOJGDC6c5i7j3D",272,"[Vue] vue3 的响应式库是独立出来的，它单独使用的时候是什么效果",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[624,625],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":421,"_64":422,"_58":423,"_66":424,"_68":425,"_70":426,"_72":427,"_118":428,"_143":628,"_145":430,"_147":148,"_127":128,"_149":431,"_151":432,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-09T07:23:25Z","2023-04-09T07:23:26Z",{"_162":148,"_163":148,"_164":148},"vue3 的响应式库是独立出来的，它可以很方便的集成进 React，作为 React 的状态管理库使用！\n\n### 使用示范\n定义 store\n```typescript\n// store.ts\nimport { reactive, computed, effect } from '@vue/reactivity';\n\nexport const state = reactive({\n count: 0,\n});\n\nconst plusOne = computed(() => state.count + 1);\n\neffect(() => {\n console.log('plusOne changed: ', plusOne);\n});\n\nconst add = () => (state.count += 1);\n\nexport const mutations = {\n // mutation\n add,\n};\n\nexport const store = {\n state,\n computed: {\n plusOne,\n },\n};\n\nexport type Store = typeof store;\n```\n\n消费使用\n```js\n// Index.tsx\nimport { Provider, useStore } from 'rxv'\nimport { mutations, store, Store } from './store.ts'\nfunction Count() {\n const countState = useStore((store: Store) => {\n const { state, computed } = store;\n const { count } = state;\n const { plusOne } = computed;\n\n return {\n count,\n plusOne,\n };\n });\n\n return (\n \n

计数器

store中的count现在是 {countState.count}

computed值中的plusOne现在是 {countState.plusOne.value}

\n \n

\n \n );\n}\n\nexport default () => {\n return (\n \n \n \n );\n};\n```\n\n可以看出，store的定义只用到了@vue/reactivity，而rxv只是在组件中做了一层桥接，连通了Vue3和React，正如它名字的含义：React x Vue。\n\n### 如何实现\n只要effect能接入到React系统中，那么其他的api都没什么问题，因为它们只是去收集effect的依赖，去通知effect触发更新。\n\neffect接受的是一个函数，而且effect还支持通过传入schedule参数来自定义依赖更新的时候需要触发什么函数，\n\n而rxv的核心api: useStore接受的也是一个函数selector，它会让用户自己选择在组件中需要访问的数据。\n\n把selector包装在effect中执行，去收集依赖。\n\n指定依赖发生更新时，需要调用的函数是当前正在使用useStore的这个组件的forceUpdate强制渲染函数。\n\n简单的看一下核心实现\n\nshare.ts\n```typescript\nexport const useForceUpdate = () => {\n const [, forceUpdate] = useReducer(s => s + 1, 0);\n return forceUpdate;\n};\n\nexport const useEffection = (...effectArgs: Parameters) => {\n // 用一个ref存储effection\n // effect函数只需要初始化执行一遍\n const effectionRef = useRef();\n if (!effectionRef.current) {\n effectionRef.current = effect(...effectArgs);\n }\n\n // 卸载组件后取消effect\n const stopEffect = () => {\n stop(effectionRef.current!);\n };\n useEffect(() => stopEffect, []);\n\n return effectionRef.current\n};\n```\n\n核心逻辑在此\n```typescript\nimport React, { useContext } from 'react';\nimport { useForceUpdate, useEffection } from './share';\n\ntype Selector = (store: T) => S;\n\nconst StoreContext = React.createContext(null);\n\nconst useStoreContext = () => {\n const contextValue = useContext(StoreContext);\n if (!contextValue) {\n throw new Error(\n 'could not find store context value; please ensure the component is wrapped in a ',\n );\n }\n return contextValue;\n};\n\n/**\n * 在组件中读取全局状态\n * 需要通过传入的函数收集依赖\n */\nexport const useStore = (selector: Selector): S => {\n const forceUpdate = useForceUpdate();\n const store = useStoreContext();\n\n const effection = useEffection(() => selector(store), {\n scheduler: job => {\n if (job() === undefined) return;\n forceUpdate();\n },\n lazy: true,\n });\n\n const value = effection();\n return value;\n};\n\nexport const Provider = StoreContext.Provider;\n```\n\n参考文档：\n- https://github.com/sl1673495/react-composition-api\n- https://juejin.cn/post/6844904054192078855\n",{"_54":634,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/272/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/272/timeline",{"_54":637,"_56":57,"_58":638,"_60":639,"_62":640,"_64":641,"_66":642,"_68":643,"_70":644,"_72":645,"_74":646,"_107":647,"_127":128,"_129":26,"_130":-5,"_131":650,"_133":651,"_155":148,"_149":653,"_151":654,"_154":-5,"_158":159,"_160":655,"_165":-5,"_166":656,"_168":657,"_180":659,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/271","https://api.github.com/repos/pro-collection/interview-question/issues/271/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/271/comments","https://api.github.com/repos/pro-collection/interview-question/issues/271/events","https://github.com/pro-collection/interview-question/issues/271",1659775681,"I_kwDOJGDC6c5i7irB",271,"[Vue] Vue3 的响应式原理?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[648,649],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":652,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-09T07:02:57Z","2023-04-09T07:02:58Z",{"_162":148,"_163":148,"_164":148},"### 该话题涉及的相关内容\n\n- 原理：Proxy、track、trigger\n- 新增属性\n- 遍历后新增\n- 遍历后删除或者清空\n- 获取 keys\n- 删除对象属性\n- 判断属性是否存在\n- 性能\n\n推荐阅读文档： https://juejin.cn/post/6844904122479542285\n\n### 响应式仓库\n\nVue3 不同于 Vue2 也体现在源码结构上，Vue3 把耦合性比较低的包分散在 `packages` 目录下单独发布成 `npm` 包。这也是目前很流行的一种大型项目管理方式 `Monorepo`。\n\n其中负责响应式部分的仓库就是 `@vue/reactivity`，它不涉及 Vue 的其他的任何部分，是非常非常「正交」的一种实现方式。\n\n甚至可以`轻松的集成进 React` https://juejin.cn/post/6844904095594381325\n\n### 区别\n\nProxy 和 Object.defineProperty 的使用方法看似很相似，其实 Proxy 是在「更高维度」上去拦截属性的修改的，怎么理解呢？\n\nVue2 中，对于给定的 data，如 `{ count: 1 }`，是需要根据具体的 key 也就是 `count`，去对「修改 data.count 」和「读取 data.count」进行拦截，也就是\n\n```javascript\nObject.defineProperty(data, 'count', {\n get() {},\n set() {},\n})\n```\n\n必须预先知道要拦截的 key 是什么，这也就是为什么 Vue2 里对于对象上的新增属性无能为力。\n\n而 Vue3 所使用的 Proxy，则是这样拦截的：\n\n```javascript\nnew Proxy(data, {\n get(key) { },\n set(key, value) { },\n})\n\n```\n\n可以看到，根本不需要关心具体的 key，它去拦截的是「修改 data 上的任意 key」和「读取 data 上的任意 key」。\n\n所以，不管是已有的 key 还是新增的 key，都逃不过它的魔爪。\n\n但是 Proxy 更加强大的地方还在于 Proxy 除了 get 和 set，还可以拦截更多的操作符。\n\n### 简单的例子🌰\n\n先写一个 Vue3 响应式的最小案例，本文的相关案例都只会用 `reactive` 和 `effect` 这两个 api。如果你了解过 React 中的 `useEffect`，相信你会对这个概念秒懂，Vue3 的 `effect` 不过就是去掉了手动声明依赖的「进化版」的 `useEffect`。\n\nReact 中手动声明 `[data.count]` 这个依赖的步骤被 Vue3 内部直接做掉了，在 `effect` 函数内部读取到 `data.count` 的时候，它就已经被收集作为依赖了。\n\nVue3：\n\n```kotlin\n// 响应式数据\nconst data = reactive({\n count: 1\n})\n\n// 观测变化\neffect(() => console.log('count changed', data.count))\n\n// 触发 console.log('count changed', data.count) 重新执行\ndata.count = 2\n\n```\n\nReact：\n\n```scss\n// 数据\nconst [data, setData] = useState({\n count: 1\n})\n\n// 观测变化需要手动声明依赖\nuseEffect(() => {\n console.log('count changed', data.count)\n}, [data.count])\n\n// 触发 console.log('count changed', data.count) 重新执行\nsetData({\n count: 2\n})\n\n```\n\n也可以把 `effect` 中的回调函数联想到视图的重新渲染、 watch 的回调函数等等…… 它们是同样基于这套响应式机制的。\n\n而本文的核心目的，就是探究这个基于 Proxy 的 reactive api，到底能强大到什么程度，能监听到用户对于什么程度的修改。\n\n### 讲讲原理\n\n先最小化的讲解一下响应式的原理，其实就是在 Proxy 第二个参数 `handler` 也就是陷阱操作符中，拦截各种取值、赋值操作，依托 `track` 和 `trigger` 两个函数进行依赖收集和派发更新。\n\n`track` 用来在读取时收集依赖。\n\n`trigger` 用来在更新时触发依赖。\n\n### track\n\n```vbnet\nfunction track(target: object, type: TrackOpTypes, key: unknown) {\n const depsMap = targetMap.get(target);\n // 收集依赖时通过 key 建立一个 set\n let dep = new Set()\n targetMap.set(ITERATE_KEY, dep)\n // 这个 effect 可以先理解为更新函数存放在 dep 里\n dep.add(effect)\n}\n\n```\n\n`target` 是原对象。\n\n`type` 是本次收集的类型，也就是收集依赖的时候用来标识是什么类型的操作，比如上文依赖中的类型就是 `get`，这个后续会详细讲解。\n\n`key` 是指本次访问的是数据中的哪个 key，比如上文例子中收集依赖的 key 就是 `count`\n\n首先全局会存在一个 `targetMap`，它用来建立 `数据 -> 依赖` 的映射，它是一个 WeakMap 数据结构。\n\n而 `targetMap` 通过数据 `target`，可以获取到 `depsMap`，它用来存放这个数据对应的所有响应式依赖。\n\n`depsMap` 的每一项则是一个 Set 数据结构，而这个 Set 就存放着对应 key 的更新函数。\n\n是不是有点绕？我们用一个具体的例子来举例吧。\n\n```ini\nconst target = { count: 1}\nconst data = reactive(target)\n\nconst effection = effect(() => {\n console.log(data.count)\n})\n\n```\n\n对于这个例子的依赖关系，\n\n1. 全局的 `targetMap` 是：\n\n```js\ntargetMap: {\n { count: 1 }: dep\n}\n\n```\n\n2. dep 则是\n\n```js\ndep: {\n count: Set { effection }\n}\n\n```\n\n这样一层层的下去，就可以通过 `target` 找到 `count` 对应的更新函数 `effection` 了。\n\n### trigger\n\n这里是最小化的实现，仅仅为了便于理解原理，实际上要复杂很多，\n\n其实 `type` 的作用很关键，先记住，后面会详细讲。\n\n```typescript\nexport function trigger(\n target: object,\n type: TriggerOpTypes,\n key?: unknown,\n) {\n // 简化来说就是通过 key 找到所有更新函数依次执行\n const dep = targetMap.get(target)\n dep.get(key).forEach(effect => effect())\n}\n```\n",{"_54":658,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/271/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/271/timeline",{"_54":661,"_56":57,"_58":662,"_60":663,"_62":664,"_64":665,"_66":666,"_68":667,"_70":668,"_72":669,"_74":670,"_107":671,"_127":128,"_129":26,"_130":-5,"_131":674,"_133":675,"_155":148,"_149":677,"_151":678,"_154":-5,"_158":159,"_160":679,"_165":-5,"_166":680,"_168":681,"_180":683,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/270","https://api.github.com/repos/pro-collection/interview-question/issues/270/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/270/comments","https://api.github.com/repos/pro-collection/interview-question/issues/270/events","https://github.com/pro-collection/interview-question/issues/270",1659768390,"I_kwDOJGDC6c5i7g5G",270,"小程序的大概原理?",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[672,673],{"_66":412,"_68":413,"_54":414,"_113":415,"_115":416,"_117":26,"_118":417},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":421,"_64":422,"_58":423,"_66":424,"_68":425,"_70":426,"_72":427,"_118":428,"_143":676,"_145":430,"_147":148,"_127":128,"_149":431,"_151":432,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-09T06:30:09Z","2023-04-09T06:30:10Z",{"_162":148,"_163":148,"_164":148},"具体流程可以看下面这个图：\n![](https://foruda.gitee.com/images/1681021603016376642/cc6178f0_7819612.png)\n\n要了解小程序架构原理，要从以下几个方面入手探索\n- 宿主环境\n- 执行环境\n- 小程序整体架构\n- 运行机制\n- 更新机制\n- 数据通信机制\n- 登录机制\n- 性能方向问题\n- JSCore\n\n具体内容可以参考文档:\n- https://juejin.cn/post/6976805521407868958\n",{"_54":682,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/270/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/270/timeline",{"_54":685,"_56":57,"_58":686,"_60":687,"_62":688,"_64":689,"_66":690,"_68":691,"_70":692,"_72":693,"_74":694,"_107":695,"_127":128,"_129":26,"_130":-5,"_131":698,"_133":699,"_155":148,"_149":701,"_151":702,"_154":-5,"_158":159,"_160":703,"_165":-5,"_166":704,"_168":705,"_180":707,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/269","https://api.github.com/repos/pro-collection/interview-question/issues/269/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/269/comments","https://api.github.com/repos/pro-collection/interview-question/issues/269/events","https://github.com/pro-collection/interview-question/issues/269",1659765940,"I_kwDOJGDC6c5i7gS0",269,"前端路由的实现原理",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[696,697],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":700,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-09T06:18:33Z","2023-04-09T06:18:34Z",{"_162":148,"_163":148,"_164":148},"在使用Vue、React等前端框架时，我们都会发现项目中只有一个HTML文件，并且在该HTML中都存在一个根标签，起到了类似于容器的作用。容器内部的内容就由我们后续编写的每个视图决定，页面的切换就是容器中视图的切换。\n\n前端路由的实现原理简单来说，就是在不跳转或者刷新页面的前提下，为SPA应用中的每个视图匹配一个特殊的URL，之后的刷新、前进、后退等操作均通过这个特殊的URL实现。为实现上述要求，需要满足：\n\n改变URL且不会向服务器发起请求；\n\n可以监听到URL的变化，并渲染与之匹配的视图。\n\n主要有Hash路由和History路由两种实现方式。下文对两者的基本原理进行简单介绍，并分别实现了一个简易的路由Demo。\n\n### Hash路由\n原理就是通过键值对的形式保存路由及对应要执行的回调函数，当监听到页面hash发生改变时，根据最新的hash值调用注册好的回调函数，即改变页面。\n\n#### 创建路由\n```js\nclass Routers{\n constructor(){\n // 保存路由信息\n this.routes = {};\n this.currentUrl = '';\n window.addEventListener('load', this.refresh, false);\n window.addEventListener('hashchange', this.refresh, false);\n }\n\n // 用于注册路由的函数\n route = (path, callback) => {\n this.routes[path] = callback || function(){};\n }\n\n // 监听事件的回调，负责当页面hash改变时执行对应hash值的回调函数\n refresh = () => {\n this.currentUrl = location.hash.slice(1) || '/';\n this.routes[this.currentUrl]();\n }\n}\n\nwindow.Router = new Routers();\n```\n\n#### 注册路由\n使用route方法添加对应的路由及其回调函数即可。以下代码实现了一个根据不同hash改变页面颜色的路由，模拟了页面的切换，在实际的SPA应用中，对应的就是页面内容的变化了。\n\n```js\nvar content = document.querySelector('body');\n\nfunction changeBgColor(color){\n content.style.background = color;\n}\n\n// 添加路由\nRouter.route('/', () => {\n changeBgColor('yellow');\n});\nRouter.route('/red', () => {\n changeBgColor('red');\n});\nRouter.route('/green', () => {\n changeBgColor('green');\n});\nRouter.route('/blue', () => {\n changeBgColor('blue');\n});\n```\n\n\n### History路由\n在H5之前，浏览器的history仅支持页面之前的跳转，包括前进和后退等功能。\n\n在HTML5中，新增以下API：\n```js\nhistory.pushState();\t\t\t// 添加新状态到历史状态栈\nhistory.replaceState();\t\t// 用新状态代替当前状态\nhistory.state;\t\t\t\t\t\t// 获取当前状态对象\n```\n\nhistory.pushState()和history.replaceState()均接收三个参数：\n\n- state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。\n- title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。\n- url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址\n\n由于history.pushState()和 history.replaceState()都具有在改变页面URL的同时，不刷新页面的能力，因此也可以用来实现前端路由。\n\n#### 创建路由类\n```js\nclass Routers{\n constructor(){\n this.routes = {};\n window.addEventListener('popstate', e => {\n const path = e.state && e.state.path;\n this.routes[path] && this.routes[path]();\n })\n }\n\n init(path){\n history.replaceState({path: path}, null, path);\n this.routes[path] && this.routes[path]();\n }\n\n route(path, callback){\n this.routes[path] = callback || function(){};\n }\n\n go(path){\n history.pushState({path: path}, null, path);\n this.routes[path] && this.routes[path]();\n }\n}\n\nwindow.Router = new Routers();\n```\n\n\n#### 注册路由\n```js\nfunction changeBgColor(color){\n content.style.background = color;\n}\n\nRouter.route(location.pathname, () => {\n changeBgColor('yellow');\n});\nRouter.route('/red', () => {\n changeBgColor('red');\n});\nRouter.route('/green', () => {\n changeBgColor('green');\n});\nRouter.route('/blue', () => {\n changeBgColor('blue');\n});\n\nconst content = document.querySelector('body');\nRouter.init(location.pathname);\n```\n\n\n#### 触发事件\n在使用hash实现的路由中，我们通过hashchange事件来监听hash的变化，但是上述代码中history的改变本身不会触发任何事件，因此无法直接监听history的改变来改变页面。因此，对于不同的情况，我们选择不同的解决方案：\n\n- 点击浏览器的前进或者后退按钮：监听popstate事件，获取相应路径并执行回调函数\n- 点击a标签：阻止其默认行为，获取其href属性，手动调用history.pushState()，并执行相应回调。\n\n```js\nconst ul = document.querySelector('ul');\n\nul.addEventListener('click', e => {\n if(e.target.tagName === 'A'){\n e.preventDefault();\n Router.go(e.target.getAttribute('href'));\n }\n})\n```\n\n### 对比\n基于hash的路由：\n\n缺点：\n- 看起来比较丑\n- 会导致锚点功能失效\n\n优点： \n- 兼容性更好\n- 无需服务器配合\n",{"_54":706,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/269/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/269/timeline",{"_54":709,"_56":57,"_58":710,"_60":711,"_62":712,"_64":713,"_66":714,"_68":715,"_70":716,"_72":717,"_74":718,"_107":719,"_127":128,"_129":26,"_130":-5,"_131":722,"_133":723,"_155":148,"_149":725,"_151":726,"_154":-5,"_158":159,"_160":727,"_165":-5,"_166":728,"_168":729,"_180":731,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/261","https://api.github.com/repos/pro-collection/interview-question/issues/261/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/261/comments","https://api.github.com/repos/pro-collection/interview-question/issues/261/events","https://github.com/pro-collection/interview-question/issues/261",1659556289,"I_kwDOJGDC6c5i6tHB",261,"[Vue] 使用Proxy实现简易的vue双向数据绑定",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[720,721],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":724,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-08T15:28:09Z","2023-04-08T15:28:10Z",{"_162":148,"_163":148,"_164":148},"### proxy 的基本使用\n可以直接看这个链接： https://github.com/pro-collection/interview-question/issues/8\n\n使用proxy实现数据劫持\n```js\nlet data = {\n name: YoLinDeng,\n height: '176cm'\n}\n\nconst p = new Proxy(data, {\n get(target, prop) {\n return Reflect.get(...arguments)\n },\n set(target, prop, newValue) {\n return Reflect.set(...arguments)\n }\n})\n```\n\n\n### 关于vue中数据响应式的原理\n\n#### 对数据进行侦测\n\n* 在vue2.X中，实现一个`observe`类，对于对象数据，通过`Object.defineProperty`来劫持对象的属性，实现`getter`和`setter`方法，这样就可以在getter的时候知道谁（订阅者）读取了数据，即谁依赖了当前的数据，将它通过`Dep类`（订阅器）收集统一管理，在setter的时候调用Dep类中的`notify`方法通知所以相关的订阅者进行更新视图。如果对象的属性也是一个对象的话，则需要递归调用`observe`进行处理。\n* 对于数组则需要另外处理，通过实现一个拦截器类，并将它挂载到数组数据的原型上，当调用`push/pop/shift/unshift/splice/sort/reverse`修改数组数据时候，相当于调用的是拦截器中重新定义的方法，这样在拦截器中就可以侦测到数据改变了，并通知订阅者更新视图。\n* vue3中使用Proxy替代了Object.defineProperty，优点在于可以直接监听对象而非属性、可以直接监听数组的变化、多达13种拦截方法。缺点是兼容性还不够好。Proxy作为新标准将受到浏览器厂商重点持续的性能优化。\n\n#### 对模板字符串进行编译\n\n* 实现Compile解析器类，将`template`中的模板字符串通过正则等方式进行处理生成对应的ast（抽象语法树），通过调用定义的不同钩子函数进行处理，包括开始标签（`start`）并判断是否自闭和以及解析属性、结束标签（`end`）、文本（`chars`）、注释（`comment`）\n* 将通过html解析与文本解析的ast进行优化处理，在静态节点上打标记，为后面`dom-diff`算法中性能优化使用，即在对比前后vnode的时候会跳过静态节点不作对比。\n* 最后根据处理好的ast生产`render`函数，在组件挂载的时候调用`render`函数就可以得到虚拟dom。\n\n#### 虚拟dom\n\n* vnode的类型包括注释节点、文本节点、元素节点、组件节点、函数式组件节点、克隆节点，`VNode`可以描述的多种节点类型，它们本质上都是`VNode`类的实例，只是在实例化的时候传入的属性参数不同而已。\n* 通过将模板字符串编译生成虚拟dom并缓存起来，当数据发生变化时，通过对比变化前后虚拟dom，以变化后的虚拟dom为基准，更新旧的虚拟dom，使它和新的一样。把dom-diff过程叫做`patch`的过程，其主要做了三件事，分别是创建/删除/更新节点。\n* 对于子节点的更新策略，vue中为了避免双重循环数据量大时候造成时间复杂度高带来的性能问题，而选择先从子节点数组中4个特殊位置进行对比，分别是：新前与旧前，新后与旧后，新后与旧前，新前与旧后。如果四种情况都没有找到相同的节点，则再通过循环方式查找。\n\n### 实现简易的vue双向数据绑定\nvue的双向数据绑定主要是指，数据变化更新视图变化，视图变化更新数据。 \n\n**实现代码如下**\n```handlebars\n\n\n\n \n \n Document\n \n\n\n

\n {{name}}\n

\n \n {{test}}\n

\n \n\n\n```\n\n```js\nclass vue extends EventTarget {\n constructor(option) {\n super()\n this.option = option\n this._data = this.option.data\n this.el = document.querySelector(this.option.el)\n this.compileNode(this.el)\n this.observe(this._data)\n }\n // 实现监听器方法\n observe(data) {\n const context = this\n // 使用proxy代理，劫持数据\n this._data = new Proxy(data, {\n set(target, prop, newValue) {\n // 自定义事件\n let event = new CustomEvent(prop, {\n detail: newValue\n })\n // 发布自定义事件\n context.dispatchEvent(event)\n return Reflect.set(...arguments)\n }\n })\n }\n // 实现解析器方法，解析模板\n compileNode(el) {\n let child = el.childNodes\n let childArr = [...child]\n childArr.forEach(node => {\n if (node.nodeType === 3) {\n let text = node.textContent\n let reg = /\\{\\{\\s*([^\\s\\{\\}]+)\\s*\\}\\}/g\n if (reg.test(text)) {\n let $1 = RegExp.$1\n this._data[$1] && (node.textContent = text.replace(reg, this._data[$1]))\n // 监听数据更改事件\n this.addEventListener($1, e => {\n node.textContent = text.replace(reg, e.detail)\n })\n }\n } else if (node.nodeType === 1) { // 如果是元素节点\n let attr = node.attributes\n // 判断属性中是否含有v-model\n if (attr.hasOwnProperty('v-model')) {\n let keyName = attr['v-model'].nodeValue\n node.value = this._data[keyName]\n node.addEventListener('input', e => {\n this._data[keyName] = node.value\n })\n }\n // 递归调用解析器方法\n this.compileNode(node)\n }\n })\n }\n}\n```\n\n",{"_54":730,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/261/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/261/timeline",{"_54":733,"_56":57,"_58":734,"_60":735,"_62":736,"_64":737,"_66":738,"_68":739,"_70":740,"_72":741,"_74":742,"_107":743,"_127":128,"_129":26,"_130":-5,"_131":746,"_133":747,"_155":148,"_149":749,"_151":750,"_154":-5,"_158":159,"_160":751,"_165":-5,"_166":752,"_168":753,"_180":755,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/242","https://api.github.com/repos/pro-collection/interview-question/issues/242/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/242/comments","https://api.github.com/repos/pro-collection/interview-question/issues/242/events","https://github.com/pro-collection/interview-question/issues/242",1650979765,"I_kwDOJGDC6c5iZ_O1",242,"[Redux] react-redux 是如何更新到 UI 的, 写一下这部分的核心源码",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[744,745],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":421,"_64":422,"_58":423,"_66":424,"_68":425,"_70":426,"_72":427,"_118":428,"_143":748,"_145":430,"_147":148,"_127":128,"_149":431,"_151":432,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-02T14:58:02Z","2023-04-02T14:58:03Z",{"_162":148,"_163":148,"_164":148},"### react-redux 和 redux 的关系\n\nRedux 和 React-Redux 是两个独立的库，但它们通常一起使用，因为 Redux 库本身并不针对 React，而是一个通用的状态管理库，而 React-Redux 则是一个用于将 Redux 集成到 React 应用程序中的库。\n\nReact-Redux 提供了一组 React 组件和钩子，使得在 React 应用程序中使用 Redux 变得更加容易。它提供了一个 `Provider` 组件，可以将 Redux store 注入到整个 React 应用程序中，并且可以使用 `connect` 函数将组件连接到 Redux store，使它们可以访问和修改 store 中的数据。\n\n使用 React-Redux，我们可以将 Redux 的状态管理能力与 React 的组件化能力结合起来，使得应用程序的状态可以很方便地被管理和共享，并且组件也可以方便地访问和修改应用程序的状态。\n\n### react-redux 是如何集成到 UI 的？\n\n`react-redux` 提供了两个主要的组件 `Provider` 和 `connect`，它们用于将 Redux 状态管理与 React 组件相结合。\n\n首先，使用 `Provider` 组件将 Redux store 传递给整个应用程序。可以将 `` 组件作为最高层的组件，这样在应用程序中的所有组件中都可以访问到 Redux store。\n\n下一步，使用 `connect` 函数连接 Redux store 和组件。`connect` 函数是一个高阶函数，它接收两个参数：`mapStateToProps` 和 `mapDispatchToProps`，并返回另一个函数，这个函数接受一个组件作为参数，并返回一个增强版的组件。\n\n`mapStateToProps` 函数用于从 Redux store 中获取需要的 state 数据，并将其映射到组件的 props 上。`mapDispatchToProps` 函数用于将 action creator 映射到组件的 props 上，这样组件就可以直接调用 action creator 发起 action，而不需要手动分发 dispatch。\n\n使用 `connect` 函数生成的增强版组件可以访问到 Redux store 中的 state 和 dispatch，并将它们作为 props 传递给原始组件。在组件中，可以直接使用这些 props 来获取和更新 state，以及发起 action。当组件中的 state 或 props 发生变化时，`connect` 函数会自动更新组件，以反映最新的 state 和 props。\n\n通过这种方式，`react-redux` 让我们可以在 React 组件中使用 Redux 进行状态管理，实现了 Redux 和 React 的无缝集成。\n\n### 简单写一下更新 UI 核心代码实现\n\nreact-redux 是基于 React 和 Redux 的，主要用于将 Redux 的状态管理功能集成到 React 应用程序中。它主要包括两个部分：Provider 和 connect。\n\nProvider 组件是 react-redux 的核心，它将 Redux 的 store 作为 props 传递给 React 组件，并通过 React 的上下文（Context）使得后代组件能够访问到 store。\n\nconnect 函数用于连接 React 组件与 Redux store，返回一个新的组件。该函数的主要作用是在组件中提供 mapStateToProps 和 mapDispatchToProps 函数，从而使组件能够从 Redux store 中读取数据，并向 store 分发 action。\n\n下面是一个简单的实现，用于说明 react-redux 是如何集成到 UI 的：\n\n```javascript\n// Provider.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\n\nexport const StoreContext = React.createContext();\n\nexport default function Provider(props) {\n const { store, children } = props;\n return (\n \n {children}\n \n );\n}\n\nProvider.propTypes = {\n store: PropTypes.object.isRequired,\n children: PropTypes.any,\n};\n\n// connect.js\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport { StoreContext } from './Provider';\n\nexport default function connect(mapStateToProps, mapDispatchToProps) {\n return function wrapWithConnect(WrappedComponent) {\n class Connect extends React.Component {\n componentDidMount() {\n const { store } = this.context;\n this.unsubscribe = store.subscribe(this.handleChange.bind(this));\n }\n\n componentWillUnmount() {\n this.unsubscribe();\n }\n\n handleChange() {\n this.forceUpdate();\n }\n\n render() {\n const { store } = this.context;\n const props = {\n ...this.props,\n ...mapStateToProps(store.getState(), this.props),\n ...mapDispatchToProps(store.dispatch, this.props),\n };\n return ;\n }\n }\n\n Connect.contextType = StoreContext;\n Connect.propTypes = {\n store: PropTypes.object,\n };\n Connect.displayName = `Connect(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;\n\n return Connect;\n };\n}\n```\n\n这里的 Provider 组件用于将 Redux 的 store 传递给 React 组件：\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createStore } from 'redux';\nimport { Provider } from 'react-redux';\nimport App from './App';\nimport rootReducer from './reducers';\n\nconst store = createStore(rootReducer);\n\nReactDOM.render(\n \n \n ,\n document.getElementById('root')\n);\n```\n\n而 connect 函数用于将 React 组件连接到 Redux store：\n\n```javascript\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { increment } from './actions';\n\nfunction Counter(props) {\n const { count, increment } = props;\n return (\n

Count: {count}

\n \n

\n );\n}\n\nconst mapStateToProps = state => {\n return {\n count: state.count,\n };\n};\n\nconst mapDispatchToProps = dispatch => {\n return {\n increment: () => dispatch(increment()),\n };\n};\n\nexport default connect(mapStateToProps, mapDispatchToProps)(Counter);\n```\n",{"_54":754,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/242/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/242/timeline",{"_54":757,"_56":57,"_58":758,"_60":759,"_62":760,"_64":761,"_66":762,"_68":763,"_70":764,"_72":765,"_74":766,"_107":767,"_127":128,"_129":26,"_130":-5,"_131":770,"_133":771,"_155":148,"_149":773,"_151":774,"_154":-5,"_158":159,"_160":775,"_165":-5,"_166":776,"_168":777,"_180":779,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/241","https://api.github.com/repos/pro-collection/interview-question/issues/241/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/241/comments","https://api.github.com/repos/pro-collection/interview-question/issues/241/events","https://github.com/pro-collection/interview-question/issues/241",1650975637,"I_kwDOJGDC6c5iZ-OV",241,"[Redux] 简单实现一下核心源码",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[768,769],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":772,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-02T14:46:40Z","2023-04-02T15:04:35Z",{"_162":148,"_163":148,"_164":148},"实现 Redux 的源码主要包括以下几个步骤：\r\n\r\n1. 实现 createStore 函数，创建 store 对象，该函数接收一个 reducer 函数作为参数，返回一个对象。\r\n2. 在 createStore 函数内部，定义一个 state 变量来存储当前的状态值，定义一个 listeners 数组来存储所有的监听函数。\r\n3. 实现 getState 方法，返回当前的状态值。\r\n4. 实现 dispatch 方法，接收一个 action 对象作为参数，将当前的状态值和 action 对象传给 reducer 函数，更新状态值。然后遍历 listeners 数组，调用所有的监听函数。\r\n5. 实现 subscribe 方法，接收一个监听函数作为参数，将该函数添加到 listeners 数组中，以便在状态更新时调用。\r\n6. 实现 combineReducers 函数，将多个 reducer 函数合并成一个 reducer 函数。\r\n7. 在 createStore 函数内部，将传入的 reducer 函数或者合并后的 reducer 函数赋值给一个内部的 currentReducer 变量。\r\n8. 在 dispatch 方法内部，将 currentReducer 赋值给一个局部变量，以保证在 reducer 函数中调用 dispatch 方法时可以获取到最新的 reducer 函数。\r\n\r\n下面是代码实现：\r\n\r\n```javascript\r\n// 实现 createStore 函数\r\nfunction createStore(reducer) {\r\n let state;\r\n const listeners = [];\r\n\r\n function getState() {\r\n return state;\r\n }\r\n\r\n function dispatch(action) {\r\n state = reducer(state, action);\r\n for (let i = 0; i < listeners.length; i++) {\r\n listeners[i]();\r\n }\r\n }\r\n\r\n function subscribe(listener) {\r\n listeners.push(listener);\r\n }\r\n\r\n dispatch({});\r\n\r\n return {\r\n getState,\r\n dispatch,\r\n subscribe\r\n };\r\n}\r\n\r\n// 实现 combineReducers 函数\r\nfunction combineReducers(reducers) {\r\n return function(state = {}, action) {\r\n const nextState = {};\r\n for (const key in reducers) {\r\n nextState[key] = reducers[key](state[key], action);\r\n }\r\n return nextState;\r\n };\r\n}\r\n```\r\n\r\n在使用时，可以先定义 reducer 函数：\r\n\r\n```javascript\r\nfunction todos(state = [], action) {\r\n switch (action.type) {\r\n case \"ADD_TODO\":\r\n return [\r\n ...state,\r\n {\r\n id: action.id,\r\n text: action.text,\r\n completed: false\r\n }\r\n ];\r\n case \"TOGGLE_TODO\":\r\n return state.map(todo =>\r\n todo.id === action.id ? { ...todo, completed: !todo.completed } : todo\r\n );\r\n default:\r\n return state;\r\n }\r\n}\r\n\r\nfunction visibilityFilter(state = \"SHOW_ALL\", action) {\r\n switch (action.type) {\r\n case \"SET_VISIBILITY_FILTER\":\r\n return action.filter;\r\n default:\r\n return state;\r\n }\r\n}\r\n```\r\n\r\n然后将它们传入 combineReducers 函数，创建一个 reducer 函数：\r\n\r\n```javascript\r\nconst reducer = combineReducers({\r\n todos,\r\n visibilityFilter\r\n});\r\n```\r\n\r\n最后调用 createStore 函数，创建一个 store 对象：\r\n\r\n```javascript\r\nconst store = createStore(reducer);\r\n```\r\n\r\n现在就可以使用 store 对象来获取状态值、派发 action、监听状态变化了。\r\n\r\n\r\n可以参考文档: https://juejin.cn/post/6844903785689546760",{"_54":778,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/241/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/241/timeline",{"_54":781,"_56":57,"_58":782,"_60":783,"_62":784,"_64":785,"_66":786,"_68":787,"_70":788,"_72":789,"_74":790,"_107":791,"_127":128,"_129":26,"_130":-5,"_131":794,"_133":795,"_155":148,"_149":797,"_151":798,"_154":-5,"_158":159,"_160":799,"_165":-5,"_166":800,"_168":801,"_180":803,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/240","https://api.github.com/repos/pro-collection/interview-question/issues/240/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/240/comments","https://api.github.com/repos/pro-collection/interview-question/issues/240/events","https://github.com/pro-collection/interview-question/issues/240",1650974107,"I_kwDOJGDC6c5iZ92b",240,"[Redux] 的存储过程",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[792,793],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":796,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-04-02T14:42:37Z","2023-04-02T14:42:38Z",{"_162":148,"_163":148,"_164":148},"Redux 的存储过程可以简单地分为以下几个步骤：\n\n1. Action Creator 函数被调用，生成一个 Action 对象；\n2. Action 对象被传递给 Store.dispatch() 方法；\n3. Redux Store 调用 Reducer 函数，将当前的 State 和 Action 作为参数传入；\n4. Reducer 函数根据 Action 的类型，生成一个新的 State；\n5. Redux Store 将新的 State 存储下来，用于下一次的状态更新；\n6. 组件通过调用 Store.subscribe() 方法，监听 Store 中 State 的变化；\n7. 当 State 发生变化时，Store 会通知所有的订阅者，订阅者会重新渲染相应的组件。\n\n这个过程可以简单地描述为：Action -> Reducer -> Store -> View。其中，Action 是一个纯对象，它描述了发生的事件；Reducer 是一个纯函数，它接收当前的 State 和 Action，返回一个新的 State；Store 是将 Action 和 Reducer 结合起来的对象，它维护了应用程序的 State；View 则是 React 组件，它通过 Store.subscribe() 方法监听 State 的变化，根据 State 的变化重新渲染页面。",{"_54":802,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/240/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/240/timeline",{"_54":805,"_56":57,"_58":806,"_60":807,"_62":808,"_64":809,"_66":810,"_68":811,"_70":812,"_72":813,"_74":814,"_107":815,"_127":128,"_129":26,"_130":-5,"_131":818,"_133":819,"_155":148,"_149":821,"_151":822,"_154":-5,"_158":159,"_160":823,"_165":-5,"_166":824,"_168":825,"_180":827,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/239","https://api.github.com/repos/pro-collection/interview-question/issues/239/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/239/comments","https://api.github.com/repos/pro-collection/interview-question/issues/239/events","https://github.com/pro-collection/interview-question/issues/239",1648001921,"I_kwDOJGDC6c5iOoOB",239,"如何在前端团队快速落地代码规范",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[816,817],{"_66":412,"_68":413,"_54":414,"_113":415,"_115":416,"_117":26,"_118":417},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":820,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-30T17:10:42Z","2023-03-31T01:22:24Z",{"_162":148,"_163":148,"_164":148},"// todo 待整理\r\n\r\n- https://juejin.cn/post/7033210664844066853\r\n- https://juejin.cn/post/7007419705543622669\r\n- https://juejin.cn/post/7167707693333872647\r\n- https://juejin.cn/post/6844904142289240071\r\n",{"_54":826,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/239/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/239/timeline",{"_54":829,"_56":57,"_58":830,"_60":831,"_62":832,"_64":833,"_66":834,"_68":835,"_70":836,"_72":837,"_74":838,"_107":839,"_127":128,"_129":26,"_130":-5,"_131":842,"_133":843,"_155":148,"_149":845,"_151":846,"_154":-5,"_158":159,"_160":847,"_165":-5,"_166":848,"_168":849,"_180":851,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/238","https://api.github.com/repos/pro-collection/interview-question/issues/238/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/238/comments","https://api.github.com/repos/pro-collection/interview-question/issues/238/events","https://github.com/pro-collection/interview-question/issues/238",1647970228,"I_kwDOJGDC6c5iOge0",238,"如何保证用户的使用体验",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[840,841],{"_66":269,"_68":270,"_54":271,"_113":272,"_115":273,"_117":26,"_118":274},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":844,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-30T16:47:54Z","2023-03-30T16:47:55Z",{"_162":148,"_163":148,"_164":148},"【如何保证用户的使用体验】这个也是一个较为复杂的话题，这个也不是问题了，这个算是话题吧；\n\n主要从以下几个方面思考问题：\n\n1. 性能方向的思考\n\n2. 用户线上问题反馈，线上 on call 的思考\n\n3. 用户使用体验的思考，交互体验使用方向\n\n4. 提升用户能效方向思考\n",{"_54":850,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/238/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/238/timeline",{"_54":853,"_56":57,"_58":854,"_60":855,"_62":856,"_64":857,"_66":858,"_68":859,"_70":860,"_72":861,"_74":862,"_107":863,"_127":128,"_129":26,"_130":-5,"_131":866,"_133":867,"_155":148,"_149":869,"_151":870,"_154":-5,"_158":159,"_160":871,"_165":-5,"_166":872,"_168":873,"_180":875,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/237","https://api.github.com/repos/pro-collection/interview-question/issues/237/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/237/comments","https://api.github.com/repos/pro-collection/interview-question/issues/237/events","https://github.com/pro-collection/interview-question/issues/237",1646077597,"I_kwDOJGDC6c5iHSad",237,"canvas 与 svg 在可视化领域优劣如何",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[864,865],{"_66":269,"_68":270,"_54":271,"_113":272,"_115":273,"_117":26,"_118":274},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":868,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-29T15:42:42Z","2023-10-11T03:08:31Z",{"_162":148,"_163":148,"_164":148},"SVG、Canvas和WebGL在可视化方向各有优劣，具体如下：\r\n\r\n**SVG（Scalable Vector Graphics）：**\r\n\r\n- 优势：\r\n1. 矢量图形：SVG 使用矢量图形描述，图形会根据缩放和放大而保持清晰，适用于需要无损放大的情况。\r\n2. 文本处理：SVG 对于文本处理较好，可以方便地添加和编辑文本。\r\n3. 简单图形绘制：SVG 支持直接绘制基本图形，如矩形、圆形、线条等，方便快速绘制简单图表。\r\n\r\n- 劣势：\r\n1. 复杂图形处理：当图形复杂度较高时，SVG 的性能会受到影响，特别是在处理大量数据时。\r\n2. 动画效果：SVG 的动画效果相对较弱，复杂的动画效果可能导致性能下降。\r\n\r\n**Canvas：**\r\n\r\n- 优势：\r\n1. 像素级控制：Canvas 提供了像素级别的控制，可以绘制复杂的图形和图表。\r\n2. 性能较好：Canvas 可以通过 JavaScript 直接操作像素，适用于处理大量数据和复杂图形的场景。\r\n3. 动画效果：Canvas 可以通过 JavaScript 控制每一帧的绘制，实现复杂的动画效果。\r\n\r\n- 劣势：\r\n1. 缩放和放大：Canvas 绘制的图形是像素级别的，当需要缩放和放大时会导致图形模糊。\r\n2. 文本处理：相对于 SVG，Canvas 对于文本处理较为复杂，需要手动进行字体设置和绘制。\r\n\r\n**WebGL（Web Graphics Library）：**\r\n\r\n- 优势：\r\n1. 3D 图形渲染：WebGL 可以进行硬件加速的 3D 图形渲染，适用于创建复杂的 3D 场景和效果。\r\n2. 性能优异：WebGL 可以充分利用 GPU 的并行计算能力，具有较好的性能表现。\r\n\r\n- 劣势：\r\n1. 学习成本高：WebGL 使用 OpenGL ES 的接口，对于开发者要求一定的图形学和计算机图形学的知识。\r\n2. 兼容性问题：WebGL 需要浏览器支持，并且在某些设备和浏览器上可能存在兼容性问题。\r\n\r\n综上所述，选择适合的技术取决于具体的需求，如图形复杂性、数据量大小、动画效果的需求、对文本处理的要求等。在实际开发中，也可以结合使用不同的技术来满足不同的需求。\r\n\r\n\r\n**表格对比**\r\n\r\n|特性|Canvas|SVG|\r\n|---|---|---|\r\n|图形质量|像素级别的图形，适合绘制大量复杂动态的图形|矢量图，图形不会失真，适合绘制静态图形|\r\n|图形渲染|快速渲染，适合处理大量图形数据|慢速渲染，适合处理小规模静态图形|\r\n|交互性|事件处理复杂，需要手动编写交互逻辑|事件处理简单，内置事件处理机制|\r\n|动画效果|动画效果需要手动实现，实现复杂动画困难|内置 SMIL 动画支持，可实现较复杂动画效果|\r\n|浏览器支持|除 IE8 及以下版本外，其他浏览器都支持|除 IE9 及以下版本外，其他浏览器都支持|\r\n|适用场景|处理大量动态图形，如游戏开发、数据可视化等|绘制简单静态图形，如图标、线条、文字等|\r\n",{"_54":874,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/237/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/237/timeline",{"_54":877,"_56":57,"_58":878,"_60":879,"_62":880,"_64":881,"_66":882,"_68":883,"_70":884,"_72":885,"_74":886,"_107":887,"_127":128,"_129":26,"_130":-5,"_131":890,"_133":891,"_155":148,"_149":893,"_151":894,"_154":-5,"_158":159,"_160":895,"_165":-5,"_166":896,"_168":897,"_180":899,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/224","https://api.github.com/repos/pro-collection/interview-question/issues/224/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/224/comments","https://api.github.com/repos/pro-collection/interview-question/issues/224/events","https://github.com/pro-collection/interview-question/issues/224",1644220683,"I_kwDOJGDC6c5iANEL",224,"对象取值中 a.b.c.d 和 a['b']['c']['d'] 有何区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[888,889],{"_66":239,"_68":240,"_54":241,"_113":242,"_115":243,"_117":26,"_118":244},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":332,"_64":333,"_58":334,"_66":335,"_68":336,"_70":185,"_72":337,"_118":338,"_143":892,"_145":340,"_147":148,"_127":128,"_149":341,"_151":342,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T15:40:55Z","2023-03-28T15:40:57Z",{"_162":148,"_163":148,"_164":148},"### 使用区别\n\n在 JavaScript 中，对象的取值可以使用两种方式，即使用点号（.）和使用方括号（\\[\\]）。对于对象的多层嵌套属性，可以使用两种方式分别取值，例如：\n\n```css\ncssCopy codevar obj = {a: {b: {c: {d: 123}}}};\nvar d1 = obj.a.b.c.d;\nvar d2 = obj['a']['b']['c']['d'];\n```\n\n这两种方式获取的结果是相同的，都是 123。其中，使用点号取值的方式称为“点操作符”，使用方括号取值的方式称为“方括号操作符”。\n\n两种方式的区别在于：\n\n1. 点操作符必须使用标识符作为属性名，而方括号操作符可以使用任何字符串作为属性名。\n2. 点操作符在代码书写上更加简洁直观，而方括号操作符可以动态地构造属性名。\n\n因此，在使用时应根据具体的情况选择合适的方式。例如，如果属性名是固定的，建议使用点操作符；如果属性名需要根据变量或其他动态条件构造，则需要使用方括号操作符。\n\n### 性能区别\n\n在对象属性的取值操作中，使用点号`.`和中括号`[]`两种方式都能取到相应的属性值，它们在性能上也有些许的差别。\n\n一般情况下，使用点号`.`来获取属性的性能要高于中括号`[]`，因为在解析的过程中使用点号`.`可以直接根据属性名获取到对应的属性值，而中括号`[]`需要先进行解析里面的属性名，然后再去查找相应的属性值，因此多了一个解析的过程。\n\n但是在以下两种情况下，只能使用中括号`[]`来获取属性值：\n\n1. 属性名包含特殊字符或者是关键字，比如 a\\['class'\\]。\n2. 属性名是动态生成的，比如 a\\[`${name}`\\]。\n\n在这两种情况下，使用点号`.`将会出现语法错误，只能使用中括号`[]`来获取属性值。",{"_54":898,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/224/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/224/timeline",{"_54":901,"_56":57,"_58":902,"_60":903,"_62":904,"_64":905,"_66":906,"_68":907,"_70":908,"_72":909,"_74":910,"_107":911,"_127":128,"_129":26,"_130":-5,"_131":920,"_133":921,"_155":148,"_149":923,"_151":924,"_154":-5,"_158":159,"_160":925,"_165":-5,"_166":926,"_168":927,"_180":929,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/222","https://api.github.com/repos/pro-collection/interview-question/issues/222/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/222/comments","https://api.github.com/repos/pro-collection/interview-question/issues/222/events","https://github.com/pro-collection/interview-question/issues/222",1644202166,"I_kwDOJGDC6c5iAIi2",222,"给定两个数组，写一个方法来计算它们的交集？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[912,913,914],{"_66":239,"_68":240,"_54":241,"_113":242,"_115":243,"_117":26,"_118":244},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},{"_66":915,"_68":916,"_54":917,"_113":918,"_115":416,"_117":26,"_118":919},5931045040,"LA_kwDOJGDC6c8AAAABYYSQsA","https://api.github.com/repos/pro-collection/interview-question/labels/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0/%E7%AE%97%E6%B3%95","代码实现/算法","代码实现或者算法实现",[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":922,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T15:30:22Z","2023-10-13T04:26:01Z",{"_162":148,"_163":148,"_164":148},"可以使用 ES6 的 Set 数据结构来实现数组交集。\n\n首先，将一个数组转化为 Set，然后遍历另一个数组，将数组中存在于 Set 中的元素存入结果数组中。\n\n以下是一个示例代码：\n\n```javascript\nfunction intersection(nums1, nums2) {\n const set1 = new Set(nums1);\n const res = [];\n\n for (let num of nums2) {\n if (set1.has(num)) {\n res.push(num);\n }\n }\n\n return res;\n}\n```\n\n使用示例：\n\n```javascript\nconst nums1 = [1, 2, 2, 1];\nconst nums2 = [2, 2];\n\nconsole.log(intersection(nums1, nums2)); // [2]\n```\n\n该算法的时间复杂度为 O(m+n)，其中 m 和 n 分别为两个数组的长度。",{"_54":928,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/222/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/222/timeline",{"_54":931,"_56":57,"_58":932,"_60":933,"_62":934,"_64":935,"_66":936,"_68":937,"_70":938,"_72":939,"_74":940,"_107":941,"_127":128,"_129":26,"_130":-5,"_131":944,"_133":945,"_155":148,"_149":947,"_151":948,"_154":-5,"_158":159,"_160":949,"_165":-5,"_166":950,"_168":951,"_180":953,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/221","https://api.github.com/repos/pro-collection/interview-question/issues/221/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/221/comments","https://api.github.com/repos/pro-collection/interview-question/issues/221/events","https://github.com/pro-collection/interview-question/issues/221",1644198247,"I_kwDOJGDC6c5iAHln",221,"箭头函数为何不能作为构造函数使用？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[942,943],{"_66":239,"_68":240,"_54":241,"_113":242,"_115":243,"_117":26,"_118":244},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":946,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T15:27:58Z","2023-03-28T15:27:59Z",{"_162":148,"_163":148,"_164":148},"在箭头函数中，`this`指向的是定义时所在的对象，而不是使用时所在的对象。换句话说，**箭头函数没有自己的this，而是继承父作用域中的this**。\n\n看个例子:\n\n```javascript\nvar person = {\n name:'张三',\n age:18,\n getName:function(){\n console.log('我的名字是：'+this.name)\n },\n getAge:()=>{\n console.log('我的年龄是：'+this.age)\n }\n}\n\nperson.getName() // 我的名字是张三\nperson.getAge() // 我的年龄是undefined\n\n```\n\n`person.getName()`中`this`指向函数的调用者，也就是`person`实例，因此`this.name = \"张三\"`。\n\n`getAge()`通过箭头函数定义，而箭头函数是没有自己的`this`，会继承父作用域的`this`，因此`person.getAge()`执行时，此时的作用域指向`window`，而`window`没有定义`age`属性，所有报`undefined`。\n\n从例子可以得出：**对象中定义的函数使用箭头函数是不合适的**。\n\n\n**先解答下标题问题，为啥箭头函数不能作为构造函数？**\n\n```javascript\n// 构造函数生成实例的过程\nfunction Person(name,age){\n this.name = name\n this.age = age\n}\nvar p = new Person('张三',18)\n\n//new关键字生成实例过程如下\n// 1. 创建空对象p\nvar p = {}\n// 2. 将空对象p的原型链指向构造器Person的原型\np.__proto__ = Person.prototype\n// 3. 将Person()函数中的this指向p\n// 若此处Person为箭头函数，而没有自己的this，call()函数无法改变箭头函数的指向，也就无法指向p。\nPerson.call(p)\n\n```\n\n构造函数是通过new关键字来生成对象实例，生成对象实例的过程也是通过构造函数给实例绑定this的过程，而箭头函数没有自己的this。创建对象过程，`new` 首先会创建一个空对象，并将这个空对象的`__proto__`指向构造函数的`prototype`，从而继承原型上的方法，但是箭头函数没有`prototype`。因此不能使用箭头作为构造函数，也就不能通过new操作符来调用箭头函数。\n",{"_54":952,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/221/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/221/timeline",{"_54":955,"_56":57,"_58":956,"_60":957,"_62":958,"_64":959,"_66":960,"_68":961,"_70":962,"_72":963,"_74":964,"_107":965,"_127":128,"_129":26,"_130":-5,"_131":968,"_133":969,"_155":148,"_149":971,"_151":972,"_154":-5,"_158":159,"_160":973,"_165":-5,"_166":974,"_168":975,"_180":977,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/217","https://api.github.com/repos/pro-collection/interview-question/issues/217/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/217/comments","https://api.github.com/repos/pro-collection/interview-question/issues/217/events","https://github.com/pro-collection/interview-question/issues/217",1644109965,"I_kwDOJGDC6c5h_yCN",217,"[Vue] 响应式原理中 Object.defineProperty 有什么缺陷",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[966,967],{"_66":199,"_68":200,"_54":201,"_113":202,"_115":203,"_117":26,"_118":204},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":135,"_64":136,"_58":137,"_66":138,"_68":139,"_70":140,"_72":141,"_118":142,"_143":970,"_145":146,"_147":148,"_127":128,"_149":150,"_151":152,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-28T14:43:24Z","2024-04-13T14:00:17Z",{"_162":148,"_163":148,"_164":148},"Vue 2 中使用`Object.defineProperty`来实现其响应式系统存在一些限制和问题：\r\n\r\n1. **深度检测**：\r\n Vue 2中对于对象的处理是递归的；对于每个属性，Vue会逐层使用`Object.defineProperty`将其转换成 getter/setter。这样，当你访问或修改嵌套较深的属性时（如`a.b.c`），Vue已经提前将`a`、`a.b`和`a.b.c`的属性转换为响应式，能够追踪它们的变化。\r\n\r\n2. **数组限制**：\r\n `Object.defineProperty`无法检测到数组索引的变化，因此Vue重写了数组的变异方法（如`push`、`pop`、`splice`等）来实现对数组的响应式监听。\r\n\r\n3. **对象属性添加或删除的限制**：\r\n 因为`Object.defineProperty`只能在初始化的时候应用于属性，当你在一个已经创建的Vue实例上添加新属性时，这个新属性是非响应式的。如果你想要它是响应式的，需要使用`Vue.set()`或`this.$set()`方法添加新属性。\r\n\r\n4. **性能问题**：\r\n 因为`Object.defineProperty`是递归地对对象的每一个属性进行处理，所以在处理具有大量属性或深层嵌套对象时，可能会有较大的性能开销。\r\n\r\n关于处理`a.b.c`类型的属性，Vue 2内部会递归地遍历对象`a`的所有属性，为它们各自使用`Object.defineProperty`定义getter和setter。如果`b`是`a`的属性，那么同样会针对`b`做这样的处理，以及它的所有属性，包括`c`等。这样，在访问或修改`a.b.c`时，Vue可以追踪到这些变化并触发相关的更新。\r\n\r\n```javascript\r\nfunction defineReactive(obj, key, val) {\r\n Object.defineProperty(obj, key, {\r\n enumerable: true,\r\n configurable: true,\r\n get: function reactiveGetter() {\r\n // 依赖收集等操作\r\n return val;\r\n },\r\n set: function reactiveSetter(newVal) {\r\n if (newVal === val) return;\r\n val = newVal;\r\n // 触发更新视图等操作\r\n }\r\n });\r\n\r\n // 如果val本身还是对象，则递归处理\r\n if (typeof val === 'object') {\r\n reactive(val);\r\n }\r\n}\r\n\r\nfunction reactive(obj) {\r\n for (let key in obj) {\r\n defineReactive(obj, key, obj[key]);\r\n }\r\n}\r\n```\r\n\r\n在上面的`reactive`函数中，我们将一个对象转换成响应式对象。这是Vue内部实现响应式的简化版原理。不过，Vue的响应式系统要复杂得多，它还涉及依赖收集和派发更新等机制。",{"_54":976,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/217/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/217/timeline",{"_54":979,"_56":57,"_58":980,"_60":981,"_62":982,"_64":983,"_66":984,"_68":985,"_70":986,"_72":987,"_74":988,"_107":989,"_127":128,"_129":26,"_130":-5,"_131":992,"_133":993,"_155":148,"_149":995,"_151":996,"_154":-5,"_158":159,"_160":997,"_165":-5,"_166":998,"_168":999,"_180":1001,"_182":-5,"_183":-5,"_184":185},"https://api.github.com/repos/pro-collection/interview-question/issues/204","https://api.github.com/repos/pro-collection/interview-question/issues/204/labels{/name}","https://api.github.com/repos/pro-collection/interview-question/issues/204/comments","https://api.github.com/repos/pro-collection/interview-question/issues/204/events","https://github.com/pro-collection/interview-question/issues/204",1640927038,"I_kwDOJGDC6c5hzo8-",204,"AMD 和 CMD 模块化有和区别？",{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},[990,991],{"_66":412,"_68":413,"_54":414,"_113":415,"_115":416,"_117":26,"_118":417},{"_66":121,"_68":122,"_54":123,"_113":124,"_115":125,"_117":26,"_118":126},[],{"_54":208,"_64":209,"_58":210,"_66":211,"_68":212,"_70":213,"_72":214,"_118":215,"_143":994,"_145":217,"_147":148,"_127":128,"_149":218,"_151":219,"_153":-5,"_154":-5},{"_76":77,"_66":78,"_68":79,"_80":81,"_82":23,"_54":83,"_64":84,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":98,"_62":99,"_100":101,"_102":103,"_104":105,"_106":26},"2023-03-26T14:08:39Z","2023-03-26T14:11:05Z",{"_162":148,"_163":148,"_164":148},"AMD（Asynchronous Module Definition）和CMD（Common Module Definition）都是JavaScript模块化方案。它们的主要区别在于对依赖的处理方式上不同。\n\nAMD是在require.js推广过程中诞生的，它的特点是提前执行，强调依赖前置。也就是说，在定义模块时就需要声明其所有依赖的模块。它的语法如下：\n\n```javascript\ndefine(['dependency1', 'dependency2'], function(dependency1, dependency2) {\n // 模块的定义\n});\n```\n\nCMD是在Sea.js推广过程中诞生的，它和AMD非常相似，但是更加懒惰，是依赖就近，延迟执行。也就是说，在模块中需要用到依赖时，才去引入依赖。它的语法如下：\n\n```javascript\ndefine(function(require, exports, module) {\n var dependency1 = require('dependency1');\n var dependency2 = require('dependency2');\n // 模块的定义\n});\n```\n\n简单来说，AMD是提前执行、依赖前置，CMD是延迟执行、依赖就近。两种模块化方案各有优缺点，选择哪种模块化方案需要根据实际情况和个人偏好进行考虑。",{"_54":1000,"_171":148,"_172":148,"_173":148,"_174":148,"_175":148,"_176":148,"_177":148,"_178":148,"_179":148},"https://api.github.com/repos/pro-collection/interview-question/issues/204/reactions","https://api.github.com/repos/pro-collection/interview-question/issues/204/timeline","pagination",{"_1004":213,"_162":426},"value","actionData","errors"]