Vue2.x 总结

摘要：结果对象语法。当然，使用并不是首选，只有在构建中大型单页面应用时，考虑到全局的状态管理，自然就会想到。页面路由使用创建单页面应用，就可以使用目前版本是，把组件映射到对应的路由，通过改变来渲染不同的页面。

Vue2.x 总结

Vue 是一套用于构建用户界面的渐进式框架

也意味着，既可以把VUE作为该应用的一部分嵌入到一个现成的服务端应用，或者在前后端分离的应用中，利用Vue 的核心库及其生态系统，把更多的逻辑放在前端来实现。

A Progressive Framework

渐进式框架

与Vue相比，React学习曲线陡峭，在学习React之前，需要了解JSX和ES2015,当然入门后，发现还要学习React全家桶。而Vue就可以在简单阅读了文档后，开始构建应用程序。

这就要得益于Vue主张的 渐进式。
可以简单看下官方给出这张图：

可以看出来，主要是介绍了Vue设计思想，就是框架做分层设计，每层都可选，可以多带带引入，为不同的业务需求制定灵活的方案。主张最少，不会多做职责以外的事。

Vue作者尤雨溪的观点,Vue设计上包括的解决方案很多，但是使用者完全不需要一上手，就把所有东西全都用上，因为完全没有必要，一般都是根据项目的复杂度，在核心的基础上任意选用其他的部件，不一定要全部整合在一起。

这样渐进式的解决方案，使得学习成本大大减少了。

声明式渲染

也就是说，DOM状态只是数据状态的一个映射，基本所有的框架都已经认同了这个看法，Vue也是主张 数据驱动状态。

说到这里，基本都会提到现在主流的MVVM的模式。

采用了双向数据绑定的思想，基本可以分为三层：

M(Model,模型层)，负责业务数据相关。

V(View,视图层)，视图相关，展示给用户的交互界面，同时捕获用户的操作

VM(ViewModel, V与M连接的桥梁，也可以看做控制器)。

基于这个思想，Vue从一开始就利用ViewModel与view，model进行交互

ViewModel是Vue.js的核心，它是一个Vue实例，作用在某个HTML元素上，一般都是指定 id= app的元素，图中 的DOM listeners 和Data Bindings可以看做两个工具，它们是实现双向数据绑定的关键。

从用户(View)角度看，DOM Liisteners利用在相应的元素上添加事件绑定，捕获用户的点击，滑动等手势动作，在事件流中改变对应的Model。比如 常用的 v-model 指令，就是捕获表单元素的input，change等事件，改变相应的绑定值。

从Model方向看，Data Bindings则将操作的数据变化，反应到view上。比如通过ajax 从后台获取的数据，可以刷新数据列表，反应到用户界面。这也是实现双向数据绑定的关键。

Vue2中是通过Object.definedProperty方法中定义的getters和 setters构造器来实现数据响应的。可以简化下源码中的实现：

   Object.defineProperty(obj, key, {
         enumerable: true,
         configurable: true,
         get: function reactiveGetter () {
            return value
         },
         set: function reactiveSetter (newVal) {
             var value = getter ? getter.call(obj) : val;
             /* eslint-disable no-self-compare */
             if (newVal === value || (newVal !== newVal && value !== value)) {
               return
             }
             /* eslint-enable no-self-compare */
             if ("development" !== "production" && customSetter) {
               customSetter();
             }
             if (setter) {
               setter.call(obj, newVal);
             } else {
               val = newVal;
             }
             childOb = !shallow && observe(newVal);
             dep.notify();
           }
       });
   }

通过这种方法定义对象obj上的某个属性，每次获取属性值的时候就，会主动触发get对应的回调函数，然后给该属性赋值时，就会触发里面的set对应的回调函数，在set回调函数里面，加入了dep.notify()方法，然后可以看下这个方法

notify () {
 // stabilize the subscriber list first
 const subs = this.subs.slice()
 for (let i = 0, l = subs.length; i < l; i++) {
   subs[i].update()
 }
}

里面的定义的常量subs每次深拷贝this.subs数组，数组里面保存的就是所有的subscriber订阅者,对应的发布者就是obj里面对应的属性，或者说是Vue中的data值。通知所有的订阅者，数据更新了。原生js实现发布订阅模式（publish/Subscribe)，可以参考这里

常用基础语法 hello world

  
  
    
      
      
      
    
    
      

        {{message}}
      
      
    
  

这样就简单创建了一个Vue 应用，数据message 和DOM页面产生了关联，类似html模板引擎，把相应的数据渲染到页面中。

指令

指令 (Directives) 是带有 v- 前缀的特殊属性，这些特殊属性可以响应式的作用域DOM,

v-if 接受Boolean 类型,比如：

现在你看到我了

，通过seen的真假来插入/移除< p>元素。 这里判断的时候使用 === 全等，seen = “false” 的时候，也会插入

v-bind,响应式的更新HTM属性。完整形式... 。 缩写形式...。 常用于改变dom的style, class ,href ,src 等属性。 动态绑定的属性可以写成 :属性名="属性值"

v-on，绑定点击事件,比如 完整形式...，简写形式 ..., doSomething对应的指向methods里面定义的函数。 注意，除非在需要传递参数的时候，写成 @click = "doSomething($event,args1,args2)",$event代表事件对象，args代表自定义参数

style or class

将v-bind用于class和style时，Vue.js做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定HTML Class

直接赋值。

< div :class="className"> 

   < div class="static" :class="{active:isActive,"text-danger":hasError}" />