Vue.js学习与理解

时间：2021-04-26 10:24:41

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

Vue.js比Angular.js react.js简单，学习成本低。

Vue.js使用到二个重要的函数：

1.Object.defineProperty 函数

将属性添加到对象，或修改现有属性的特性。

Object.defineProperty(object, propertyname, descriptor)
参数
object 必需。  要在其上添加或修改属性的对象。  这可能是一个本机 JavaScript 对象（即用户定义的对象或内置对象）或 DOM 对象。  
propertyname 必需。  一个包含属性名称的字符串。  
descriptor 必需。  属性描述符。  它可以针对数据属性或访问器属性。
例子：添加访问器属性
 var obj = {},newVal;

 // Add an accessor property to the object.

 Object.defineProperty(obj, "name", {

     set: function (x) {

         console.log("in property set accessor" + newVal);

         this.firstName= x;

     },

     get: function () {

         console.log("in property get accessor" + newVal);

         return this.firstName;

     },

     enumerable: true,

     configurable: true

 });

Vue.js当数据有变化时，通过defineProperty的set方法去通知notify()订阅者subscribers有新的值修改

  function defineReactive(obj, key, val, doNotObserve) {

    var dep = new Dep();

    var property = Object.getOwnPropertyDescriptor(obj, key);

    if (property && property.configurable === false) {

      return;

    }

    // cater for pre-defined getter/setters

    var getter = property && property.get;

    var setter = property && property.set;

    // if doNotObserve is true, only use the child value observer

    // if it already exists, and do not attempt to create it.

    // this allows freezing a large object from the root and

    // avoid unnecessary observation inside v-for fragments.

    var childOb = doNotObserve ? isObject(val) && val.__ob__ : observe(val);

    Object.defineProperty(obj, key, {

      enumerable: true,

      configurable: true,

      get: function reactiveGetter() {

        var value = getter ? getter.call(obj) : val;

        if (Dep.target) {

          dep.depend();

          if (childOb) {

            childOb.dep.depend();

          }

          if (isArray(value)) {

            for (var e, i = 0, l = value.length; i < l; i++) {

              e = value[i];

              e && e.__ob__ && e.__ob__.dep.depend();

            }

          }

        }

        return value;

      },

      set: function reactiveSetter(newVal) {

        var value = getter ? getter.call(obj) : val;

        if (newVal === value) {

          return;

        }

        if (setter) {

          setter.call(obj, newVal);

        } else {

          val = newVal;

        }

        childOb = doNotObserve ? isObject(newVal) && newVal.__ob__ : observe(newVal);
dep.notify();

      }

    });

  }

 2.MutationObserver函数，HTML5新特性之Mutation Observer

Mutation Observer（变动观察器）是监视DOM变动的接口。当DOM对象树发生任何变动时，Mutation Observer会得到通知。

要概念上，它很接近事件。可以理解为，当DOM发生变动会触发Mutation Observer事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer则是异步触发，DOM发生变动以后，并不会马上触发，而是要等到当前所有DOM操作都结束后才触发。

这样设计是为了应付DOM变动频繁的情况。举例来说，如果在文档中连续插入1000个段落（p元素），会连续触发1000个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而Mutation Observer完全不同，只在1000个段落都插入结束后才会触发，而且只触发一次。

Mutation Observer有以下特点：

  • 它等待所有脚本任务完成后，才会运行，即采用异步方式
  • 它把DOM变动记录封装成一个数组进行处理，而不是一条条地个别处理DOM变动。
  • 它即可以观察发生在DOM节点的所有变动，也可以观察某一类变动
/**

   * Defer a task to execute it asynchronously. Ideally this

   * should be executed as a microtask, so we leverage

   * MutationObserver if it's available, and fallback to

   * setTimeout(0).

   *

   * @param {Function} cb

   * @param {Object} ctx

   */

  var nextTick = (function () {

    var callbacks = [];

    var pending = false;

    var timerFunc;

    function nextTickHandler() {

      pending = false;

      var copies = callbacks.slice(0);

      callbacks = [];

      for (var i = 0; i < copies.length; i++) {

        copies[i]();

      }

    }

    /* istanbul ignore if */

    if (typeof MutationObserver !== 'undefined') {

      var counter = 1;
var observer = new MutationObserver(nextTickHandler);

      var textNode = document.createTextNode(counter);

      observer.observe(textNode, {

        characterData: true

      });

      timerFunc = function () {

        counter = (counter + 1) % 2;

        textNode.data = counter;

      };

    } else {

      // webpack attempts to inject a shim for setImmediate

      // if it is used as a global, so we have to work around that to

      // avoid bundling unnecessary code.

      var context = inBrowser ? window : typeof global !== 'undefined' ? global : {};

      timerFunc = context.setImmediate || setTimeout;

    }

    return function (cb, ctx) {

      var func = ctx ? function () {

        cb.call(ctx);

      } : cb;

      callbacks.push(func);

      if (pending) return;

      pending = true;

      timerFunc(nextTickHandler, 0);

    };

  })();

异步更新队列,Vue.js 默认异步更新 DOM。每当观察到数据变化时，Vue 就开始一个队列，将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发，只会推入一次到队列中。等到下一次事件循环，Vue 将清空队列，只进行必要的 DOM 更新。在内部异步队列优先使用MutationObserver，如果不支持则使用 setTimeout(fn, 0)。通过MutationObserver， 实现了异步更新队列

相关文章