Vue核心 MVVM模型数据代理

MVVM模型M：模型 Model，data中的数据V：视图 View，模板代码VM：视图模型 ViewModel，Vue实例 vm观察发现方法数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）1 Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）2 Vue中数据代理的好处：更加方便的操作data中的数据3 基本原理a. 通过object.defineProperty(

Young丶

11227人浏览 · 2022-06-29 23:39:50

Young丶 · 2022-06-29 23:39:50 发布

Vue核心 MVVM模型数据代理

MVVM 模型

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>

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)

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

let obj = { x: 100 }
let obj2 = { y: 200 }

Object.defineProperty(obj2, 'x', {
 get() {
   return obj.x
 },
 set(value) {
   obj.x = value
 }
})

1 Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
2 Vue中数据代理的好处：更加方便的操作data中的数据
3 基本原理

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

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

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

Vue将data中的数据拷贝了一份到_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>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^