vue的绑定原理

MVVM设计模型

(1).界面(View)

HTML+CSS,这里的HTML是增强版的。
比如在MVVM中的HTML支持变量:{{n}},在MVVM中的HTML可以写分支和循环。

(2).数据模型(Model)

是专门保存页面所需的变量,函数和对象。

(3).视图模型(ViewModel)对象

专门负责自动将变量和事件处理函数送到界面中指定位置——将界面和模型对象绑定在了一起。

如何实现Vue绑定原理

实现Vue的数据绑定,实际上就是实现MVVM设计模型, 接下来我们来看一个简单的例子。
例子:
这个例子需要引用Vue.js,如何引用请参考Vue.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="minus">-</button>
      <span>{{count}}</span>
      <button @click="add">+</button>
    </div>
    <script>
      var data = { count: 1 };
      var methods = {
        //methods中的方法要想操作data中的变量,必须加this.!
        //methods中的方法只要专心操作变量值即可!不用关心页面如何增删改查!
        minus: function () {
          if (this.count > 1) {
            this.count--;
          }
        },
        add: function () {
          this.count++;
        },
      };
     var vm= new Vue({
        el: "#app",
        data: data,
        methods: methods,
      });
    </script>
  </body>
</html>

效果图
在这里插入图片描述
当上面的代码运行之后,就是可以对count变量进行加减。

我们通过上面的例子来分析一下上面的代码,分析一下Vue绑定原理。在一开始先会执行new Vue()这个实例,这个new Vue(),自动帮我们做两件事。
原理图(引用vue.js)
vue的绑定原理_第1张图片

一、改造data对象中的属性,并保护data中的每一个属性。
Vue会自动根据data中的属性名,创建出“‘_’+属性名”或“‘$’+属性名”的变量来保护原data的属性,并同时创建出访问器属性的get()和set()方法,当外界想修改原data的属性值时,就会触发访问器属性中的set()方法修改属性值并通过Notify函数通知Watcher(观察者),然后去修改原属性值。我们可以通过console.log(vm)查看
在这里插入图片描述
vue会将methods对象打散,methods对象的函数就跟get和set方法同级,如果minus函数想修改count属性值,必修通过this.来指向vue中的count。
vue的绑定原理_第2张图片
二、创建虚拟Dom树(Virtual Dom Tree)
Vue会通过递归真实的Dom树的方式来找到带有双花括号{{key}}的节点,并保存在虚拟Dom树中,在第一个渲染页面时,虚拟Dom树会将带有双花括号的元素节点自动换成data对应的属性的值,如果之后data属性值每修改一次就会遍历一次虚拟Dom,并将修改的值替换掉旧的值。

总结来说

Vue的绑定原理是:访问器属性+观察者模式+新DOM树(虚拟)

还有更多的关于Vue的绑定原理请参看Vue.js官方文档中的深入响应式原理

你可能感兴趣的:(笔记,vue)