網(wǎng)站被k申訴電商還有發(fā)展前景嗎
??往期內(nèi)容：
《Vue零基礎(chǔ)入門教程》合集（完結(jié)）
《Vue進階教程》第一課：什么是組合式API
《Vue進階教程》第二課：為什么提出組合式API
《Vue進階教程》第三課：Vue響應(yīng)式原理
通過前面的學(xué)習(xí), 我們了解到reactive可以將一個普通對象轉(zhuǎn)換成響應(yīng)式對象.
那么, 接下來我們就詳細研究一下這個函數(shù).
研究函數(shù)主要從這樣三個方面
- 輸入, 也就是參數(shù)
- 作用, 做了什么
- 輸出, 也就是返回值
- 參數(shù): 只能是引用類型數(shù)據(jù), 不能是值類型數(shù)據(jù)
- 作用: 創(chuàng)建傳入對象的
深層代理, 并返回代理后的對象 - 返回值: 一個Proxy代理對象
1) 深層代理
不管傳入的對象存在多少層嵌套(對象套對象的情況), 每一層都具有響應(yīng)性
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive, effect } = Vueconst pState = reactive({name: 'xiaoming',age: 20,gf: {name: 'xiaomei',city: {name: 'wuhan',},},})effect(() => {console.log(`${pState.name}的女朋友叫${pState.gf.name}, 在${pState.gf.city.name}`)})setTimeout(() => {console.log('過了一段時間, 她去了beijing')// 不管嵌套多少層, 都具有響應(yīng)性pState.gf.city.name = 'beijing'}, 1000)</script></body>
</html>
2) 重復(fù)代理
- 對同一個普通對象, 多次代理, 返回的結(jié)果唯一
- 對代理后的對象再次代理, 返回的結(jié)果唯一
以上, 可以理解為單例模式, reactive創(chuàng)建的代理對象只會存在一個
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><script>const { reactive, effect } = Vueconst state = { name: 'xiaoming' }const p1 = reactive(state)const p2 = reactive(state)// 對同一個對象多次代理, 返回的結(jié)果唯一console.log(p1 === p2) // trueconst p3 = reactive(p1)// 對代理后的對象, 再次代理, 返回的結(jié)果唯一console.log(p3 === p1) // true</script></body>
</html>
3) 局限性
- 傳入?yún)?shù)只能是對象
- 解構(gòu)或者賦值操作會丟失響應(yīng)性
示例1
解構(gòu)賦值后的變量沒有響應(yīng)性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"></div><script>const { reactive, effect } = Vueconst pState = reactive({ name: 'xiaoming' })// 對代理對象進行解構(gòu)let { name } = pStateeffect(() => {app.innerHTML = pState.name})setTimeout(() => {name = 'xiaomei'console.log('對解構(gòu)后的name操作, 不會觸發(fā)響應(yīng)式')}, 1000)</script></body>
</html>
示例2
賦值操作丟失響應(yīng)性
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="../node_modules/vue/dist/vue.global.js"></script></head><body><div id="app"></div><script>const { reactive, effect } = Vuelet todos = reactive([])effect(() => {app.innerHTML = JSON.stringify(todos)})// 模擬向接口請求setTimeout(() => {// 將接口返回的數(shù)據(jù)賦值給todos, 導(dǎo)致todos丟失了響應(yīng)性todos = [{ id: 1, content: 'todo-1' },{ id: 2, content: 'todo-2' },]}, 1000)</script></body>
</html>