Vue的数据双向绑定,vue 3 和 vue2 数据劫持
1.Vue的数据双向绑定
Vue的数据双向绑定,其实就是通过数据劫持+发布者订阅者模式来实现的。
- Observer 通过Object.definePropty进行数据劫持
- Dep 发布者,添加订阅者以及在数据发生改变的时候通知所有的订阅者
- Watcher 订阅者,对数据进行观察以及保存数据修改需要触发的回调
- Compiler 模板编译器,对HTML模板进行编译,提取其中的变量并转化为数据(绑定更新Watcher 订阅者)
双向绑定:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>双向绑定</title>
</head>
<body>
<!-- 实现vue -->
<div id="app">
<input type="text" v-model="text">
{
{
text }}
</div>
<script type="text/javascript">
function defineReactive(obj, key, val){
var dep = new Dep();
Object.defineProperty(obj, key, {
get: function(){
if(Dep.target){
dep.addSub(Dep.target);
}
return val
},
set: function(newVal){
if(newVal === val)