vue（四）——vue双向数据绑定的原理以及实现
程序员文章站
2022-04-19 07:57:57
...
摘要
我们本篇文章从双向数据绑定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';
上一篇： 抽象的ORM该如何理解
下一篇： 在GD中输出汉字的函数的改进_PHP