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 = 20let 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 = valueconsole.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,祝大家学习愉快!!!