代码编织梦想

defineProperty函数复习

重要!!!!如果要修改age的值!!!!

    <script>
        let number=18
        let person={
        name:"zhangsan",
        sex:"nan",
    }

    Object.defineProperty(person,'age',{
        //value:18
        //enumerable:true,控制属性是否可以枚举,默认false
        //writable:true,控制属性是否可以修改,默认false
        //configurable:true,控制属性是否可以删除,默认false
         //当有人读取person的age属性时候,get函数(getter)就会被调用,且返回值就是age的值
        get:function(){
            return number
        },
        //当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
        set(value){
            console.log("有人修改age了,且值是",value)
            number=value
        }
    })
    console.log(person);



    </script>

何为数据代理?

通过一个对象对另一个对象中属性的操作,包括读和写

简单的数据代理例子:

    <script>
        //假设两个obj1,obj2,想通过obj2修改obj1
        obj1={x:1}
        obj2={y:2}

        Object.defineProperty(obj2,"x",{
            get(){
                return obj1.x
            },
            set(value){
                obj1.x=value
            }
        })
    </script>

vue中数据代理

在这里插入图片描述

这两条线就是数据代理!!!!

当我们修改name的时候实际上修改的是通过set修改_data,当我们访问name的时候实际上是通过get来访问_data.

数据代理的好处:数据代理可以更方便的操作data里面的数据


-data里面干什么

在这里插入图片描述

这个里面做的是数据劫持!!!实现一个响应式操作

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_52563729/article/details/129413501

Vue数据代理-爱代码爱编程

Vue数据代理实现原理 数据代理: 通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)vue 数据代理: 通过 vm 对象(即this)来代理 data 对象中所有属性的操作好处: 更方便的操作 data 中的数据基本实现流程 a. 通过 Object.defineProperty()给 vm 添加与 data 对象的属性对应的属性描

vue中的数据代理,何为数据代理?-爱代码爱编程

数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) <script type="text/javascript" > let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x',{ get(){ return obj.x

Vue--实现数据代理-爱代码爱编程

数据代理的含义 通过一个对象代理对另一个对象中的属性的操作(读/写) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>何为数据代理</title> </

同学刷抖音的间隙,我学会了Vue数据代理与数据劫持的原理-爱代码爱编程

学习Vue有一段时间了,有粉丝问我,Vue的数据代理与数据劫持到底是什么意思呢?这个过程到底发生了什么呢?今天我就来详细解释一下。 目录 一、基础知识 二、数据代理 1、含义 2、原理 3、好处 三、数据劫持 1. 定义 2.vue原理 一、基础知识 我们先看 Object.defineProperty()的用法: Objec

Vue数据代理-爱代码爱编程

1.什么是数据代理? 数据代理:通过一个对象代理对另一个对象中属性的操作 2.Vue数据代理 通过vm对象来代理配置对象data中所有属性的操作 3.为什么要用数据代理 更方便的读取和修改data中的属性 4.实现原理 a.配置对象data中的数据会被收集到vm._data中(通过Object.defineProperty),然后再通过Obje

【理解Vue数据代理】-爱代码爱编程

理解Vue数据代理 何为数据代理?Object.defineProperty()数据代理Vue中的数据代理总结 何为数据代理? 通过一个对象代理对另一个对象中的属性的操作(读/写),就是数据代理。 要搞懂Vue数据代理这个概念,那我们就要从Object.defineProperty()入手,Object.defineProperty()是V

前端之vue数据代理与劫持-爱代码爱编程

vue数据代理与劫持 Object.defineProperty()什么是数据代理Vue中的数据代理数据劫持 Object.defineProperty() Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。 Object.defineProperty(objec

vue中的数据代理-爱代码爱编程

数据代理是什么: 通过一个对象代理,对另一个对象中属性的操作 简单就是说:可以通过 对象b 对 对象a 中的属性进行操作 这里我学到的数据代理是用Object.defineProperty这个方法进行操作 let obj = {x:100}; let obj2 = {y:200}; Object.definePro

vue学习:vue中的数据代理_人海@的博客-爱代码爱编程

一、回顾Object.defineProperty Object.defineProperty方法可以用来增加和修改对象的属性,该方法有三个参数; 1、属性所在的对象; 2、属性的名字; 3、一个描述符对象; 描述符对象可以为数据属性,包括: 1、value:包含这个属性的属性值,默认值为default; 2、enumerable:控制属性是

vue数据代理、劫持、监视(实现响应式)_小白目的博客-爱代码爱编程

引言 都知道Vue可以通过 v-model  实现双向数据绑定、响应式跟更新;例如: 双向数据绑定: <input type="text" v-model:value="name"> 或者简写形式: <input type="text" v-model="name"> 原理        (1)MVVM模

vue中的数据代理_浮生 & 若梦的博客-爱代码爱编程

        首先,什么是数据代理?         我的理解就是通过一个对西昂代理另一个对象中的属性的操作。举个例子,对象obj1有一个属性X,我们通过另一个对象obj2去操作属性X,就是数据代理。         大致了解了数据代理,那vue中的数据代理又是什么呢?         Vue中的数据代理就是通过vm对象来代理data中的对象中属性

vue2中的数据代理和数据劫持_redghost117的博客-爱代码爱编程

vue2中的数据代理和数据劫持 学习vue2的时候在了解原理时,会遇到数据代理和数据劫持,搞明白来了这一点就可以知道为什么vue2中更改数据,页面可以跟着变 文章目录 vue2中的数据代理和数据劫持1. Object.DefineProperty实现数据代理(1) 介绍和应用场景(2) 使用方法(3) 用这个使属性和外部数据绑定(4) 这样就实

vue中的数据代理_爱学习小㿟的博客-爱代码爱编程

何为数据代理? 简单来说,数据代理就是通过一个对象代理对另一个对象中属性的操作(读/写) 为什么要数据代理? 为了更加方便的读取和修改_data中的数据,不进行数据代理就只能通过vm._data.msg访问数据 vue是如何实现数据代理的? 基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为

vue中的数据代理与数据劫持_小五ccc的博客-爱代码爱编程

数据代理 数据代理字面上是通过一个对象代理对另一个对象属性的操作在vue中的数据代理,实际上是通过vm上的属性代理对_data中属性的操作 数据劫持 数据劫持也可称作数据代理,字面上是劫持到某个属性的变化,去做其他的

【go】k8s 管理系统项目33[前端部分–登录和登出]-爱代码爱编程

K8s 管理系统项目[前端部分–登录和登出] 1. 登录登出流程 1.1 登录流程 登入流程总的分为5步: 账号密码验证token生成token验证验证成功进行跳转验证失败返回/login 1.2 登出流程

vue数据代理的原理_vue的代理请求的实现原理-爱代码爱编程

前言 Vue的数据代理的原理是十分重要的,它的学习对我们了解Vue的底层工作原理以及学习Vue具有举足轻重的作用,掌握了数据代理的原理,我们便可以由浅入深,再去学习Vue的响应式原理;因此本篇文章我将带领大家详细的了解Vu

react学习笔记-爱代码爱编程

react旧版本路由 旧版本的路由是按照组件的方式来写的 编写router/index.tsx文件 import App from "../App" import Home from "../views/Home" import About from "../views/About" import { BrowserRouter,Routes,Rou