本文探讨了Vue中大括号{{}}如何解析为data中的数据。通过调试，文章揭示了从获取表达式、查找data中的对应值，到替换HTML内容的基本步骤。在Vue的complie.js文件中，详细解释了如何将模板转换并更新为实际的数据值。
我们在页面中书写 {
{}}，为什么可以转换为 data 中的数据呢？我们可以进行调试来看看 代码做了什么事情？
先总结基本的步骤：
- 拿到 大括号 里面的表达式；
- 在 data 中找到对应的值；
- 然后把值 代替到 大括号 的位置；
html 结构为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板解析</title>
</head>
<body>
<div id="app">
{
{name}}
</div>
<script src="./bil/mvvm.js"></script>
<script src="./bil/compile.js"></script>
<script src="./bil/observer.js"></script>
<script src="./bil/watcher.js"></script>
<script>
new MVVM ({
el: '#app',
data: {
name: '你好'
}
})
</script>
</body>
</html>
我们开启进行调试， Sources 并把断点打在 this.$complie 28行上：
最低0.47元/天 解锁文章
1786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
