VueJS 核心概述



  • 响应的数据绑定

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

    下面简单的例子说明一下vue的响应的数据绑定系统:
    //这是我们的视图 View
    <div id="app">
      Hello {{ name }}!
    </div>
    
    // 这是我们的 Model
    var testData = {
      name: 'world'
    }
    
    // 创建一个 Vue 实例或 "ViewModel"
    // 它连接 View 与 Model
    var testVM = new Vue({
      el: '#app',
      data: testData
    })
    
    看起来这跟单单渲染一个模板非常类似,但是 Vue.js 在背后做了大量工作。并且 DOM 会自动响应数据的变化。我们如何知道?点击上面例子尝试一下打开你的浏览器的控制台,修改 testData.name,你将看到上例的视图有相应的更新,如下图所示:
    mvvm-test
  • 组件系统

    组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:
    components
    实际上,一个典型的用 Vue.js 构建的大型应用将形成一个组件树。在后面的教程中我们将详述组件,不过这里有一个假想的例子,看看使用了组件的应用模板是什么样的:
    <div id="app">
       <app-nav></app-nav>
       <app-view>
          <app-sidebar></app-sidebar>
          <app-content></app-content>
       </app-view>
    </div>
    
    你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。
    例如 Vue 组件实现了 Slot APIis 特性。但是,有几个关键的不同:
    • Web 组件规范仍然远未完成,并且没有浏览器实现。相比之下,Vue.js 组件不需要任何补丁,并且在所有支持的浏览器(IE9 及更高版本)之下表现一致。必要时,Vue.js 组件也可以放在原生自定义元素之内。
    • Vue.js 组件提供了原生自定义元素所不具备的一些重要功能,比如组件间的数据流,自定义事件系统,以及动态的、带特效的组件替换。
    组件系统是用 Vue.js 构建大型应用的基础。另外,Vue.js 生态系统也提供了高级工具与多种支持库,它们和 Vue.js 一起构成了一个更加“框架”性的系统。
  • 实例生命周期钩子

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
    比如 created 钩子可以用来在一个实例被创建之后执行代码:
    new Vue({
       data: {
          a: 1
       },
       created: function () {
          // `this` 指向 vm 实例
          console.log('a is: ' + this.a)
       }
    });
    // => "a is: 1"
    
    也有一些其它的钩子,在实例生命周期的不同阶段被调用,如 mountedupdateddestroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
    不要在选项属性或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
    因为箭头函数并没有 this,this 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
  • 生命周期图示

    下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。
    lifecycle