Vue学习计划--Vue2（二）Vue代理方式

Vue

data中的两种方式

对象式

data:{}

函数式

data(){return {}
}

示例：

<body><div id="app">{{ name }} {{ age}} {{$options}}<input type="text" v-model="value"></div><script>let vm = new Vue({el: '#app',// 对象式// data:{//   name: '小红',//   age: 16// }// 函数式data(){return {name: '小明',age: 55,value: '111'}}})</script></body>

el中的两种方式

new Vue时候配置 el 属性

const vm = new Vue({el: '#root'
})

先创建Vue实例，随后再通过 vm.$mount(‘#root’)指定el的值(这种方式更加灵活)

const vm = new Vue({})
vm.$mount('#root')

示例：

<body><div id="app">{{ name }}</div><script>//el的两种方式// let vm = new Vue({//   // el:'#app',//   data:{//     name: '小红'//   }// })let vm = new Vue({data:{name: '小红'}})// 这种方式更加灵活,比如加个定时器setTimeout(()=>{vm.$mount('#app')}, 3000)</script></body>

MVVM模型 vue受到mvvm模型的启发
1. M: 模型(Model): data的数据
2. V: 视图(View): 模板代码
3. VM: 视图模型(ViewModel): Vue实例对象(核心)
ViewModel 包含 DOM Listeners 和 Data Bindings。Data Bindings 用于将数据绑定到 View 上显示，DOM Listeners 用于监听操作。
- 从 Model 到 View 的映射，也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间。
- 从 View 到 Model 的事件监听，也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变。
```
    <p>{{ name }}</p> // 改变data中的数据，页面随之变化<input type="text" v-model="name"> //改变input的value值，data中的值也变化
```
在Vue中的mvvm:
- data中所有的属性、computed的计算属性、methods中的方法等，最后都出现在了vue实例vm身上。
- vue实例vm身上所有的属性及 Vue原型上所有属性，在Vue模板{{}}中都可以直接使用。
数据代理:

问题：{{}} 为什么可以访问vm实例上的所有属性|data里的数据为什么会出现在vm身上
1. 先认识一个方法：Object.defineProperty(obj，prop, options):
  1:作用：就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
  2. 接收三个参数：
  obj 需要定义属性的当前对象
  prop 当前需要定义的属性名
  options:属性配置
  3. 这个方法有缺点：现在先点一下：
  1. 不能监听数组的变化
  2. 不能监听新属性的添加
  3. 兼容性问题
  4. 不能深度监听
  示例：
```
let num = 300
let person = {name: '小明',sex: '男'
}
Object.defineProperty(person, 'age', {//value: 15,//enumerable: true, // 控制属性是否可以枚举, 默认false//writable: true, // 控制属性是否可以被修改，默认false//configurable: true, // 控制属性是否可以被删除，默认false// 当有人读取person的age属性时，get函数(getter)就会被调用,且返回值是age的值// 注意：不能同时指定访问器和值或可写属性，什么意思呢，就是上面的配置和下面的get、set不可同时存在get(){console.log('有人读取了age属性')return number}// 当有人修改person的age属性时，set函数(setter)就会被调用,且会收到修改的具体指set(value){console.log('有人修改了age属性')number = value}
})
```
1. 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写），可以在控制台做两个操作：
  - 输出一下obj,obj2,和obj2.x，并且把obj2输出后的对象展开一下
  - 更改一下obj2.x并输出一下obj
```
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对象中的属性的操作（读/ 写）
1. 好处：
  更加方便操作data中的数据
2. 基本原理：
  通过Object.defineProperty()把data对象中所有的属性添加到vm上
  为每一个添加到vm上的属性，都指定一个getter/setter
  在getter/setter内部去操作（读/写）data中对应的属性