vue（四）——vue双向数据绑定的原理以及实现

最新推荐文章于 2024-08-23 23:41:11 发布

回首＆逝去～

最新推荐文章于 2024-08-23 23:41:11 发布

阅读量438

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_43957263/article/details/121764851

版权

vue.js javascript 前端

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

摘要

我们本篇文章从双向数据绑定v-model的使用，到使用vue的input事件来实现双向数据绑定，再到vue实现双向数据绑定的原理（也就是使用js来实现双向数据绑定）；这三点来由浅入深的了解一下vue的双向数据绑定。

1、v-model的使用

v-model使用非常简单，就是在标签中加入v-model="data中的数据变量"这样的代码

代码演示：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <div id="app">
        <!-- v-model实现双向绑定 -->
        <input type="text" v-model="message"> {{ message }}
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            },
        });
    </script>
</body>
 
</html>

结果：

接下来就是后面显示的内容会随着输入框输入的内容改变而改变。

2、使用vue的input事件来实现双向数据绑定

分三步：

1、在data中声明要绑定的数据变量

2、在methods中声明处理事件函数（主要原理就是获取input的内容，然后赋值给data中声明的要绑定的变量）

3、绑定函数

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- v-model实现双向绑定 -->
        <input type="text" v-model="message"> {{ message }}
        <!-- v-model的原理 -->
        <input type="text" :value="message" @input="change"> {{ message }}
        <!-- 或者写成这样 -->
        <input type="text" :value="message" @input="message = $event.target.value"> {{ message }}

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            },
            methods: {
                change(event) {
                    this.message = event.target.value;
                }
            },
        });
    </script>
</body>

</html>

效果：

由于代码中绑定的是同一个变量，所以改变其中任意一个，其他两个也会跟着改变。

3、vue双向数据绑定的原理

vue.js是使用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者。

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="vue-demo"></div>
    <input type="text" id="input">
    <script>
        var obj  = {};
        var Demo = document.getElementById('vue-demo')
        var Inp = document.getElementById("input")
        Object.defineProperty(obj, 'name', {
            get: function() {
                return val;
            },
            set: function (newVal) {   //当该属性被赋值的时候触发
                Inp.value = newVal;
                Demo.innerHTML = newVal;
            }
        })
        input.addEventListener('input', function(e) {
            // 给obj的name属性赋值，进而触发该属性的set方法
            obj.name = e.target.value;
        });
        obj.name = 'yzg';//在给obj设置name属性的时候，触发了set这个方法
    </script>
</body>
</html>

结果：

关于Object.defineProperty()，第一个参数是监听对象，第二个参数是要监听的对象属性，剩下的主要就是get和set这两个方法。

get方法是获取对象属性时触发，以上面为例如：const a = obj.name;的时候。

set方法是设置对象属性时触发。如上面的obj.name = 'yzg';