目錄
前言
安裝Vue3項目
安裝
Proxy
語法格式
前言
從本文開始進入vue3的學習。本文介紹vue3中的響應式原理，相較于vue2中通過object.defineProperty（vue2中的響應式）來實現(xiàn)響應式，vue3中換成了Proxy來進行實現(xiàn)。
安裝Vue3項目
相較于vue2通過vue-cli腳手架來創(chuàng)建項目，這里更推薦使用create-vue來創(chuàng)建vue3的項目。vue-cli是基于webpack來實現(xiàn)的，而create-vue是基于vite來實現(xiàn)的，相比之下，vite速度更快，體驗感更好。
安裝
npm init vue@latest
輸入以上命令就會安裝create-vue腳手架，同時會創(chuàng)建vue3工程
如果已經安裝了create-vue腳手架，就會直接創(chuàng)建vue3工程
輸入完成之后，創(chuàng)建Vue3工程名字
由于這里是初學，所以都選的是否，看各自需求
創(chuàng)建好vue3工程后輸入以下命令
cd 剛才創(chuàng)建的vue3工程名字
npm install
npm run dev
注意：這里運行項目程序的命令是
npm run dev
使用vue-cli腳手架創(chuàng)建的項目是
npm run serve
Proxy
vue3中是使用Proxy代理來進行響應式處理的。vue2中是使用object.defineProperty進行的響應式處理。使用object.defineProperty進行響應式會產生一些問題，例如，當我們直接修改目標對象身上的屬性時，是不會觸發(fā)set數(shù)據(jù)劫持的，以及當我們刪除某些屬性時，也不會觸發(fā)響應式。使用Proxy就可以解決這些問題。
語法格式
let userProxy = new Proxy(目標對象，{
? ? ? ? get(target,propertyName){
? ? ? ? ? ? ? ? return target[ propertyName ]
????????},
? ? ? ? set(target,propertyName,value){
? ? ? ? ? ? ? ? target[ propertyName]=value
????????},
? ? ? ? deleteProperty(target,propertyName){
? ? ? ? ? ? ? ? return delete target[ propertyName]
????????}
})
其中，
target為目標對象
propertyName為目標對象身上的屬性名，是一個字符串
當讀取屬性時觸發(fā)get
當修改屬性時或者增加屬性時觸發(fā)set
當刪除屬性時，觸發(fā)deleteProperty
讀取屬性時，get觸發(fā)
修改屬性時，set觸發(fā)
添加屬性，觸發(fā)set
刪除屬性，觸發(fā)deleteProperty文章來源：http://www.zghlxwxcb.cn/news/detail-794336.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-794336.html
到了這里，關于Web前端 ---- 【Vue3】Proxy響應式原理的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
