动易网站模板,创建电子商务网站的7个步骤,ccie网络培训,wordpress 商家定位往期内容#xff1a;
《Vue零基础入门教程》合集#xff08;完结#xff09;
《Vue进阶教程》第一课#xff1a;什么是组合式API
《Vue进阶教程》第二课#xff1a;为什么提出组合式API
《Vue进阶教程》第三课#xff1a;Vue响应式原理
通过前面的学习, 我们了解到r… 往期内容
《Vue零基础入门教程》合集完结
《Vue进阶教程》第一课什么是组合式API
《Vue进阶教程》第二课为什么提出组合式API
《Vue进阶教程》第三课Vue响应式原理
通过前面的学习, 我们了解到reactive可以将一个普通对象转换成响应式对象.
那么, 接下来我们就详细研究一下这个函数.
研究函数主要从这样三个方面
输入, 也就是参数作用, 做了什么输出, 也就是返回值
参数: 只能是引用类型数据, 不能是值类型数据作用: 创建传入对象的深层代理, 并返回代理后的对象返回值: 一个Proxy代理对象
1) 深层代理
不管传入的对象存在多少层嵌套(对象套对象的情况), 每一层都具有响应性
示例
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodyscriptconst { 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)// 不管嵌套多少层, 都具有响应性pState.gf.city.name beijing}, 1000)/script/body
/html2) 重复代理
对同一个普通对象, 多次代理, 返回的结果唯一对代理后的对象再次代理, 返回的结果唯一
以上, 可以理解为单例模式, reactive创建的代理对象只会存在一个
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodyscriptconst { reactive, effect } Vueconst state { name: xiaoming }const p1 reactive(state)const p2 reactive(state)// 对同一个对象多次代理, 返回的结果唯一console.log(p1 p2) // trueconst p3 reactive(p1)// 对代理后的对象, 再次代理, 返回的结果唯一console.log(p3 p1) // true/script/body
/html3) 局限性
传入参数只能是对象解构或者赋值操作会丢失响应性
示例1
解构赋值后的变量没有响应性
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodydiv idapp/divscriptconst { reactive, effect } Vueconst pState reactive({ name: xiaoming })// 对代理对象进行解构let { name } pStateeffect(() {app.innerHTML pState.name})setTimeout(() {name xiaomeiconsole.log(对解构后的name操作, 不会触发响应式)}, 1000)/script/body
/html示例2
赋值操作丢失响应性
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript src../node_modules/vue/dist/vue.global.js/script/headbodydiv idapp/divscriptconst { reactive, effect } Vuelet todos reactive([])effect(() {app.innerHTML JSON.stringify(todos)})// 模拟向接口请求setTimeout(() {// 将接口返回的数据赋值给todos, 导致todos丢失了响应性todos [{ id: 1, content: todo-1 },{ id: 2, content: todo-2 },]}, 1000)/script/body
/html
