前言请点击原视频链接。该视频将从Vue开发人员的角度向您展示设计模式和高级功能，并包括许多底层实现。强烈推荐。响应式原理这里的React特指如何在前端通过状态的改变来更新视图。/*React*/letupdate;constonStateChange=_update=>{update=_update;}constsetState=newState=>{state=newState;update();}onStateChange(()=>{view=render(state);});setState({a:5});在React中，我们规定状态只能通过setState函数来改变，这样每次状态改变后都可以调用render来更新视图。Vue中的Vue可以直接通过改变state的值来改变视图，不需要调用setState函数。这是通过使用Object.defineProperty劫持对象的setter和getter来实现的。/*VuerealState是唯一真实的状态，原始状态是它的代理*/letrealState=Object.create(null);realState=Object.assign(realState,state);Object.keys(state).forEach(key=>{Object.defineProperty(state,key,{get(){returnrealState[key]},set(newValue){realState[key]=newValue;vm=render(realState);}});});先靠课堂上的一个题目，后面再讨论Vue中的实际应用。/*实现一个Dep类，包含两个方法depend()和notify()。另外实现一个函数autorun()，接受一个函数func，自动运行func。如果在func中调用了depend()方法，则该函数将被订阅，并调用notify()运行所有订阅的函数。*/letactiveUpdate;functionautorun(update){functionupdateWrapper(){//设置一个全局变量，这样可以在depend()中知道当前是否正在执行update函数。activeUpdate=updateWrapper;更新（）;活动更新=空；}updateWrapper();}window.Dep=classDep{constructor(){this.stacks=newSet();}depend(){if(activeUpdate){这个。stacks.add(activeUpdate);}}notify(){this.stacks.forEach(func=>func());}}观察发布者模式这一步我们想结合前面两步，我们希望实现一个函数observe，传入一个对象，劫持它的getters和setters。这样我们每次调用getter的时候都会收集它所有的依赖，然后在setter上调用notify来触发所有的依赖。functionobserve(state){Object.keys(state).forEach(key=>{letvalue=state[key];constdep=newDep();Object.defineProperty(state,key,{get(){dep.depend();返回值;},set(newValue){value=newValue;dep.notify();}});});}
