vue核心之数据驱动

vue核心之数据驱动

数据驱动：vue最大的特点。
数据驱动是通过：数据劫持结合发布者-订阅者模式实现的。

在vue中，所谓的数据驱动就是当数据发生变化的时候，用户界面发生相应的变化，我们对视图的修改，不会直接操作 DOM**，而是通过修改数据。它相比我们传统的前端开发，如使用 jQuery 等前端库直接修改 DOM，大大简化了代码量。特别是当交互复杂的时候，只关心数据的修改会让代码的逻辑变的非常清晰，因为 DOM 变成了数据的映射，我们所有的逻辑都是对数据的修改，而不用碰触 DOM，这样的代码非常利于维护。

那么vuejs是如何实现这种数据驱动的呢？
这里就需要谈到MVVM设计模式
MVVM主要包含3个部分:model、view和 viewmodel。
Model：指的是数据部分
View：指的是视图部分，对应前端就是dom
Viewmodel：就是连接视图与数据的中间件

Model和View是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。viewModel相当于一个观察者，随时监听双方的动态，以及及时的给对方一个响应的操作

简单实现vue数据驱动

<div id="app">{{name}}--{{age}}</div> //模仿vue的写法
<script>
        let app = document.getElementById("app");
        let str = app.innerHTML;
        let data = {
            name: "张三",
            age: "20",
            set $name(value) {
                this.name = value;
                updata();
            }, //通过set设置值
            get $name() {
                return this.name;
            },
            set $age(value) {
                this.age = value;
                updata();
            },
            get $age() {
                return this.age;
            }, //通过get取值
        }
        updata();//初始化界面信息
        function updata() {
            let reg = /\{\{(.+?)\}\}/gm;//需要匹配界面上{{}}这种的格式
           //match 是匹配到字符串 示例中 为{{name}}和{{age}}
			//key 是捕获分组中内容（无分组时不存在），正则表达式中小括号内的内容为一个分组，分别为name 和age
            app.innerHTML = str.replace(reg, function (match, key) {
                return data["$"+key];
            })
        }
    </script>

效果