1 - Vue 3 Reactivity-【课程】Vue 3响应式原理 (Vue 3 Reactivity)【中英字幕】- Vue Mastery

热门回复：

• 豆腐干_233:p2：在这个课程中我们将会结束我们的响应式引擎，编码开始，就像vue3 的响应式那样，在上一个课程中，我们最终得到了这样的代码：（........）， 在我们调用track来记录我们的effects然后trigger来重复我们的effects的时候，我们希望我们的响应式引擎会自动的完成track和trigger 当我们运行一个effect的时候，如果他的properties是可以获取的，我们就调用track函数，去save这个effect，如果这个product的properties发生了变化或者被重置，我们就调用trigger去运行已经保存的effects 所以问题就变成，我们如何去拦截这些get和set方法（函数），在vue2中我们使用es5的，object.defineProperty( )函数，在vue3中我们将会用es6的反射和代理， （调侃ie浏览器中……） 在我们的product中，我们有三种方法来print out对象的属性首先我们可以用点表示法，我们也可以用括号表示，我们也可以用es6的反射，就像你看到的三个都有效，但是反射更牛逼（在我们理解代理之后） （开始介绍代理）代理是另一个对象的占位符（placeholder）默认情况下，这个占位符就代表了这个对象（对象委托占位符，占位符被委托给对象） 所以如果我创建一个proxiedProduct然后像这样声明一个代理，然后我们来调用proxiedProduct.quantity（这里quantity是product的属性，但是委托给proxiedProduct之后proxiedProduct也可以调用）这里是先调用了proxy（proxiedProduct），然后proxiedProduct调用的product，然后返回代理也就是proxiedProduct最后返回到console log（这个步骤可以看图）然后他就会打印‘2’他只是委托给对象，你有看到代理中的第二个参数吗？这个叫做handler（服务函数？）在这个handler中，你可以send一个trap，这个trap使我们可以拦截fundamental的操作，比如property lookup或者enum或者函数调用，所以在我们的例子中，当我们调用代理product时（即proxiedProduct）我们想要改变行为
• LaTaleLee:看完留名.感谢[鸡腿]
• 小杜向:感谢，这个讲师我很喜欢，除了他讲English和收费[笑哭]
• 豆腐干_233:up,请问有没有下面的文章搬运
• 小小砚秋:这个机翻太灵性[捂脸]