• Vue核心 MVVM模型 数据代理


    Vue核心 MVVM模型 数据代理

    MVVM 模型

    img

    MVVM模型

    • M:模型 Model,data中的数据

    • V:视图 View,模板代码

    • VM:视图模型 ViewModel,Vue实例 vm

    观察发现

    • data中所有的属性,最后都出现在了vm身上
    • vm身上所有的属性 及Vue原型身上所有的属性,在 Vue模板中都可以直接使用
    • model数据改变->通过vm(data binding)修改view。view页面改变 ->通过vm(Dom Listeners)改变(mode)
    <!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>mvvm</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
      
        <div id="root">
            <h2>名称:{{ name }}</h2>
            <h2>战队:{{ rank }}</h2>
            <h2>测试:{{ $options }}</h2>
        </div>
    
        <script>
            Vue.config.productionTip = false
            new Vue({
                el: '#root',
                data: { 
                    name: 'uzi',
                    rank: 'RNG'
                }
            })
        </script>
    </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    img

    Vue 中的数据代理

    Object.defineproperty方法

    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属性,且值是', value)
        number = value
      }
    
    })
    // console.log(Object.keys(person))
    console.log(person)
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)

    let obj = { x: 100 }
    let obj2 = { y: 200 }
    
    Object.defineProperty(obj2, 'x', {
     get() {
       return obj.x
     },
     set(value) {
       obj.x = value
     }
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 1 Vue中的数据代理通过vm对象来代理data对象中属性的操作(读/写)

    • 2 Vue中数据代理的好处:更加方便的操作data中的数据

    • 3 基本原理

    a. 通过object.defineProperty()把data对象中所有属性添加到vm上

    b. 为每一个添加到vm上的属性,都指定一个 getter,setter

    c. 在getter,setter内部去操作(读/写)data中对应的属

    img

    Vuedata中的数据拷贝了一份到_data属性中,又将_data里面的属性提到Vue实例中(如name),通过defineProperty实现数据代理,这样通过geter/setter操作 name,进而操作_data中的 name。而_data又对data进行数据劫持,实现响应式

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vue中的数据代理</title>
        <!-- 引入Vue -->
        <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">
          Vue.config.productionTip = false
    
          const vm = new Vue({
            el: '#root',
            data: {
              name: '电子科技大学',
              address: '杭州'
            }
          })
        </script>
    
      </body>
    </html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

  • 相关阅读:
    如何模拟自然界生态系统中的食物链
    Vuex:辅助函数:mapState,mapMutations,mapActions,mapGetters
    LDO investigation
    Feign服务调用
    LM224ADT运算放大器芯片中文资料规格书产品文档PDF数据手册引脚图参数价格
    射频模块无线收发RF63U芯片应用数据传输和基建网络
    typeScript中的 “ // @ts-ignore “ 注释的作用
    SpringBoot Starter缘起
    C语言基础知识入门
    GitLab (v16.x) 简述及安装部署
  • 原文地址:https://blog.csdn.net/agonie201218/article/details/125531713