皮皮网

1.jquery中attr和prop的区别
2.Mobx源码阅读笔记——3. proxy 还是源码defineProperty，劫持对象行为的源码两个方案
3.jQuery学习之prop和attr的区别
4.vue3源码分析——实现props,emit，事件处理等

jquery中attr和prop的区别

       attr会改变元素的属性和值 html结构会发生变化

       prop只是显示上会发生变化 源码不会发生变化

Mobx源码阅读笔记——3. proxy 还是源码defineProperty，劫持对象行为的源码两个方案

       这篇文章将深入分析 MobX 的 observableObject 数据类型的源码，同时探讨使用 Proxy 和 Object.defineProperty 这两种实现方案来劫持对象行为的源码策略。通过分析，源码汉风幻三源码我们能够理解 MobX 在创建 observableObject 时是源码如何同时采用这两种方案，并在创建时决定使用哪一种。源码

       首先，源码回顾 observableArray 的源码实现方式，通过 Proxy 代理数组的源码行为，转发给 ObservableArrayAdministration 来实现响应式修改的源码逻辑。同样，源码我们已经讨论过 observableValue 的源码实现，通过一个特殊的源码亏损概念源码类 ObservableValue 直接使用其方法，无需代理。

       对于 observableObject 的实现机制，其特点在于同时采用了上述两种方案，并且在创建时决定使用哪一种。让我们回到文章中提到的工厂方法，其中根据 options.proxy 的值来决定使用哪一种方案。

       在 options.proxy 为 false 的情况下，使用第一条路径来实现 observableObject。这通过直接返回 extendObservable 的结果，其中 extendObservable 是一个工具函数，用于向已存在的目标对象添加 observable 属性。属性映射中的所有键值对都会导致目标上生成新的 observable 属性，并且属性映射中的任意 getters 会被转化为计算属性。

       这里首先根据 options 参数选择特定的pod系统源码 decorator，这个过程与之前在第一篇文章中通过 options 参数选择特定的 enhancer 类似。实际上，这里的 decorator 起到了类似的作用，甚至在创建 decorator 这个过程本身也需要通过 enhancer 参数。

       至于 decorator 和 enhancer 之间的耦合机制，文章中详细解释了 createDecoratorForEnhancer 和 createPropDecorator 函数，通过这些函数我们能够了解到它们是如何将 decorator 和 enhancer 联系起来的。

       接下来，文章深入分析了 decorator 的作用机制，包括它如何决定是否立即执行，以及在不立即执行时如何将创建 prop 的相关信息保存下来。通过 initializeInstance 函数，我们了解了如何解决 # 问题，这涉及到如何正确处理那些在创建时未被立即执行的吴彦祖指标源码 prop。

       最终，通过为 target 对象创建 ObservableObjectAdministration 管理对象，并通过 $mobx 和 target 属性将它们关联起来，我们完成了 observableObject 的创建。如果传入的 properties 不为空，则使用 extendObservableObjectWithProperties 来初始化。这里的代码逻辑相对简单，主要遍历 properties 中的所有键并调用对应的 decorator。

       文章还指出，虽然在第一条路径中，使用 Object.defineProperty 重写了 prop 的 getter 和 setter，但在 MobX 4 及以下版本中，使用 Proxy 来实现 observableObject 的逻辑更为常见。Proxy 特性在 ES6 引入后，sd源码分析提供了更强大的能力来劫持对象的行为，不仅限于 getter 和 setter，还包括对象的其他行为。

       最后，文章总结了使用 Proxy 方案的优点，包括能够更全面地劫持对象的行为，而不仅仅是属性的 getter 和 setter。Proxy 方案在实现双向绑定时，能够提供更灵活和强大的功能。同时，文章也提到了两种方案的局限性，尤其是在处理对象属性的可观察性方面，Proxy 方案在某些情况下可能更具优势。

