vue.js的使用总结

最近公司要求使用vue.js开发一款PC端的应用，大约用时4个月完成，在此以前只是了解过vue.js，在项目完成后对vuejs的相关内容也有了大体的了解，为了增强自身的记忆，对vue的相关知识进行总结梳理，方便之后的开发。若有不足之处请各位道友批评指正。 基础篇： 先上张xmind思惟导图

注：vue的基本知识内容比较多，此处总结本身认为在vue中比较难理解和重要的知识点 1. vue主要优势 a.没有的复杂的DOM操做：由react发扬光大的虚拟DOM概念已经成为前段开发中比较火的技术。vue框架固然也不会落后了。 b.优雅的数据处理： 双向绑定的数据处理延续了angular最大的优势，而且没有angular中烦人的$scope（自认为） c.官方文档通俗易懂：中文文档写的很是棒（这要感谢咱们的尤大神）

2.vue的安装和基本API vue的安装须要用到vue-cli,具体步骤请参照国vue官方文档(cn.vuejs.org/v2/guide/in…) vue的基本API： 指令：v-bind v-model v-text v-html v-for v-if v-show v-click ...这些最基本的指令须要知道它们的做用和使用方法 生命周期函数：vm.forceUpdate vm.destroy 全局的API：Vue.extend Vue.nextTick Vue.set Vue.delete Vue.directive..... 模板必备的函数和属性: data props propsData computed methods watch 详细api请参照

3.vue实例与生命周期 咱们能够把vue的整个应用都当作一个vue的实例:

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  //vue实例建立
  created: function () {
  },
  //vue挂在DOM
  mounted:function(){
  },
  //vue中数据改变后从新渲染
  updated:function(){},
  //vue实例销毁
  destory:function(){}
  .....
})
复制代码

4.vue的组件（全局和局部） 注册vue的组件的方法有两种为全局注册和局部注册。全局组件减小的代码的重复率，方便他人阅读，可是他知足不了一些特殊的需求，而局部组件可以补足这个短板。 全局组件：在建立vue实例以后用Vue.component(tagName, options)来注册个全局组件。若是使用的是.vue文件注册全局组件能够建立个文件夹，将.vue文件放入文件夹中，新建index.js文件，在index.js文件中添加如下代码:

//导入你须要注册的全局组件
import MyTest from './test.vue'
// 这里是重点
const Loading = {
    install: function(Vue){
        Vue.component('Test',MyTest)
    }
}

// 导出组件
export default Test
复制代码
复制代码

而后在入口文件main.js中引入你所定义文件夹的位置(假设为components/test)

import Vue from 'vue'
import App from './App.vue'

// 引入element-ui组件
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

// 引入自定义组件。index.js是组件的默认入口
import Test from '../components/test'
Vue.use(Test );

Vue.use(ElementUi);
new Vue({
  el: '#app',
  render: h => h(App)
})
复制代码

全局组件注册完毕 **局部组件:**能够经过某个 Vue 实例/组件的实例选项 components 注册仅在其做用域中可用的组件.

5.vue中的computed（计算属性）和watch（侦听器） computed计算属性，用来改变咱们某个变量，已达到咱们所要的值。例:

<div id="example">
  <p>Original value: "{{ val}}"</p>
  <p>Computed value: "{{ newVal }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    val: 'test'
  },
  computed: {
    // 计算属性的 getter
    newVal : function () {
      // `this` 指向 vm 实例
      return val+val
    }
  }
})
复制代码

在这个例子中利用methods也能获得相同的结果，但computed有个缓存的特性（缓存了初次获得的newVal的值，只有当newVal值再次改变时才会触发计算）减小了内部的运行次数。

watch侦听器Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变更：侦听属性（监听某个值（能够是任何类型的值），当值变化时执行watch中的函数）。 **watch与computed比较(watch)优势:**watch 选项提供了一个更通用的方法（watch会执行回调），来响应数据的变化。当须要在数据变化时执行其余操做是watch更适合。 **watch与computed比较(computed)优势:**当你有一些数据须要随着其它数据变更而变更时，很容易滥用watch。此时，更好的作法是使用计算属性而不是命令式的 watch 回调。 例子以下:(cn.vuejs.org/v2/guide/co…)

原理篇

原理篇 本章是以上一章为基础上来深刻理解vuejs的设计思想， vue中比较出彩的是虚拟DOM，响应式数据数据操做（数据双向绑定）以及丰富的生态库（vue-router vuex iview....）。 1.vue中的响应式数据 在数据双向绑定这个理念出来以前，前端中都是使用jQuery或原生js操做DOM来实现数据变化。这不只实现过程麻烦，也对页面的性能有很大的影响。vue框架中的核心理念就是响应式，所以了解响应式的原理能够帮助咱们解决vue中遇到的大部分问题，也能加深咱们对vue的了解。

1. 原理 vue响应式原理是靠Object.defineProperty实现的 这个方法会在对象上添加新的属性，或者修改对象上的属性并返回这个对象。详细能够查看MDN Object.defineProperty(obj,prop,descriptor) obj要在其上定义属性的对象。 prop要定义或修改的属性的名称。 descriptor将被定义或修改的属性描述符
2. 实现 在New vue()建立后，数据初始化开始，使用Object.defineProperty方法实现响应式 第一步先要遍历vue data中全部的变量

function observer (value) {
    if (!value || (typeof value !== 'object')) {
        return;
    }
    
    Object.keys(value).forEach((key) => {
        defineReactive(value, key, value[key]);
    });
}

复制代码

第二步将每一个变量实现响应式
复制代码

Object.defineProperty(obj, key, {
    //key data中定义的数据
        enumerable: true,
        configurable: true,
   //数据的读取时调用
        get: function reactiveGetter () {
            return val;         
        },
   //数据的改变时调用
        set: function reactiveSetter (newVal) {
            if (newVal === val) return;
            cb(newVal);
        }
    });
}
复制代码

感兴趣的同窗能够本身试着实现一个响应数据 依赖收集追踪 在vue中数据的变化会触发视图更新，视图变化会同时改变数据。这种状况看似是响应式的所有，但有种状况，当data中的某个数据不用显示在视图上而且他会不断的变化。这时若是视图不断的更新显然不合理，咱们须要可以判断某个数据的变化是否有必要更新视图。

2.vue中实现Virtual DOM过程 Vue中 的虚拟DOM操做是其核心概念之一，其实质就是将vue render函数转化成Vnode节点。而后用JavaScript中对象的形式表示，以JavaScript中对象的属性来描述vnode节点。

1. 获取Vue 组件（假设以下组件）

<template>
  <p class="demo" v-if="isShow">
    This is a span.
  </p>
</template>
复制代码

2. 解析vue组件（转换后）

{
    tag: 'p',
    data: {
        /* 指令集合数组 */
        directives: [
            {
                /* v-if指令 */
                rawName: 'v-if',
                expression: 'isShow',
                name: 'show',
                value: true
            }
        ],
        /* 静态class */
        staticClass: 'demo'
    },
    text: undefined,
    children: [
        /* 子节点是一个文本VNode节点 */
        {
            tag: undefined,
            data: undefined,
            text: 'This is a span.',
            children: undefined
        }
    ]
}
复制代码

内部的具体实现过程可参见《实现 Virtual DOM 下的一个 VNode 节点》。