如何写出高效的 Vue 代码

开讲之前我先简单的自我介绍一下，本人自喻：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

最后

最后，我留下两个问题供大家思考。

1. data选项怎么不是一个对象，而是一个返回对象的方法？
2. vue中是如何实现监听数组的变化？