vue学习笔记

来公司以后就一直在用vue框架，不管是业务代码，还是做vue组件。关于vue有一些点是文档中没有提及的，记录一下以便以后查询～

一、Vue的特点

新一代 Vue.js 框架非常关注如何用极少的外部特性来解决应用程序/视图状态同步问题。

Vue.js 大部分是基于vue实例(var vm = new Vue({ ... }))完成的。Vue.js 负责给浏览器 DOM 中绑定数据。

1、特点 —— 这部分借鉴浅谈Vue.js的几个特点

（1）简洁（2）轻量（3）快速（4）数据驱动（5）模块友好（6）组件化

2、vue与angularJS的区别

与angularJS1对比

vue很多的语法是借鉴的angular，比如v-if/ng-if、v-model、ng-model等。

复杂性

在API与设计两方面上Vue.js都比Angular1简单得多。vue的源码比angularJS小了将近一半

比如绑定点击事件：v-on:click='doSomething' 可写成 @click='doSomthing'

绑定动态数据：v-bind:href='url' 可写成 :href='url'

数据绑定

angular1使用双向数据绑定，vue在不同组件间强制使用单向数据流。尤其vue2.0中父子间也强制只能父向子传递数据。这使应用中的数据流更加清晰易懂。

而且angularJS绑定数据的代码也不如vue简洁。angular里有什么ng-app/ng-controller等等设置起来比较繁琐

性能

Vue 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。

在 Angular 1 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环(digest cycle)可能要运行多次。

Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

Vue 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发，除非它们之间有明确的依赖关系。

组件与指令

在 Vue 中指令和组件分得更加清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑

但是，在angular中两者有不少相混的地方。

与angularJS2对比

angularjs2实际是一个全新的框架了，而且还用vue一样的思路解决了angularJS1里的一些问题。angular1 面向的是较小的应用程序，angular2 已转移焦点，面向的是大型企业应用。

大小和性能

在性能方面，这两个框架都非常的快。

但目前尚没有足够的数据用例来具体展示。如果你一定要量化这些数据，你可以查看第三方参照，它表明 Vue 2 相比 Angular2 是更快的。

在大小方面，vue还是比angular2小得多

虽然 Angular 2 使用 tree-shaking 和离线编译技术使代码体积减小了许多。但包含编译器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 还是要小的多。但是要注意，用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能，但随着功能引入的不断增多，尺寸会变得越来越大。

灵活性

Vue 相比于 Angular 2 则更加灵活

Vue 官方提供了构建工具来协助你构建项目，但它并不限制你去如何构建。有人可能喜欢用统一的方式来构建，也有很多开发者喜欢这种灵活自由的方式。

学习曲线

Vue能够快速上手。你使用的是熟悉的 HTML、符合 ES5 规则的 JavaScript（也就是纯 JavaScript）。有了这些基本的技能，你可以快速地掌握它(指南)并投入开发。

Angular 2 的学习曲线是非常陡峭的。即使不包括 TypeScript，它的开始指南中所用的就有 ES2015 标准的 JavaScript，18个 NPM 依赖包，4 个文件和超过 3 千多字的介绍，这一切都是为了完成个 Hello World。而Vue’s Hello World就非常简单。甚至我们并不用花费一整个页面去介绍它。

二、使用过程中的一些总结

首先要提一下vue父实例中的data属性

写成data:function(){return{...}}的形式：表示的是一个返回数据对象的函数，而不是直接返回数据对象。采用该方法的原因是，你创建了一个可在多个位置重用的组件，你不希望所有类型实例共享data字段，如果它是一个直接对象，上述问题就不可避免。

过渡效果的实现

vue2.0也是有改动的，不过我实现过渡效果是用的vue1.0的要求实现的，因为公司原有的部分还是应用的vue1.0。大致写下1.0版本下实现的关键点：

// 在标签中加入transition，配合v-if/v-show改变，就触发过渡的css变化
<div v-if="show" transition='fade'>
// 或是写成下面这样，然后在vue父实例的data中定义transitionName: 'XXX'
<div v-if="show" transition='transitionName'>

// 写CSS样式：
  .fade-transition {}   —— 始终保留在元素上的
  .fade-enter {}   —— 进入过渡状态的一瞬间的样式，结束后删除
  .fade-leave {}   —— 离开过渡的结束状态的一瞬间的样式，结束即删除

// 还可以配合hooks使用：
Vue.transition('fade',{
　　beforeEnter: function(el){},
　　enter: function(el){},
   alertEnter: function(el){},
   ......具体有哪些需要的时候可以看文档～
})

　　这里你定义的transitionName是XXX，CSS样式这里就写XXX-transition/enter/leave，要对应！

