什么是响应式
响应式是指，当数据发生变化的时候，界面就会更新。并不是我们在平时写页面中响应式。这两个响应式不一样的。
原理
当你把一个普通的JS对象传入Vue实例作为data选项，Vue将遍历此对象的所有property。用了Object.defineProperty这个属性，把这些property全部转为getter/setter。因为这个属性无法shim，所以vue 不支持IE8以及更低版本的浏览器。好消息是，Vue支持IE9浏览器。
Object.defineProperty
不是响应式的案例，数据变化了，无法更新视图的变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
var person = {
name:'jack'
}
box.innerHTML=person.name;
person.name = "rose";
console.log(person);
</script>
</body>
</html>
Object.defineProperty的基本使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let data = {}
Object.defineProperty(data, 'name', {
// 当使用data.name 是自动调用这个函数
get() {
return 1
},
set(value) {
// 这个位置只要你修改了name属性就会得到执行
// 所以如果你想要在name变化的时候完成一些自己的事情都可以放到这里来执行
console.log(value,"value")
}
})
data.name ="rose"
console.log(data.name)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2.x响应式原理简单实现</title>
</head>
<body>
<input type="text" id="input_text" />
<span id="span"></span>
<script>
var input_text = document.getElementById('input_text'),
span = document.getElementById('span'),
data = {};
Object.defineProperty(data, 'msg', {
set: function (newVal) {
input_text.value = newVal
span.innerHTML = newVal
}
})
input_text.addEventListener('keyup', function (e) {
data.msg = e.target.value
})
</script>
</body>
</html>
