• 售前

  • 售后

热门帖子
入门百科

Vue 数据响应式相干总结

[复制链接]
老橡树1 显示全部楼层 发表于 2021-10-25 19:42:11 |阅读模式 打印 上一主题 下一主题
在说数据响应式之前,我们要办理一个很紧张的问题,那就是Vue到底对data做了什么?先从getter和setter提及,我们用谁人他们来对虚拟的属性举行读写。
getter和setter


有如下代码
  1. let obj0 = {
  2. 姓: "高",
  3. 名: "圆圆",
  4. age: 18
  5. };
  6. // 需求一,得到姓名
  7. let obj1 = {
  8. 姓: "高",
  9. 名: "圆圆",
  10. 姓名() {
  11.   return this.姓 + this.名;
  12. },
  13. age: 18
  14. };
  15. console.log("需求一:" + obj1.姓名());//高圆圆
复制代码
此时我们log出来的效果是高圆圆,这个大家都能看懂,但是姓名后面的括号能删掉吗?不能,因为它是函数,那么我们怎么去掉括号呢?下面就有我们的需求二
  1. // 需求二,姓名不要括号也能得出值
  2. let obj2 = {
  3. 姓: "高",
  4. 名: "圆圆",
  5. get 姓名() {
  6.   return this.姓 + this.名;
  7. },
  8. age: 18
  9. };
  10. console.log("需求二:" + obj2.姓名);//高圆圆
复制代码
此时我们使用getter ,不加括号也能得出值。那么我们要怎么改变这个名字呢?
  1. // 需求三:姓名可以被写
  2. let obj3 = {
  3. 姓: "高",
  4. 名: "圆圆",
  5. get 姓名() {
  6.   return this.姓 + this.名;
  7. },
  8. set 姓名(xxx){
  9.   this.姓 = xxx[0]
  10.   this.名 = xxx.slice(1)
  11. },
  12. age: 18
  13. };
  14. obj3.姓名 = '高媛媛'
  15. console.log(`需求三:姓 ${obj3.姓},名 ${obj3.名}`)//高媛媛
复制代码
有get就有set,setter就是如许用的。我们用 属性值 = xxx 触发 set 函数,姓名就可以被写啦。但是我们在需求三中打出
  1. console.log(obj3)
复制代码
会得到如下图所示:

如图为什么会显示
  1. 姓名:(...)
复制代码
呢? 这实在是一个get set,欣赏器在显示这个姓名的时间就打印出
  1. 姓名:(...)
复制代码
,这分析我们可以在需求三中对姓名举行读和写,但是并不存在一个叫做姓名的属性,而是有get和set来模拟对姓名举行的操纵。
Object.defineProperty


在如上例子中,我们在定义对象的时间就直接使用get和set,但是假如对象已经被声明完了,那我们怎么继续加上get呢?我们就要用到
  1. Object.defineProperty
复制代码
,还是需求三,我们加入如下代码就可以在定义完之后再加get和set了:
  1. var _xxx = 0
  2. Object.defineProperty(obj3,'xxx',{
  3. get(){
  4.   return _xxx
  5. },
  6. set(value){
  7.   _xxx= value
  8. }
  9. })
复制代码
接下来我们就可以办理一开始的问题了:Vue到底对data做了什么?我们举几个例子看看:
  1. let data0 = {
  2. n: 0
  3. }
复制代码
先声明一个data0,需求一:用
  1. Object.defineProperty
复制代码
定义 n:
  1. let data1 = {}
  2. Object.defineProperty(data1, 'n', {
  3. value: 0
  4. })
  5. console.log(`需求一:${data1.n}`)//需求一:0
复制代码
需求二:n 不能小于 0:
  1. let data2 = {}
  2. data2._n = 0 // _n 用来偷偷存储 n 的值,默认为0
  3. Object.defineProperty(data2, 'n', {
  4. get(){
  5.   return this._n
  6. },
  7. set(value){
  8.   if(value < 0) return
  9.   this._n = value
  10. }
  11. })
  12. console.log(`需求二:${data2.n}`)//0
  13. data2.n = -1
  14. console.log(`需求二:${data2.n} 设置为 -1 失败`)//0设置为 -1 失败
  15. data2.n = 1
  16. console.log(`需求二:${data2.n} 设置为 1 成功`)//0设置为 1 成功