jQuery学习之prop和attr的区别

       prop是jquery1.6新增的方法，其与attr的用法极为相似。由于不理解他们的根本区别，难免产生离奇的BUG。

       é€šè¿‡åˆ†æžattr和prop的源码，得知：

       attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操作的属性元素节点。

       è€Œprop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你可以理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。

       å¼•å…¥ä¸¤ä¸ªä¾‹å­ï¼š

       <input type="checkbox" id="test" abc="" />

       $(function(){

        el = $("#test");

        console.log(el.attr("style")); //undefined

        console.log(el.prop("style")); //CSSStyleDeclaration对象

        console.log(document.getElementById("test").style); //CSSStyleDeclaration对象

       });

       1、el.attr(“style”)输出undefined，因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined

       2、el.prop(“style”)输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象

       3、至于document.getElementById(“test”).style和上面那条一样

       el.attr("abc","")

       console.log(el.attr("abc")); www.hbbz.com //

       console.log(el.prop("abc")); //undefined

       é¦–先用attr方法给这个对象添加abc节点属性，值为，可以看到html的结构也变了

       1、el.attr(“abc”)输出结果为，再正常不过了

       2、el.prop(“abc”)输出undefined，因为abc是在这个的属性节点中，所以通过prop是取不到的

vue3源码分析——实现props,emit，事件处理等

       <>

       本期内容聚焦在 Vue 3 中实现 props、emit 以及事件处理的源码分析。为了详细了解这些功能的实现，请先回顾上一期的内容。

       在 Vue 3 的渲染函数中，可以通过 `this` 访问 setup 返回的内容，如 `this.xxx`，以及 `this.$el` 等其他属性。

       在进行测试用例时，需要预先在文档中创建一个 `app` 节点，以模拟实际的 DOM 环境。测试用例将模仿在 HTML 中定义的 `app` 节点。

       接下来，我们深入分析并解决两个具体需求：

       1. 在 `setupStatefulComponent` 函数中创建一个代理对象并绑定到 `instance` 中，当 `setup` 的返回结果为对象时，确保其存在于 `instance` 中，可以通过 `instance.setupState` 访问。

       2. 在 `mountElement` 函数中，当创建节点时，在 `vnode` 中绑定 `el`。同时，在 `setupStatefulComponent` 中的代理对象中判断当前的 `key`，确保在执行时已正确绑定 `el`。

       分析发现，`mountElement` 的执行顺序可能导致问题，即在 `setupStatefulComponent` 执行时 `vnode.el` 未赋值，导致后续操作失败。实际上，`render` 函数返回的 `subtree` 是一个 `vnode`，在 `patch` 后执行相关操作，可以解决这个问题。

       至此，测试用例可顺利通过。

       接下来，我们将探讨 Vue 中如何使用 `onEvent` 实现事件注册，以及其背后的实现逻辑。

       在 Vue 3 中，`onEvent` 提供了一种简洁的事件绑定方式。测试用例分析发现，关键在于处理 prop，判断属性是否符合特定格式，进而进行事件注册。通过在传入的 `el` 中添加一个属性 `el._vei` 来实现事件缓存。

       实现过程中，事件处理逻辑得到完善，确保了功能的正确实现。

       在 Vue 3 中，实现父子组件通信主要涉及 props 与 emit 的使用。通过分析测试用例，我们解决了以下问题：

       1. 在子组件的 `setup` 函数中使用 props 需要明确传入组件的 `props`。

       2. 在 `render` 中访问 `this` 的 `props` 需要在代理对象中添加相应的判断。

       3. 处理 `emit` 的异常情况，如报错，通过使用 `shallowReadonly` 包裹以确保只能读取。

       对于 `emit` 的实现，关键在于正确传入参数以及处理事件名的格式转换。问题得到解决后，测试用例运行顺畅。

       至此，我们完成了 Vue 3 中 props、emit 及事件处理的源码分析与实现。通过深入理解 Vue 3 的组件系统，我们能够更高效地构建具有交互性的前端应用。