Vue——认识day02
此处接上一篇文章Vue——初识Vue开始，欢迎大家。
目录
1.MVVM模型
2.Object.defineproperty方法
3.数据代理简介
4.Vue中的数据代理
总结
1.MVVM模型
MVVM模型是一种软件架构模式，用于将用户界面（View），业务逻辑（Model）和视图模型（ViewModel）之间的关系解耦。MVVM的目标是实现用户界面的可复用性和可维护性。
在MVVM模型中，用户界面（View）负责显示数据和接收用户操作。它通过数据绑定与视图模型（ViewModel）进行交互，以获取和更新数据。视图模型（ViewModel）是用户界面（View）的抽象，它包含了与用户界面相关的业务逻辑和数据。视图模型通过数据绑定从模型（Model）中获取数据，并将数据在用户界面上进行展示。
模型（Model）是业务数据和业务逻辑的抽象。它负责数据的获取和存储，并包含了与数据相关的操作和验证逻辑。模型可以与外部数据源（例如数据库或网络）进行交互。
MVVM模型的核心概念是数据绑定，它将数据和用户界面之间的关系自动化。数据绑定允许视图模型将数据绑定到视图上，并且在数据发生变化时自动更新视图。这种自动更新减少了开发人员的工作量，并提高了用户界面的可维护性。
总结来说，data中的所有属性，最后都会交给vm。vm中的所有属性（包括vue自带的）在vue模版（view）中都可以直接使用。
2.Object.defineproperty方法
具体讲解都放置于代码注释之中了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>介绍Object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript">
let number = 20
let person = {
name:'WJJ',
// 这样写就可以遍历
// age:20,
sex:'女'
}
// 参数解析：第一个参数是 要定义属性的对象。
// 第二个参数是 要定义或修改的属性的名称
// 第三个属性是一个对象，里面写一些（配置）属性
// 1.使用这中方法添加的属性不参与枚举
// 2.使用这种方法添加的属性在页面无法修改
// 3.使用这种方法添加的属性在页面无法被删除
Object.defineProperty(person,'age',{
// //value:18,
// value:number,
// // 开启这个为true，就可以让这个添加的属性加入枚举
// enumerable:true,
// // 开启这个为true，就可以让这个添加的属性在页面可修改
// writable:true,
// // 开启这个为true，就可以让这个添加的属性在页面可删除
// configurable:true,
// 当有人读取person中的age的数据时
// get函数(getter)就会被调用，且返回值就是age的值
get(){
return number
},
// 当有人修改person中的age的数据时
// set函数(setter)就会被调用，且会收到修改后的值
set(value){
number = value
console.log('修改成功:',value)
}
})
console.log(person)
// 这里就可以发现并没有找到age这个属性
console.log(Object.keys(person))
for(let key in person){
console.log('值的数据为:',person[key])
}
</script>
</body>
</html>3.数据代理简介
数据代理：通过一个对象代理对另一个对象中属性的操作（读、写）
如下示例代码所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>什么是数据代理</title>
</head>
<body>
<script type="text/javascript">
// 数据代理：通过一个对象代理对
// 另一个对象中属性的操作（读、写）
let obj = {a:100}
let objP = {b:200}
Object.defineProperty(objP,'a',{
get(){
return obj.a
},
set(value){
obj.a = value
}
})
</script>
</body>
</html>4.Vue中的数据代理
在Vue中，数据代理是指将data对象中的所有属性代理到Vue实例上，使得我们可以通过实例访问到data对象中的属性。
Vue实例的data选项中定义的属性会被Vue代理到实例上，这样我们可以直接通过实例访问这些属性，而不需要通过data对象来访问。这样做的好处是可以简化代码，提高代码的可读性和可维护性。
通过数据代理，我们可以在Vue实例中直接访问data中的属性，而无需使用this.data来访问。例如，如果在data中定义了一个属性name，我们可以直接通过this.name来访问该属性。
当我们在Vue实例中访问data中的属性时，Vue会自动进行数据劫持，即在访问属性时会触发get拦截器，从而实现属性的响应式。
需要注意的是，Vue只会对data中已经存在的属性进行代理，而不会代理动态添加的属性。如果需要代理动态添加的属性，可以使用Vue.set或this.$set方法。
下面是一个简单的示例：
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
console.log(vm.message); // 输出：Hello Vue!
在上述示例中，我们将data对象中的属性message代理到了Vue实例vm上，可以直接通过vm.message访问该属性。
下面的来自尚硅谷的图示：
总结
一个字较为ez，祝大家学习愉快！！！