复制代码
但是假如对方直接使用
  1. data2._n
复制代码
呢?我们能不能做到不在对象上袒露任何可以或许被访问的东西呢?这时间我们就要使用署理:
  1. let data3 = proxy({ data:{n:0} }) // 括号里是匿名对象,无法访问
  2. function proxy({data}){
  3. const obj = {}
  4. // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
  5. // 因为我怕你们看不懂
  6. Object.defineProperty(obj, 'n', {
  7.   get(){
  8.    return data.n
  9.   },
  10.   set(value){
  11.    if(value<0)return
  12.    data.n = value
  13.   }
  14. })
  15. return obj // obj 就是代理
  16. }
  17. // data3 就是 obj
  18. console.log(`需求三:${data3.n}`)
  19. data3.n = -1
  20. console.log(`需求三:${data3.n},设置为 -1 失败`)
  21. data3.n = 1
  22. console.log(`需求三:${data3.n},设置为 1 成功`)
复制代码
但是假如不想用署理,要怎么做呢?
  1. let myData = {n:0}
  2. let data4 = proxy({ data:myData }) // 括号里是匿名对象,无法访问
  3. // data3 就是 obj
  4. console.log(`杠精:${data4.n}`)//0
  5. myData.n = -1
  6. console.log(`杠精:${data4.n},设置为 -1 失败了吗!?`)
复制代码
如今如许还是能更改myData,所以我们又有一个需求:就算是用户擅自修改myData,也要拦截:
  1. let myData5 = {n:0}
  2. let data5 = proxy2({ data:myData5 }) // 括号里是匿名对象,无法访问
  3. function proxy2({data}){
  4. // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
  5. let value = data.n//保存开始的n
  6. Object.defineProperty(data, 'n', {//声明一个新的n
  7.   get(){
  8.    return value
  9.   },
  10.   set(newValue){
  11.    if(newValue<0)return
  12.    value = newValue
  13.   }
  14. })
复制代码
就加了上面几句,这几句话会监听 data
  1. const obj = {}
  2. Object.defineProperty(obj, 'n', {
  3.   get(){
  4.    return data.n
  5.   },
  6.   set(value){
  7.    if(value<0)return//这句话多余了
  8.    data.n = value
  9.   }
  10. })
  11. return obj // obj 就是代理
  12. }
  13. // data3 就是 obj
  14. console.log(`需求五:${data5.n}`)//0
  15. myData5.n = -1
  16. console.log(`需求五:${data5.n},设置为 -1 失败了`)//0
  17. myData5.n = 1
  18. console.log(`需求五:${data5.n},设置为 1 成功了`)//1
复制代码
当我们写
  1. vm = new Vue({data:myData})
复制代码
时,Vue做了两件事情:
      
  • 让vm成为myData的署理(proxy),可以通过this访问vm  
  • 会对myData全部的属性举行监控,为了防止myData的属性变了,vm却不知道,知道了属性变革之后就可以调用render(data),UI就可以自动革新
那么我们就可以回到标题了,什么是数据响应式呢?假如一个物体可以或许对外界的刺激做出反应,那么它就是响应式的。Vue的data是响应式的,
  1. const vm = new Vue({data:{n:0}})
复制代码
在这个代码中假如修改vm.n那么UI中的n就会做出相应的更新,Vue通过
  1. Object.defineProperty
复制代码
来实现数据响应式。
响应式网页又是什么呢?即假如改变窗口的巨细,网页内容会做出相应的改变,那么这个网页就叫响应式网页。
以上就是Vue 数据响应式干系总结的详细内容,更多关于Vue 数据响应式的资料请关注草根技术分享别的干系文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作