vue原理实现

<!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)

易于集成路由工具打包工具以及状态管理