首页 > 其他分享 >vue2 原理之 如何做到数据可以被监听?

vue2 原理之 如何做到数据可以被监听?

时间:2023-03-31 11:12:59浏览次数:53  
标签:obj Observer keys value walk vue2 做到 监听

<!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>
</head>
<body>
  <h2>vue如何让每个月属性都可被观测</h2>
  
  <script type="module">
    import { Observer } from './observer.js'
    let obj = new Observer(
      {
        name:'小明',
        age:18
      }
    )
    console.log(obj.value.name)
    obj.value.age = 25

  </script>
</body>
</html>

 

 

export class Observer{
  constructor(value){
    this.value = value
    if(Array.isArray(value)){
      //  数组重写。。
    }else{
      this.walk(value)
    }
  }

  walk(obj){
    const keys = Object.keys(obj)
    for(let i= 0;i<keys.length;i++){
      defineReactive(obj,keys[i])
    }
  }
}

//循环 让对象每个属性可观测
function defineReactive(obj,key,val){
  if(arguments.length ===2){
      val = obj[key]
  }
  if( typeof val === 'object'){
      //递归
  }
  Object.defineProperty(obj,key,{
    enumerable:true, //可枚举
    configurable:true,//可改变
    get: function(){
      console.log("取之",val)
      return val
    },
    set: function(b){
      console.log(b,"改之")
      val = b
    }
  })

}

 

标签:obj,Observer,keys,value,walk,vue2,做到,监听
From: https://www.cnblogs.com/zhuangdd/p/17275655.html

相关文章

  • 直播回顾 | 点击率提升400%,Ta是怎么做到的?
    Discovery第18期直播已于3月30日圆满结束,本期直播邀请天眼查做客直播间,从天眼查与华为Push用户增长服务合作历程切入,聚焦用户增长,分享提升应用活跃度和渠道ROI的经验与见解。一起来回顾本期精彩内容吧!【精彩对话】Q1:天眼查为什么选择华为Push用户增长服务实现拉新、促活和转......
  • Surge for Mac配置本地代理监听端口
    1setting-general  2advancedproxyservicesettings  3这里修改代理监听的端口  4不同的网站和不同的app都代理的话,需要根据监听协议修改跟surge的监听协议和端口一致,就可以通过代理来访问了,比如chrome的代理插件switchyOmega ......
  • android 监听SDCard安装和卸载的代…
    //监听类privatefinalBroadcastReceiversdcardListener=newBroadcastReceiver(){@OverridepublicvoidonReceive(Contextcontext,Intentintent){Stringaction=intent.getAction();Log.d("TAG","sdcar......
  • element+vue2的查询form表单封装成组件复用
    <template><el-form:inline="true"style="display:flex;flex-direction:row;flex-wrap:wrap;flex:1;"class="formClass"label-width="90px......
  • nginx 监听IPV6地址
    #usernobody;error_logstderrnotice;worker_processesauto;worker_rlimit_nofile130048;#worker进程的最大打开文件数限制worker_shutdown_timeout10s;......
  • Vue2使用setup、ref、reactive等Vue3的组合式api
    有些同学想在当前项目中体验Vue3组合式api,setup、ref、reactive等,而且一步就可以升级到Vue3,但是vue确实2.x版本,不改变当前版本怎么办呢?vue2.7.0开始自带composition-api可......
  • DOM之方法 事件监听 addEventListener
    ?就是HTML标签受到鼠标点击后、经过后、点击输入文字后等操作之后能触发函数功能的操作use语法:DOM对象.addEventListener('事件类型',function(){})三步:DOM对象......
  • 第五篇 html5 - 新特性【 网络监听接口 + 全屏接口 】
    html5新增网络监听接口1、online2、offlineonline网络联通的时候触发这个事件window.addEventListener("online",function(){ console.log("连接上网络了!"......
  • vue2实现路由懒加载
    以下内容仅供学习使用安装@babel/plugin-syntax-dynamic-import插件。1.1使用npm安装:npminstall--save-dev@babel/plugin-syntax-dynamic-import1.2使用yarn安装......
  • vue2+element-ui+springboot+mybatis-plus获取当前账户进行修改密码详细教程
    以下内容仅供学习使用新建一个dto类,用于专门修改当前账户的使用importlombok.Data;@DatapublicclassUserPasswordDTO{privateStringusername;priva......