<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue双向数据绑定原理和模拟</title> </head> <body> <input type="text" id="userName"> <br> <span id="uName"></span> </body> </html> <script type="text/javascript"> var obj = { pwd:"123456" } 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>
vue两大特征
数据驱动
组件化
vue框架对比
-vue
模板和渲染函数的弹性选择
简单的语法和项目创建
更快的渲染速度和更小的体积
-React
更适用于大型应用和更好的测试性
同时适用于web端和原生app
更大的生态圈带来更多的支持和工具
-相同点
利用虚拟dom实现快速渲染(2.0)
轻量级
响应式组件
支持服务端渲染(vue ssr)
易于集成路由工具 打包工具以及状态管理