提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue单项数据绑定绑定原理简单实现

Vue数据原理 实现 简单 绑定 单项
2023-06-13 09:12:14 时间

单项数据绑定

在Vue中Model（data）会绑定到View(html)，当我们修改Model时，我们不需要手动操作DOM元素，即可实现数据的自动更新 如下演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src='./vue-2.4.0.js'></script>
<title>Document</title>
</head>
<body>
    <div id='app'>
        <p>年龄:{{age}}</p>
    </div>
    <script type="text/javascript">
        let vm = new Vue({
            el:'#app',
            data:{
                "age":19
            }

        })
    </script>
</body>
</html>

页面显示如下

当修改data时页面自动更新

data:{
                "age":20
 }
 //年龄：20

在代码内部修改我们还能理解，奇怪的是我们在控制台修改data居然也能完成自动更新

他是如何做到的？ 方便理解我们通过代码简单的实现其原理 1.新键如下结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>
</head>
<body>
    <div id='app'>
        <p>年龄:{{age}}</p>
    </div>
</body>
</html>

2.获取根元素节点 let el=document.getElementById('app'); 接下来我们如何在data修改的时候自动更新HTML? 首先保存之前的HTML方便后面自动渲染 let template = el.innerHTML 接下来数据自动更新的重点来了Proxy对象

Proxy的英译是代理，通过Proxy我们可以将真正的数据对象隐藏起来，当我们修改数据对象时其实是修改的代理对象 所以我们得有一个真正的数据对象

let _data={"age":19};

其次创建一个代理对象 该对象接收两个参数第一个是真正的数据对象，第二个为执行各种操作时代理的行为。如set,get等等。

 let data = new Proxy(_data,{
    set(obj,name,value){
           obj:真实的数据对象
             name:设置的属性
             value：设置的值
            //当设置数据时执行的操作
        }
  })

我们尝试修改data值，弹出警告框

 let data = new Proxy(_data,{
            set(obj,name,value){
                alert('你尝试修改数据！')
            }
  })
data.age=99;

有了set的方法我们就可以在数据发生改变时，我们就可以进行各种操作了如实现数据自动更新

set(obj,name,value){
                // alert('你尝试修改数据！')
                obj[name]=value;//当修改对象值时，同步到原对象
            }

接下来我们编写渲染页面函数，当页面加载和数据发生改变时进行页面渲染

function render(){
            el.innerHTML=template.replace(/\{\{\w+\}\}/g,str=>{
                str=str.substring(2,str.length-2);//将{{age}}替换为age
                return _data[str];//将{{age}}替换为 _data[age]
            })
        }

在页面加载和数据改变时应用render() 完整代码

let el=document.getElementById('app');
let template = el.innerHTML;
let _data={"age":19};
let data = new Proxy(_data,{
set(obj,name,value){
            // alert('你尝试修改数据！')
             obj[name]=value;//当修改对象值时，同步到原对象
             render();//数据发生改变重新渲染页面
          }
})
render();//页面初始渲染
// data.age=99;
function render(){
            el.innerHTML=template.replace(/\{\{\w+\}\}/g,str=>{
                str=str.substring(2,str.length-2);//将{{age}}替换为age
                return _data[str];
            })
 }

相关文章