解析vue中的数据响应式（双向绑定）

最新推荐文章于 2023-06-20 22:09:02 发布

低配玩家李三丧

最新推荐文章于 2023-06-20 22:09:02 发布

阅读量1k

点赞数 1

分类专栏： vue相关文章标签： vue.js mvvm 前端

本文链接：https://blog.csdn.net/li11122212/article/details/104595586

版权

数据响应式是啥？

先来说说vue框架，它本质上是一个MVVM框架，而MVVM框架的三要素：数据响应式、模板引擎、渲染

数据响应式：监听数据变化并在视图中更新

Object.defifineProperty()

Proxy

模版引擎：提供描述视图的模版语法

插值： { {}}

指令： v-bind ， v-on ， v-model ， v-for ， v-if

渲染：如何将模板转换为 html

模板 => vdom => dom

所以简单来说，数据变更能够响应在视图中，就是数据响应式。其中渲染涉及的虚拟dom我还没有深入研究，目前先就vue中的数据响应式和模板引擎做一个简单的解析和实践。

原理分析

首先，我们先看一段vue实际使用的代码，从中分析双向绑定的实现方式和原理。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <p l-text="count"></p>
    <p l-html="desc"></p>
  </div>
  <script src="lCompile.js"></script>
  <script src="lvue.js"></script>
  <script>
    const app = new LVue({
      el:'#app',
      data:{
        count:1,
        desc:'<span style="color:red">这是lvue？</span>'
      }
      }
    })
  </script>
</body>
</html>

1. new LVue() 首先执行初始化，对 data 执行响应化处理，这个过程发生在 Observer 中

最低0.47元/天解锁文章

低配玩家李三丧

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
解析vue中的数据响应式（双向绑定）

数据响应式是啥？先来说说vue框架，它本质上是一个MVVM框架，而MVVM框架的三要素：数据响应式、模板引擎、渲染数据响应式：监听数据变化并在视图中更新 Object.defifineProperty() Proxy 模版引擎：提供描述视图的模版语法插值：{{}} 指令：v-bind，v-on，v-model，v-for，v-if 渲染：如何将模板转换为html...
复制链接

扫一扫