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

新茶十九

已于 2023-12-13 12:42:32 修改

阅读量986

点赞数 16

分类专栏： # vue2 学习路程文章标签： vue.js 学习 javascript 前端

于 2023-11-30 17:29:40 首次发布

本文链接：https://blog.csdn.net/qq_35940731/article/details/134717012

版权

vue2 学习路程专栏收录该内容

18 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue中数据的两种组织方式（对象式和函数式）、el属性的配置、MVVM模型的应用，以及数据代理的实现原理，重点讲解了Vue如何通过Vue实例（ViewModel）管理数据和视图的更新过程。

摘要由CSDN通过智能技术生成

1. 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>

2. 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>

3. MVVM模型 `vue`受到`mvvm`模型的启发

M: 模型(Model): data的数据
V: 视图(View): 模板代码
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模板{{}}中都可以直接使用。

4. 数据代理:

问题：{{}} 为什么可以访问vm实例上的所有属性|data里的数据为什么会出现在vm身上

先认识一个方法：Object.defineProperty(obj，prop, options):
1:作用：就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性
接收三个参数：
obj 需要定义属性的当前对象
prop 当前需要定义的属性名
options:属性配置
这个方法有缺点：现在先点一下：
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
        }
    })

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