前言
使用vuejs框架已有两年了，期间大大小小也完成了八九个项目，有新项目开发的，也有老项目重构的。最近下定决心重写这部分文章也是为了给自己理清vuejs的整体架构，同时也希望给新接触vue的朋友一点点帮助。
vuejs基础知识
先上张xmind思维导图
注：vue的基本知识内容比较多，此处总结自己认为在vue中比较难理解和重要的知识点1. vue主要优点a.没有的复杂的DOM操作：由react发扬光大的虚拟DOM概念已经成为前段开发中比较火的技术。vue框架当然也不会落后了。 b.优雅的数据处理： 双向绑定的数据处理延续了angular最大的优点，并且没有angular中烦人的$scope（自认为） c.官方文档通俗易懂：中文文档写的非常棒（这要感谢我们的尤大神）
2.vue的安装和基本APIvue的安装需要用到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.mountvm.mountvm.mountvm.forceUpdate vm.nextTickvm.nextTick vm.nextTickvm.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的了解。
- 原理 vue响应式原理是靠Object.defineProperty实现的 这个方法会在对象上添加新的属性，或者修改对象上的属性并返回这个对象。详细可以查看MDNObject.defineProperty(obj,prop,descriptor) obj要在其上定义属性的对象。 prop要定义或修改的属性的名称。 descriptor将被定义或修改的属性描述符
- 实现 在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节点。
- 获取Vue 组件（假设如下组件）
<template> <p class="demo" v-if="isShow"> This is a span. </p> </template>
- 解析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 节点》。
vuejs相关生态
- 前端路由控制vue-router
- 状态管理插件vuex
- 异步请求插件axiso vue-resource（已停止维护）
- ui组件库（ivew elementui ant-design）
总结
本章主要概述了vuejs但相关知识带你，之后的章节中我会深入的去分析vuejs的各块知识点，并且去解析vuejs生态周边的相关原理。
