鏈枃浠嬬粛鐐硅禐+鍏虫敞+涔︾=瀛︿範浜嗗厛鏉ュ洖绛旀爣棰橈細Object.definePropertycannotmonitorchangeinnativearrays銆傚鏋滈渶瑕佺洃鎺т竴涓暟缁勶紝闇€瑕佸皢鏁扮粍杞负瀵硅薄銆傚湪Vue2涓紝Object.defineProperty鏄敤鏉ョ洃鍚暟鎹彉鍖栫殑锛屼絾鏄煡浜嗘枃妗ｅ彂鐜癘bject.defineProperty鏄敤鏉ョ洃鍚璞℃寚瀹氬睘鎬х殑鍙樺寲鐨勩€傛垜杩樻病鏈夌湅鍒颁换浣曞彲浠ョ洃瑙嗘暟缁勫彉鍖栫殑涓滆タ銆備絾鏄疺ue2纭疄鍙互鐩戝惉鍒版暟缁勭殑鏌愪簺鏂规硶鏀瑰彉浜嗘暟缁勭殑鍊笺€傛湰鏂囩殑鐩爣鏄В寮€杩欎釜缁撱€侭asicUsageObject.defineProperty()Documentation鍏充簬Object.defineProperty()鐨勭敤娉曪紝鍙互鐪嬪畼鏂规枃妗ｃ€傛湰鏂囩殑鍩虹閮ㄥ垎鍙槸绠€鍗曠殑璇存槑銆傝娉昈bject.defineProperty(obj,prop,descriptor)鍙傛暟obj瑕佸畾涔夊叾灞炴€х殑瀵硅薄銆俻rop瑕佸畾涔夋垨淇敼鐨勫睘鎬х殑鍚嶇О鎴栫鍙枫€俤escriptor瑕佸畾涔夋垨淇敼鐨勫睘鎬ф弿杩扮銆俢onstdata={}letname='ThunderMonkey'Object.defineProperty(data,'name',{get(){console.log('get')杩斿洖鍚嶇О},set(newVal){console.log('set')name=newVal}})console.log(data.name)data.name='SharkPepper'console.log(data.name)console.log(name)浠ヤ笂浠ｇ爜浼氳緭鍑篻etThunderMonkeysetSharkPepperSharkpepper涓婇潰璇寸殑鏄紝濡傛灉闇€瑕佽闂甦ata.name锛岄偅涔堝氨杩斿洖name鐨勫€笺€傚鏋滀綘鎯宠缃甦ata.name锛屽畠浼氬皢浣犱紶鍏ョ殑鍊兼斁鍏ュ彉閲忓悕涓€傛鏃惰闂甦ata.name鎴杗ame灏嗚繑鍥炴柊鍒嗛厤鐨勫€笺€傝繕鏈変竴涓熀鏈敤娉曪細鈥渇reeze鈥漵pecifypropertyconstdata={}Object.defineProperty(data,'name',{value:'ThunderMonkey',writable:false})data.name='SharkChili'鍒犻櫎鏁版嵁.nameconsole.log(data.name)绀轰緥鍐荤粨data.name锛屾棤璁轰綘鎯充慨鏀硅繕鏄垹闄ゅ畠閮戒笉浼氱敓鏁堛€傝闂甦ata.name鍚庯紝瀹冨皢杩斿洖鍒癟hunderMonkey銆備互涓婂氨鏄疧bject.defineProperty鐨勫熀鏈敤娉曘€備笂闈㈡繁搴︾洃鍚殑渚嬪瓙灏辨槸鐩戝惉搴曞眰瀵硅薄銆備絾鏄鏋滃璞′腑杩樺寘鍚璞★紝杩欑鎯呭喌涓嬶紝鍙互浣跨敤閫掑綊鐨勬柟娉曘€傞€掑綊闇€瑕佸垱寤轰竴涓柟娉曪紝鐒跺悗鍒ゆ柇鏄惁闇€瑕侀噸澶嶈皟鈥嬧€嬬敤鑷繁銆?/瑙﹀彂鏇存柊瑙嗗浘functionupdateView(){console.log('viewupdate')}//閲嶆柊瀹氫箟灞炴€у苟鐩戝惉瀹冧滑锛堟牳蹇冿級functiondefineReactive(target,key,value){//娣卞害鐩戞帶瑙傚療鑰?value)//CoreAPIObject.defineProperty(target,key,{get(){returnvalue},set(newValue){if(newValue!=value){//娣卞害鐩戞帶observer(newValue)//璁剧疆鏂板€?/娉ㄦ剰锛寁alue涓€鐩村湪闂寘涓紝杩欓噷璁剧疆鍚庯紝鍐嶆鑾峰彇鏃惰幏鍙栨渶鏂扮殑鍊紇alue=newValue//瑙﹀彂瑙嗗浘鏇存柊updateView()}}})}//娣卞害鐩戞帶鍑芥暟observer(target){if(typeoftarget!=='object'||target===null){//涓嶆槸瀵硅薄涔熶笉鏄暟缁剅eturntarget}//閲嶆柊瀹氫箟姣忎釜灞炴€э紙forin涔熷彲浠ラ亶鍘嗘暟缁勶級for(letkeyintarget){defineReactive(target,key,target[key])}}//鍑嗗鏁版嵁constdata={name:'ThunderMonkey'}//寮€濮嬬洃鍚琽bserver(data)//娴嬭瘯1data.name={lastName:'SharkPepper'}//test2data.name.lastName='cockroachbully'涓婇潰鐨勪緥瀛愪細杈撳嚭2涓€渧iewupdates鈥濄€傛垜鍒涘缓浜嗕竴涓猽pdateView鏂规硶鏉ユā鎷熸洿鏂癉OM锛堢被浼间簬Vue鎵€鍋氱殑锛夛紝浣嗘垜鍦ㄨ繖閲屽皢鍏剁畝鍖栦负浠呰緭鍑衡€渧iewupdated鈥濄€傚洜涓鸿繖涓嶆槸鏈枃鐨勯噸鐐广€傛祴璇?瑙﹀彂鈥滆鍥炬洿鏂扳€濓紱娴嬭瘯2涔熸槸濡傛銆傚洜涓烘垜鍦∣bject.defineProperty鐨勯泦鍚堜腑璋冪敤浜嗕竴娆bserver(newValue)锛宱bserver浼氬垽鏂紶鍏ョ殑鍊兼槸鍚︽槸瀵硅薄锛屽鏋滄槸瀵硅薄锛屽啀璋冪敤涓€娆efineReactive鏂规硶銆傝繖妯℃嫙浜嗛€掑綊鐘舵€併€備互涓婂氨鏄繁搴︾洃鎺х殑鍘熺悊锛屽叾瀹炲氨鏄€掑綊銆備絾鏄€掑綊鏈変竴涓己鐐癸紝灏辨槸濡傛灉瀵硅薄灞傜骇寰堟繁锛岄渶瑕佺殑璁＄畻閲忓氨闈炲父澶э紝鍥犱负闇€瑕佽绠椾竴娆″埌鏈€鍚庛€俶onitor鏁扮粍array娌℃湁key锛屽彧鏈変笅鏍囥€傛墍浠ュ鏋滈渶瑕佺洃鍚暟缁勭殑鍐呭鍙樺寲锛屽氨闇€瑕佹妸鏁扮粍杞垚瀵硅薄锛岃繕瑕佹ā鎷熸暟缁勭殑鏂规硶銆傜紪鐮佽繃绋嬬殑澶ц嚧鎬濊矾鍜岄『搴忓涓嬶細鍒ゆ柇瑕佺洃鎺х殑鏁版嵁鏄惁涓烘暟缁勶紝灏嗘暟缁勬ā鎷熸垚涓€涓璞★紝灏嗘暟缁勭殑鏂规硶鍚嶇粦瀹氬埌鏂板缓鐨勫璞′笂锛屽苟璧嬪€兼暟缁勫師鍨嬪搴旂殑鏂规硶鑷畾涔夋柟娉曚唬鐮佸涓?/瑙﹀彂鏇存柊瑙嗗浘鍑芥暟updateView(){console.log('viewupdate')}//閲嶆柊瀹氫箟鏁扮粍鍘熷瀷constoldArrayProperty=Array.prototype//鍒涘缓涓€涓柊瀵硅薄锛屽師鍨嬫寚鍚憃ldArrayProperty锛岀劧鍚庢墿灞昻ew鏂规硶涓嶅奖鍝嶅師鍨媍onstarrProto=Object.create(oldArrayProperty);['push','pop','shift','unshift','splice'].forEach(methodName=>{arrProto[methodName]=function(){updateView()//瑙﹀彂瑙嗗浘鏇存柊oldArrayProperty[methodName].call(this,...arguments)}})//閲嶆柊瀹氫箟灞炴€у拰鐩戝惉锛堟牳蹇冿級鍑芥暟defineReactive(target,key,value){//娣卞害鐩戞帶observer(value)//鏍稿績APIObject.defineProperty(target,key,{get(){returnvalue},set(newValue){if(newValue!=value){//娣卞害鐩戞帶瑙傚療鑰?newValue)//璁剧疆涓€涓柊鍊?/娉ㄦ剰鍊兼€绘槸鍦ㄩ棴鍖呬腑銆傝繖閲岃缃悗锛屽啀娆¤幏鍙栨椂鑾峰彇鏈€鏂板€紇alue=newValue//瑙﹀彂瑙嗗浘鏇存柊updateView()}}})}//鐩戝惉瀵硅薄灞炴€?entry)functionobserver(target){if(typeoftarget!=='瀵硅薄'||target===null){//涓嶆槸瀵硅薄鎴栨暟缁剅eturntarget}//鏁扮粍鐨勬儏鍐礽f(Array.isArray(target)){target.__proto__=arrProto}//閲嶆柊瀹氫箟姣忎釜灞炴€э紙forincan鍚屾牱閬嶅巻鏁扮粍锛塮or(letkeyintarget){defineReactive(target,key,target[key])}}//鍑嗗鏁版嵁constdata={nums:[10,20,30]}//鐩戞帶鏁版嵁observer(data)data.nums.push(4)//涓婇潰浠ｇ爜涔嬫墍浠ョ洃鍚暟缁勬病鏈夌洿鎺ヤ慨鏀规暟缁勭殑鏂规硶锛屾瘮濡侫rray.prototype.push=function(){updateView()...}锛屽洜涓鸿繖鏍蜂細姹℃煋鍘烝rray鐨勫師鍨嬫柟娉曪紝杩欐牱鍋氬緱涓嶅伩澶变笂闈㈡槸Object.defineProperty鐨勪娇鐢ㄦ柟寮忥紝濡傛灉闇€瑕佺洃鍚洿澶氱殑鏂规硶锛屽彲浠ュ湪鏁扮粍涓坊鍔燵'push','pop','shift','unshift','splice']銆傜患鍚堜唬鐮?/娣卞害鐩戞帶鍑芥暟updateView(){console.log('viewupdate')}//閲嶆柊瀹氫箟鏁扮粍鍘熷瀷constoldArrayProperty=Array.prototype//鏂板缓涓€涓璞★紝鍘熷瀷鎸囧悜oldArrayProperty锛岀劧鍚庢墿灞曟柊鏂规硶涓嶄細褰卞搷鍘熷瀷constarrProto=Object.create(oldArrayProperty);//arrProto.push=function(){}//arrProto.pop=function(){}['push','pop','shift','unshift','splice'].forEach(methodName=>{arrProto[methodName]=function(){updateView()//瑙﹀彂瑙嗗浘鏇存柊oldArrayProperty[methodName].call(this,...arguments)}})//閲嶅畾涔塒roperty,listen(core)functiondefineReactive(target,key,value){//娣卞害鐩戞帶observer(value)//鏍稿績API//Object.defineProperty娌℃湁鐩戝惉鏁扮粍鐨勮兘鍔汷bject.defineProperty(target,key,{get(){returnvalue},set(newValue){if(newValue!=value){//娣卞害鐩戞帶observer(newValue)//璁剧疆涓€涓柊鍊?/娉ㄦ剰value鎬绘槸鍦ㄩ棴鍖呬腑锛屼箣鍚庤繖閲岃缃紝鍐嶆鑾峰彇鏃朵篃浼氳幏鍙栨渶鏂扮殑鍊紇alue=newValue//瑙﹀彂瑙嗗浘鏇存柊updateView()}}})}//鐩戞帶瀵硅薄灞炴€?entry)functionobserver(target){if(typeoftarget!=='瀵硅薄'||target===null){//涓嶆槸瀵硅薄涔熶笉鏄暟缁剅eturntarget}if(Array.isArray(target)){target.__proto__=arrProto}//閲嶆柊瀹氫箟姣忎釜灞炴€э紙forin鏁扮粍涔熷彲浠ラ亶鍘嗭級for(letkeyintarget){defineReactive(target,key,target[key])}}鎬荤粨浠ヤ笂浠ｇ爜涓昏鏄ā鎷烿ue2鐩戝惉鏁版嵁鍙樺寲銆傝櫧鐒跺畠鏄撲簬浣跨敤锛屼絾涔熸湁缂虹偣銆傛繁搴︾洃鎺э紝闇€瑕侀€掑綊鍒版渶鍚庯紝澶ч噺鐨勮绠楁棤娉曠洃鎺ф柊澧炲睘鎬?鍒犻櫎灞炴€э紙鎵€浠ラ渶瑕佷娇鐢╒ue.set鍜孷ue.delete锛夋棤娉曞師鐢熺洃鎺ф暟缁勶紝闇€瑕佺壒娈婂鐞嗘墍浠ュ湪Vue涓?銆佸皢Object.defineProperty鏀逛负Proxy銆備絾鏄疨roxy鐨勭己鐐逛篃寰堟槑鏄撅紝灏辨槸鍏煎鎬ч棶棰樸€傛墍浠ヤ綘闇€瑕佹牴鎹綘鐨勯」鐩€夋嫨Vue2鎴栬€匳ue3銆傛帹鑽愰槄璇火煈嶃€娿€嶵hree.js銆忚捣椋烇紒銆嬸煈嶃€奦ue3 杩?0绉嶇粍浠堕€氳鏂瑰紡銆嬸煈嶃€奆abric.js 浠庡叆闂ㄥ埌鐩腑鏃犱汉銆嬸煈嶃€奦ite 鎼缓 Vue2 椤圭洰锛圴ue2 + vue-router + vuex锛夈€嬸煈嶃€奵onsole.log涔熻兘鎻掑浘锛併€嬬偣璧?鍏虫敞+鏀惰棌=瀛︿範浜?/p>
