vue核心思想
2017-11-29 本文已影响0人
飞飞廉
vue核心思想：
- MVVM框架：
dom-viewmodel-model - 组件化
- 数据的双向绑定：
1)常规思路：
用keyup事件监听，获取改变的值赋值给另一个对象的text。
2)vue思路：
vue采用数据劫持结合发布者订阅者模式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
Object.defineProperty(obj,"username",{
set:function(newVal){
},
get:function(){
}
})
接受三个参数：
obj:目标对象
username：需要定义的属性或者方法的名字
{}:目标属性所拥有的特性（decriptor）
descriptor：
value：属性的值
configurable：总开关，一旦为false，就不能设置其他的了（value，configurable，enumerable）
enumerable：是否能在for in循环中遍历出来火灾Object.keys中列举出来。
wriatable可写
以上三个（除了value）用Object.defineProperty()定义时默认为false属性，若直接在对象上定义属性，默认为true
访问器属性：
configurable
enumerable
set和get：set是当给属性username赋值新属性的时候触发，get是获取username的时候触发。
注意：在 descriptor 中不能 同时设置访问器 (get 和 set) 和 wriable 或 value，否则会错，就是说想用(get 和 set)，就不能用（wriable 或 value中的任何一个）
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var obj={};
Object.defineProperty(obj,"userName",{
get:function(){
},
set:function(newVal){
document.getElementById('uName').innerText=newVal;
document.getElementById('username').value=newVal;
}
})
document.getElementById("username").addEventListener("keyup",function(){
obj.userName=event.target.value;
})
}
</script>
</head>
<body>
<input type="text" id="username">
<span id="uName"></span>
</body>
</html>
