Vue：（四）数据代理

定义：通过一个对象代理另一个对象的属性的操作（读/写）

Object.defineProperty数据代理


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数据代理title>
    
  head>
  <body>
    <script type="text/javascript">
      let number = 18
      let person = {
        name: '张三',
        sex: '男',
      }
 
      Object.defineProperty(person, 'age', {
        // value: 18,
        // enumerable: true, // 控制属性是否可以被枚举，默认是false
        // writable: true, // 控制属性是否可以被修改，默认是false
        // configurable: true, // 控制属性是否可以被删除，默认是false
 
        // 当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
        get() {
          console.log('有人读取age属性了')
          return number
        },
 
        // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
        set(value) {
          console.log('有人修改age属性了')
          number = value
        },
      })
      console.log(person)
    script>
  body>
html>

Vue 中的数据代理

Vue 中的数据代理：
1. 通过vm对象来代理data对象中属性的操作（读写）
Vue 中数据代理的好处：
1. 更加方便的操作data 中的数据
基本原理：
1. 通过Object.defineProperty()把data 对象中所有属性添加到vm 上
2. 为每一个添加到vm 上的属性，都指定一个getter/setter 方法
3. 在gettet/setter内部去操作（读写）data中对应的属性


html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue中的数据代理title>
    <script type="text/javascript" src="../js/vue.js">script>
  head>
  <body>
    <div id="root">
      <h2>学校名称:{{name}}h2>
      <h2>学校地址:{{address}}h2>
    div>
    <script type="text/javascript">
      const vm = new Vue({
        el: '#root',
        data: {
          name: '航空',
          address: '西安',
        },
      })
    script>
  body>
html>

我是空谷有来人，谢谢大家支持！

相关阅读:
哈希的应用——位图
flask 框架web开发视频笔记
【linux】初识进程
[附源码]Python计算机毕业设计SSM家政服务预约小程序（程序+LW)
VSCode相对问题
Scratch软件编程等级考试一级——20210626
猿创征文｜不会代码也能玩开发？基于华为云 IoT 快速实现 0 代码体验物联网设备上云
农业新闻查询易语言代码
软件测试面试屡战屡败？——我整理了一份超全面试题详解
最新版CleanMyMac X4.13.4中文版Mac清理软件

原文地址：https://blog.csdn.net/weixin_41377877/article/details/127891236