Vue2.x 與Vue3.x 雙向數據綁定區別

phpmatt 發布于2019-08-23 17:19 / 3475人閱讀

摘要：看過的源碼都知道，其雙向數據綁定原理是通過的，中的方法來實現數據劫持的，但是有一個弊端就是無法兼聽到數組內部的數據變化當然我們可以通過，來實現內部數據變化的檢測。相比有一定的性能問題。

看過Vue2.x的源碼都知道，其雙向數據綁定原理是通過es5的Object.defineProperty，中的set方法來實現數據劫持的，但是有一個弊端就是無法兼聽到數組內部的數據變化(當然我們可以通過arr = arr.concat([]))，來實現內部數據變化的檢測。相比Vue3有一定的性能問題。

Vue3.x是用ES6的語法 Proxy（Proxy 怎么用大家可自行百度，網上教程大把，我就不在這贅述了）對象來實現的，這個玩意兒也可以實現數據的劫持，相比Object.defineProperty的優勢是：可以檢測到數組內部數據的變化,如下圖：

![圖片上傳中...]

據說proxy要比Object.defineProperty的內存減半,vue3.x還沒正式發布，我也只是聽說，聽說哈，減不減半我不知道也不敢下結論。

你以為這就完了嗎？哈哈哈哈，你沒猜錯，IE系列都不兼容Proxy，哈哈哈哈哈。

But

社會是要向前進的，這點相信尤大大已經為我們考慮到了，肯定會有向下兼容的方案，那就是用原始的Object.defineProperty咯。

寫在最后：大家不管學什么框架，一定要嘗試去讀下別人的源碼，不要一上來就vue-cli 就咔咔咔開擼。如果每個前端都會vue-cli的話，那請問你的競爭力在哪？

最后希望我的分享能夠幫助到大家。

GPU云服務器云服務器雙向數據綁定 js雙向數據綁定 js雙向綁定數據 asp雙向數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104176.html

JS之對象(2)

摘要：前言一篇徹底搞懂對象從此不用擔心沒對象啦本文從對象定義方法對象屬性數據類型遍歷幾種方法對象拷貝和攔截對象屬性方法及代碼實現幾個方面由淺入深介紹對象對象的聲明方法字面量構造函數的作用創了一個新對象指向構造函數構造函數有返回會替換出來的對象如果 showImg(https://segmentfault.com/img/bVboXHr?w=550&h=392); 前言一篇徹底搞懂對象,從此...

CarterLi 2019-08-23 15:29 評論0 收藏0
Vue2.x 總結

摘要：結果對象語法。當然，使用并不是首選，只有在構建中大型單頁面應用時，考慮到全局的狀態管理，自然就會想到。頁面路由使用創建單頁面應用，就可以使用目前版本是，把組件映射到對應的路由，通過改變來渲染不同的頁面。 Vue2.x 總結 Vue 是一套用于構建用戶界面的漸進式框架也意味著，既可以把VUE作為該應用的一部分嵌入到一個現成的服務端應用，或者在前后端分離的應用中，利用Vue 的核心庫及其...

banana_pi 2019-08-26 11:32 評論0 收藏0
前方來報，八月最新資訊--關于vue2&3的最佳文章推薦

摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 評論0 收藏0
個人分享--web前端學習資源分享

摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...

sherlock221 2019-08-20 18:59 評論0 收藏0