码迷,mamicode.com
首页 > Web开发 > 详细

Vue.js

时间:2016-03-21 01:34:57      阅读:404      评论:0      收藏:0      [点我收藏+]

标签:

Vue.js学习与理解

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, 实现了异步更新队列

 

 

 

 

 
标签: javascript

Vue.js

标签:

原文地址:http://www.cnblogs.com/Leo_wl/p/5300367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!