手把手教你实现Vue数据双向绑定实现原理

最新推荐文章于 2022-10-29 00:53:37 发布

TCorners

最新推荐文章于 2022-10-29 00:53:37 发布

阅读量276

点赞数 2

分类专栏： vue 文章标签： vue双向绑定原理 defineProperty vue

本文链接：https://blog.csdn.net/qq_40619526/article/details/104713731

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.首先我们先了解下实现Vue双向绑定的核心方法Object.defineProperty(obj, prop, descriptor)
obj: 目标对象；
prop: 目标对象属性的名称；
descriptor: 目标对象属性的描述符；
该方法的详细解释请移步这里。

2.废话不多说，上代码我们来实现：
该demo每当我们修改input值后，h1标题都会随之改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue双向绑定原理</title>
</head>
<body>
    <div id="app">
        <h1 id="title">vue双向绑定原理</h1>
        <input id="input" type="text" onchange="handle()">
    </div>
    
</body>
    <script>
        var view = title;
        var model = { title: "" };

        function handle() {
            const newVal = input.value;
            model.title = newVal
        }
        //调用该方法后，每次我们获取model.title时，都会调用get钩子函数；每当我     们修改model.title时，都会调用set钩子函数
        reactiveMVVM(model, "title", model.title)
        function reactiveMVVM(obj, key, val) {
            Object.defineProperty(obj, key, {
                get: function reactiveGetter () {
                    return val
                },
                set: function reactiveSetter (newVal) {
                    val = newVal;
                    view.innerText = val;
                }
            });
        }
    </script>
</html>

3.最后附上vue源码实现的代码
在这里插入图片描述

TCorners

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手把手教你实现Vue数据双向绑定实现原理

1.首先我们先了解下实现Vue双向绑定的核心方法Object.defineProperty(obj, prop, descriptor)obj: 要在其上定义属性的对象；prop: 要定义或修改的属性的名称；descriptor: 将被定义或修改的属性描述符；该方法的详细解释请移步这里。2.废话不多说，上代码我们来实现：该demo每当我们修改input值后，h1标题都会随之改变&lt...
复制链接

扫一扫