用class实现一个简单Vue原理dome

最新推荐文章于 2023-06-26 09:51:59 发布

VIP文章 Aa独角戏

最新推荐文章于 2023-06-26 09:51:59 发布

阅读量431

点赞数

分类专栏： vue 文章标签： vue vue原理 vue订阅器

本文链接：https://blog.csdn.net/yw_hard/article/details/104066770

版权

按照vue基本原理，分别给class Vue定义两个方法，observe和compile，再添加一个更新视图的watcher，

observe()，用来实现数据变化的监听，使用object.defineProperty，当有数据更新时，触发watch和订阅器watcher。
compile()，用来解析DOM，获取每个节点及指令信息，初始化数据并创建watcher。
watcher()，订阅器watcher，当数据发生变化时，调用原型方法update更新dom节点数据。

代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        class Vue {
            constructor(options) {
                this.el = document.quer

最低0.47元/天解锁文章

Aa独角戏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用class实现一个简单Vue原理dome

按照vue基本原理，分别给class Vue定义两个方法，observe和compile，再添加一个更新视图的watcher，observe()，用来实现数据变化的监听，使用object.defineProperty，当有数据更新时，触发watch和订阅器watcher。 compile()，用来解析DOM，获取每个节点及指令信息，初始化数据并创建watcher。 watcher()，订阅...
复制链接

扫一扫