原生js简易实现双向数据绑定
vue 双向数据绑定原理是通过 数据劫持 结合 发布订阅模 的方式来实现的，也就是说数据和视图是同步的，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。那么使用原生js是否也能实现双向数据绑定呢？
原生js简易实现双向数据绑定
<!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>
<!-- oninput 事件在用户输入时触发。 -->
<input type="text" id="ipt" value="" oninput="contentChange(this.value)">
<h3 id="content"></h3>
</body>
</html>
<script>
// 获取元素
var ipt = document.getElementById('ipt')
var content = document.getElementById('content')
// 声明一个data对象，专门用来存放数据
var data = {};
// 用来给对象动态添加属性 define:定义 Property:属性
// Object.defineProperty(对象的名称, 属性的名称, 配置项)
// 注意:属性的名称必须是字符串，否则会被当做变量使用，且会报未定义的错误。（xx is not defined.）
// get代表定义msg时,给其赋值的数据
// set代表当你拿到最新的值时，接下来要进行的操作
Object.defineProperty(data, 'msg', {
get: function () {
return "hello world"
},
set: function (newVal) {
content.innerHTML = newVal;
ipt.value = newVal;
}
})
// 将数据源的最初值，展示在页面上
content.innerHTML = data.msg;
ipt.value = data.msg;
// 当输入的数据发生变化时，需要修改数据源data.msg
function contentChange(val) {
data.msg = val;
}
</script>
