demo: https://github.com/saoraozhe3hao/vueDemo

 

常用组件

路由：vue-router

状态管理：vuex

服务器端渲染SSR：nuxt

移动端组件库：Mint UI（饿了么）、vonic、vux （WeUI规范）、京东 NutUI、滴滴 CubeUI、有赞Vant

桌面端组件库：elememt UI（饿了么）、muse-ui（Material Design 规范）、iView（Ant Design 规范）、N3 Components、AT UI（京东）、Ant Design Vue

 

专题：https://www.awesomes.cn/subject/vue

Material Design：谷歌提出的一套界面设计标准

 

element UI

安装：npm install element-ui --save

在main.js中引入：

import'element-ui/lib/theme-default/index.css'//引入element-ui的样式

import ElementUI from 'element-ui'  // 引入 element-ui

安装使用：Vue.use(ElementUI)          // 使用插件

 

VUX

更新nodejs版本
安装vux: npm install vux --save
安装vux-loader: npm install vux-loader --save-dev
在 webpack.base.conf.js 里配置 vux-loader。vux-loader使得组件能按需打包。

 

表单生产 vue-form-making

https://github.com/GavinZhulei/vue-form-making/

http://docs.form.xiaoyaoji.cn/zh/

vue 引入工具库

import moment from 'moment';

Object.definePrototype(Vue.prototype, '$moment', { value: moment });

// 相当于 Vue.prototype.$moment = moment ;

vue实例中使用 this.$moment;

 

组件生命周期

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed

选择vue的原因

学习成本低：国人出品，有很好的中文文档

开发效率高：angular和vue是双向绑定，react是单向绑定

运行性能高：vue和react都不用脏检查，并采用了虚拟DOM，angular需要脏检查

封装更简洁：组件要素（模板、脚本、样式）高聚合(可以写在一个文件里)低耦合(不混写)

开发更友好：react需要写JSX，angular需要写TypeScript，vue都是原生语法

实现更优雅：angular脏检查，react需要setState()，vue重写读写检查器

 

模板语法、computed、watch、methods的使用选择

1、简单关联逻辑，使用模板语法

2、多个属性的变化，都会影响一个属性，使用computed，减少watch

3、计算逻辑需要被重用，使用模板语法 调用 methods

4、一个属性的变化，要改变多个属性，选择使用watch 或 methods（绑定input事件）

5、不需要实时变化 或者 不需要每次变化都处理(例如重置)，选择使用 methods（绑定click事件）

 

Router History 模式

原理：history.pushState({}, 'title', 'path') 时，url会增加/path，但是页面不会刷新

1、Router 配置

new VueRouter({mode:"history",   // 使得 url 中不会出现 #base:"/test"      // 使得 路径前始终有 /test
}

2、webpack 配置

 assetsPublicPath: '/test/'  // 使得引用文件的路径始终有 /test/

3、nginx 配置

    location /test {try_files $uri $uri/ /test/index.html;  // 使得跳到一个路由后 刷新浏览器，能把index.html返回回去root /usr/test/;}

Vue2.0双向绑定的原理 

MVVM框架的三个组成：数据监听器Observer、指令解析器Compile、订阅器Watcher

Observer：Dep是一个订阅发布模块，组件的一个 data 属性对应一个Dep实例；Vue扫描组件的 data ，用Object.defineProperty()给data的属性添加 getter / setter，在setter中触发Dep发布（Dep实例和getter / setter 在一个闭包中）

Watcher：一个组件实例对应一个Watcher实例，在Watcher中触发data属性的getter，在getter中添加Dep订阅

Compile：Compile是一个函数，用于解析模板指令，初始化渲染页面视图（将模板中的变量替换成数据），给每个指令对应的节点绑定更新函数，调用Watcher添加Dep订阅（数据有变动时，收到通知，触发更新函数，更新视图）

从视图交互变化到模型数据变化：解析模板指令时，对 v-model 的节点添加 input 事件处理函数，更新模型数据，进而触发 setter，从而触发Dep发布

监听数组变化：重写 [].__proto__ 里的方法，更改数组后，触发Dep发布