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

Vue

1. data中的两种方式

   1. 对象式

   data:{
   
   }
   

   2. 函数式

   data(){
       return {
   
       }
   }
   

   示例：

   
        
   
          {{ name }} {{ age}} {{$options}}
          
        
      
    
   

2. el中的两种方式

   1. new Vue时候配置 el 属性

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

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

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

   示例：

   
      
   
        {{ name }}
      
      
    
   

3. 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 触发事件而改变。

       
   {{ name }}
    // 改变data中的数据，页面随之变化
        //改变input的value值，data中的值也变化
   

   

   在Vue中的mvvm:

   • data中所有的属性、computed的计算属性、methods中的方法等，最后都出现在了vue实例vm身上。
   • vue实例vm身上所有的属性 及 Vue原型上所有属性，在Vue模板{{}}中都可以直接使用。

4. 数据代理:

   问题：{{}} 为什么可以访问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
       }
   })
   

   2. 数据代理： 通过一个对象代理对另一个对象中属性的操作（读/写），可以在控制台做两个操作：
      • 输出一下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
     }
   })
   

   3. Vue中的数据代理：通过vm对象来代理data对象中的属性的操作（读/ 写）

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