vue数据双向绑定源码分析
Posted Lumbago～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue数据双向绑定源码分析相关的知识，希望对你有一定的参考价值。
首先说一下数据双向绑定原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。
实现一个简单的数据双向绑定的html页面需要引入四个重要的js（四个步骤）来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MVVM</title>
</head>
<body>
<div id="app">
<p>msg</p><!--w0==> dep0 -->
<p v-text="msg"></p><!--w1 ==> dep0-->
<p v-html="msg"></p><!--w2 ==> dep0-->
<!--dep0 ==>[w0,w1,w2]-->
<p>friend.name</p><!--w3 ==> dep1,dep2-->
<!--dep1==>[w3]-->
<!--dep2==>[w3]-->
<button v-on:click="update">更新</button>
</div>
<script src="./mvvm-master/js/observer.js"></script>
<script src="./mvvm-master/js/compile.js"></script>
<script src="./mvvm-master/js/watcher.js"></script>
<script src="./mvvm-master/js/mvvm.js"></script>
<script>
const vm = new MVVM(
el: "#app",
data:
msg: "aa",//dep0
friend://dep1
name:"cc"//dep2
,
methods:
update()
// this.msg = "cc";
this.friend.name = "dd";
);
console.log(vm.name)
</script>
</body>
</html>
具体步骤：
第一步：
observer.js源码分析
第二步：
compile.js源码分析
第三步：
watcher.js源码分析
第四步：
mvvm.js源码分析
以上是关于vue数据双向绑定源码分析的主要内容，如果未能解决你的问题，请参考以下文章