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

news2024/11/26 12:34:06

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中对应的属性