开讲之前我先简单的自我介绍一下，本人自喻：flitrue，工作三年有余，在一家不知名的互联网企业担任前端架构师之职。
技术选型问题
近几年前端发展快速，很多同学抱怨学不动了，要回家喂猪。面对前端技术海量的“轮子”，我们犯了“选择困难症”，到底选择哪个技术学习？在实际项目中如何选择技术栈？
对于喜欢不断学习的同学，各种技术都想尝试一下，希望在实际的项目中使用。但是往往举步维艰，还没开始就扼杀在摇篮里了。如果我们每个项目都要选择不同都技术栈，可能我们的同事要疯掉，每个人会的东西不一样，学习能力也不一样，很难在实际中实施。而且，如果我们的项目每个的技术栈都不一样，老板都会疯掉吧，每次招人都需要问到各个技术会不会，有没有用过。发布都项目总得有人去维护，所以这样会提高很多成本，老板不疯才怪。
所以我们在实际开发中，还是要保持一致性。
约束一致性
我相信每个公司都会有一套开发规范，要求每个技术人掌握。具体分为如下两种：
- 技术选型
- 代码规范
技术选型
对于vue项目开发，很多项目都采用vue全家桶（vue + vue-router + vuex + axios …)。创建vue项目最简单的方式就是使用vue-cli脚手架，约定好采用哪些特性（Babel、TypeScript、CSS Pre-processors、Linter等)。
代码规范
在开发中，首先我们要保证项目目录结构的清晰。然后我们还要保证文件夹和文件名命名规范，比如：src/components/Common/公共组件的命名首字母要大写，里面的组件命名统一采用大驼峰命名。
// 项目目录
.
├── README.md
├── babel.config.js # babel配置文件
├── package.json # 依赖配置文件
├── dist # 打包后的项目目录
├── public # 公共资源
│ ├── favicon.ico
│ └── index.html
└── src # 源代码
├── App.vue # 项目入口文件
├── assets # 静态资源
│ ├── images/
│ └── json/
├── components # vue组件库
│ ├── Common # 公共组件
│ └── HelloWorld.vue
├── configs # 配置项
├── less # css预处理文件
├── libs # 工具库
├── main.js # 程序入口文件
├── router.js # 路由配置
├── store.js # 状态管理器
└── views # 业务页面模块
└── Home.vue
除此之外，我们最好约定单个vue组件结构顺序，<template>要位于最上面一层，<script>放在中间位置，<style>放在最后。如果你还想规范一点，可以约定<script>内的选项和钩子函数书写顺序。
// 单个vue组件
<template>
...
</template>
<script>
export default {
name: "",
props: {},
data() {
return {}
},
components: {},
watch: {},
computed: {},
methods: {}
...
}
</script>
<style lang="less" scoped>
...
</style>
当然了，如果我们还想更加严格的规范，我推荐采用eslint进行约束。
如何优化性能
我们都知道浏览器有自动垃圾回收机制(GC)，GC采用标记清除原理，但是我们最好是手动清除占用的内存资源。
<script>
export default {
name: "",
props: {},
data() {
return {
penson: {
name: "flitrue"
age: 18,
sex: "man",
getRealAge() {
return this.age + 10;
}
}
}
},
beforeDestroy() {
this.person = null; // vue实例销毁前手动清除this.person
}
}
</script>
如果我们需要学习高级的性能优化，需要掌握vue源码和浏览器运行机制，所以最终我们还是要学习底层知识，才能彻底掌握性能如何优化。
双向绑定原理
vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。但是Object.defineProperty()不能监听数组中数据的变动。如果还不知道Object.defineProperty()方法的使用，可以查看mdn的详细介绍。
vue利用Object.defineProperty()把内部解耦为三部分：
Observer: 递归的监听对象上的所有属性，当属性改变时触发对应的Watcher
Watcher:当对象的数据值修改时，执行相应的回调函数，更新模板内容
dep：链接Observer和Watcher，每一个Observer对应一个dep，内部维护一个数组，保存与该Observer相关的Watcher
最后
最后，我留下两个问题供大家思考。
data选项怎么不是一个对象，而是一个返回对象的方法？- vue中是如何实现监听数组的变化？
