Vue 已经是主流框架了
它的好处也不用多说，都已经是大家公认的了
那我们就来理解一下Vue的单向数据绑定和双向数据绑定
然后再使用JS来实现Vue的双向数据绑定
单向数据绑定
指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变
双向数据绑定
数据模型（Module）和视图（View）之间的双向绑定。
用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。
如何使用js达到双向数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="userName"> <br> <span id ="uName"></span> <script> var obj={ pwd:"1234" }; //主要使用到了get和set方法，最为关键 Object.defineProperty(obj,"userName",{ get:function(){ console.log('get init'); }, set:function(val){ console.log("set init"); document.getElementById("uName").innerText=val; document.getElementById("userName").value=val; } }); document.getElementById("userName").addEventListener("keyup",function(event){ obj.userName=event.target.value; } ) </script> </body> </html>
运行上述的dome，可以使用控制台，obj.username=123赋值，会自动触发set方法。若我们在控制台使用obj.username拿值可以触发get方法，也就是vue的双向数据绑定的核心点。