最近一直做vue相关项目开发,对于vue的底层原理不是很清楚,今天搜集各种资料并整理
1、MVVM介绍
我们知道Vue是基于MVVM的一个前端框架,首先来介绍下什么是MVVM?
M:模型层,主要负责业务数据相关;
V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;
其次,使用Object.defineProperty实现MVVM的表单数据双向绑定,当修改data属性之后,Vue立刻监听到,data属性被代理到vm上。
2、对象的定义与赋值
经常使用的定义与赋值方法obj.prop =value
或者obj['prop']=value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<script type="application/javascript">debugger;
let Person = {};
Person.name = "yangdechao";
Person["sex"] = "男";
console.log(Person.name);
console.log(Person.sex);
</script>
3、定义属性的两种方式
//1
var obj = {};
obj.name = 'yangdechao';
//相当于
Object.defineProperty(obj,'name',{
value : 'yangdechao',
writable: true,
configurable: true,
enumerable: true
})
//2
Object.defineProperty(obj,'name',{value: 'yangdechao'})
//相当于
Object.defineProperty(obj,'name',{
value: 'yangdechao',
writable: false,
configurable: false,
enumerable: false
})
4、Object.defineProperty()语法说明
Object.defineProperty()
的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
Object.defineProperty(obj, prop, desc)
- obj 需要定义属性的当前对象
- prop 当前需要定义的属性名
- desc 属性描述符
一般通过为对象的属性赋值的情况下,对象的属性可以修改也可以删除,但是通过Object.defineProperty()定义属性,通过描述符的设置可以进行更精准的控制对象属性。
属性的特性以及内部属性
javacript 有三种类型的属性
- 命名数据属性:拥有一个确定的值的属性。这也是最常见的属性
- 命名访问器属性:通过
getter
和setter
进行读取和赋值的属性 - 内部属性:由JavaScript引擎内部使用的属性,不能通过JavaScript代码直接访问到,不过可以通过一些方法间接的读取和设置。比如,每个对象都有一个内部属性
[[Prototype]]
,你不能直接访问这个属性,但可以通过Object.getPrototypeOf()
方法间接的读取到它的值。虽然内部属性通常用一个双吕括号包围的名称来表示,但实际上这并不是它们的名字,它们是一种抽象操作,是不可见的,根本没有上面两种属性有的那种字符串类型的属性<body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> var obj = {} Object.defineProperty(obj, 'content', { get: function() { return obj }, set: function(newValue) { document.getElementById('txt').value = newValue document.getElementById('show').innerHTML = newValue } }) document.addEventListener('keyup', function(e) { obj.content = e.target.value }) </script>