首页 > 编程语言 >Vue源码透析之数据响应

Vue源码透析之数据响应

时间:2022-09-20 15:57:41浏览次数:68  
标签:__ Vue val observe ob value 源码 key 透析

    function observe(value) {
        if (typeof value != 'object') {
            return
        }
        let ob;
        if (value.__ob__ !== undefined) {
            ob = value.__ob__;
        } else {
            ob = new Observer(value);
        }
        return ob;
    }
    function defineReactive(data, key, val) {
       if(!val){
        val = data[key];
       }
        Object.defineProperty(data, key, {
            get() {
                return val;
            },
            set(newVal) {
                console.log('修改了属性:' + key)
                val = newVal;
                observe(newVal);
            }
        })
        observe(val)
    }

    class Observer {
        constructor(val){
            Object.defineProperty(val, '__ob__', {
                value: this,
                enumerable: false
            });
            this.walk(val);
        }

        walk(value){
            for (let k in value) {
                defineReactive(value, k)
            }
        }
    }
  // 测试
    var obj = {
        a: 1,
        b: {
            c: 2
        }
    }
    observe(obj)

  

标签:__,Vue,val,observe,ob,value,源码,key,透析
From: https://www.cnblogs.com/shaoyunfeng93/p/16711297.html

相关文章

  • 直播平台搭建源码,通过 JS 读取本地图片并预览在页面中
    直播平台搭建源码,通过JS读取本地图片并预览在页面中 <!DOCTYPEhtml><html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><me......
  • Java线程Hotspot线程Linux线程源码穿透
    ​ 原理分析首先不妨先看一副图​编辑通常我们在Java开发中使用线程无非就是使用Thread类提供的一些API,比如newThread()、Thread.start()等等方法。那么对于Linux操......
  • js精度计算问题解决,Jsutil库源码
    为什么会存在浮点数计算精度丢失问题,这个原因不再过多赘述; JS中如何解决精度计算问题,大不部分人都知道升幂再降幂的解决方案; 但是如果直接升幂也会出现精度问题,且需......
  • vue分页点到第一页和最后一页时如何提示
    点击上一页的时候我们判断页码是否小于1,如果小于1了,就弹出提示,再给它加1,然后returnthis.queryParams.pageNum=this.queryParams.pageNum-1 if(this.queryParams.p......
  • 问题(Uncaught ReferenceError: vue is not defined)和解决方法
    问题(UncaughtReferenceError:vueisnotdefined)和解决方法这个是我的原始错误代码  运行到浏览器,就报错了,  第一种可能错误问题:找到的答案说的都是script......
  • vue 使用element-ui 需要配置的东西
    在vue中输入npmielement-ui-S进行安装  在这个文件中配置  就可以在vue中使用element-ui......
  • VUE3 动态添加路由
    在vue2中我们通常使用如下方式添加动态路由:router.addRoute(parentOrRoute,route)//添加单个router.addRoutes(routes)//添加多个在vue3......
  • Vue添加页面水印(自定义指令)
    Vue.directive('watermark',(el,binding)=>{lettext=binding.value.text;letfont=binding.value.font||"16pxMicrosoftJhengHei";lettextColor......
  • 前端-VUE实现第三方登录
    实现流程点击第三方登录按钮:执行window.open方法,打开一个第三方指定url出口,该地址会指向第三方登录url,并且由第三方提供一个对应的二维码弹出一个小窗口,展示对应二维码:......
  • Vue 系统组件 <Teleport> 简介rr
    <Teleport>传递组件@说明:将组件内的一部份模板传送到组件外层对象上,且不影响整个组件逻辑。 <Teleportto=""display=""></Teleport> 属性:to[必需String|H......