还有就是在使用了v-for后，如果我们要动态的去取每一个的值，比如放在方法内做参数，或是放在style中，如何书写？我总结为大致三种写法：
```
<div class="recommend_shop" v-for="rshop in recommend_shop">
     <div class="group_img" :style="{ backgroundImage: 'url('+ rshop.group_header +')'}"v-on:click="openGroup( rshop.group_id )">  
     </div>

     <div class="group_info">成交 {{ rshop.goods_nums }}</div>
</div>
```
　　这里:style="{ backgroundImage:'url('+ ... +')' }" 和 v-on:click="openGroup( ... )"的写法要注意！
如何封装组件？

一开始我写组件，只知道组件就是把一个常用的功能封装起来，具体这个封装体现在哪里？就好比你拿一个转换插头，你不知道里面它有什么逻辑，装了什么乱七八糟的东西，但是你提供了一个插孔和一个插头，这个插孔就是组件要预留出来的可能要传进来的一些数据，插头就是组件最后要传给外部的一些外部需要的数据。

还有就是slot的使用，

这个我之前也记录过，我当时理解slot的时候把官方文档的三个例子都写了一遍，盯着看了好一会才懂。。。我也是对自己无语了。。。

三、vue2.0的改变点：

1.0里的钩子函数ready废弃了，在2.0使用mounted代替。还移除了beforeCompile（Created代替）、compiled（mounted代替），新增了beforeMount、beforeUpdate、update等（这几个我还没用过哈哈）
events、$dispatch、$broadcast废弃了。
子组件给父组件传递参数，发送事件时原来我们使用$dispatch()，但是2.0删掉了这个方法，但是有它的办法来实现，我总结为以下三个关键点（以做过的一个分页组件部分代码为例）：
```
// 在父实例page.js中定义想要操作的事件
data: function(){
　　curPage: 1
}
methods: {
    changePage: function(){
          this.curPage = cur;  
    }  
}        
```
　　
```
// 在html的<page>标签上添加v-on:click事件
// 父组件用v-on监听事件
<page :data-num="pagedata.length" :each="eachPageSize" :visiblepage="visiblepage" v-on:change-page="changePage"></page>
```
　　
```
// 子组件模板（pages是个数字数组）
<li v-for="index in pages" v-bind:class="{ active: curPage == index }">
    <a v-on:click="btnClick(index)">{{ index }}</a>
</li>

// 在子组件page.vue中：点击事件中添加：$emit()，将事件传播到父组件
methods: {
         btnClick: function(index){
             this.curPage = index
             this.$emit('change-page', index)
         }
}
```
　　怎么把点击的是哪个数字传到父组件，使父组件可以使用这个数字去做其他的操作？整体流程是：点击子组件中的点击按钮触发btnClick(index)方法，btnClick中，利用this.$emit('change-page',index)触发change-page事件并且将当前的页码值以index参数的形式传到父组件，父组件利用v-on:change-page='changePage'监听到子组件传来的change-page，调用父组件中的changePage方法，在这里完成 “子组件数据传到父组件” 这件事～ this.curPage = index; 这句就将子组件里的点击的那个数字赋值给curPage了，这个curPage是在父组件的data里定义的～～吼吼，就是这么个过程～～
v-for循环中常用的$index、$key也不支持了。
不支持双向绑定啦～v-bind的.once .sync都删掉啦！props里传进来的data值是不可变的！！而且还需要验证～有两种方式会改变props：

定义一个局部的data属性，将props的初始值作为局部数据的初始值传入：

   props: {
        navs: {         // 从父级传来的navs
            type: Array
            , default: function(){
                return {}
            }
        }
    }
    , data: function(){
        return {    // 这里利用传来的navs来设置初始值cur
            cur: this.navs[0].en_name
        }
    }

定义一个computed属性，里面可以定义一些属性从props的值计算得出：

    props: {
        dataNum: {       // 传进来的内容总数
            type: Number
            , default: 100
        }  
        , each: {         // 单页的个数
            type: Number
            , default: 10
        }
    }
    , computed: {
        totalPages: function(){      // 计算得出总页数，根据父组件传进来的值的不同得到不同的页数
            return Math.ceil(this.dataNum / this.each) || 0
        }

用的多了果然觉得顺手多了。。。还是要继续学习～～～最近终于弄明白了原型、原型链还有闭包，接下来要复习一些算法和基础知识～～～回了学校还要写论文，时间真的是不够用。。。不过想到要回家了还是忍不住小激动～今天把上线的所有需求改完，最近一版的工作就告一段落了，看小哥还在学vue2.0改版的内容，我也不好闲着，写完我也去看看。。。同志们共同进步呀～

发表于 2016-12-15 16:33 叫我爱运动小姐阅读(779) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部