开局感慨一下，一转眼玩vue已经三年了。平时都是搬砖搬砖搬砖。。。死循环那种。很少写博客，因为我觉得好像没啥好写的，官方文档写的清清楚楚，明明白白。工作中遇到的问题，大部分在官方文档里能找到答案，如果你不知道，那说明你没有认真看文档，或者看得不仔细！剩下的小部分，文档中找不到的，百度谷歌一定有。咱们都是新人，这行发展这么多年了，你要相信你遇到的问题，早有无数前辈踩过了。em。。。啰嗦了，跑题了！咳咳
那么，开始今天的主题吧！
玩了这么久，代码撸了也有不少了，别人的同事的代码也看过不少。每次遇到bug，自己写的还好，找起来得心应手（找不到的都不是我的代码，小声哔哔）。但也有的时候，会有比较大的组件，代码一多起来，命名就有点蛋疼，都懂的。。。这个时候找起来就，比较坑了！跟别说，要是别人的代码，或者已经离开的同事的代码，那就真的好嗨哟！也许有的朋友，这个时候，就会提示我ctrl+f。嗯，没错，这是个好方法，非常好用（真的）！的确，它能找到你想要找到的任何东西。但是，在一些特殊情况，它能找到，可是却无法帮我们快速定位问题。
举个很简单的例子

<!-- 模块注释 -->
<template>
  <div class="test"></div>
</template>
<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "test",
  props: {},
  components: {},
  data() {
    // 这里存放数据
    return {
      msg: "msg",
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
}
</script>

这段代码，很简单。里面有个msg属性，一眼就能找到。我们要使用他的时候只需要：

this.msg;

这很方便，很好用！niu b。。。
但是就是这种方便，也给我们带来了隐患。大家都知道this是这个组件的实例对象，this下面挂载了很多东西，不仅仅是data里面的属性可以这么拿到，methods里定义的方法也可以直接调用，computed和props也可以。那么问题就来了，当组件代码量足够大的时候，我们无法很快的定位this后面属性的来源。

// 还是上面那个例子
this.msg;
// 你没法在看到这行代码的时候，就能很清楚的知道，这个msg是props里的还是data或者
// computed中的，甚至它可能是一个函数！

这对我们阅读代码，特别是阅读别人的代码，非常不友好。极大的拖慢了排查问题，和修复问题的成本。
那么我们改如何解决这个问题呢？结合我自己的和同事的想法，大致整理了一下。也没有太好的方法，只想到了给变量加上标识（类似命名空间）。
还是上面那个例子：

<!-- 模块注释 -->
<template>
  <div class="test">
    <!-- 这是外部传入 -->
    {{props_msg}}
    <!-- 这是data里定义的 -->
    {{data_msg}}
    <!-- 这是计算属性 -->
    {{computed_msg}}
    <!-- 这是方法 -->
    {{methods_msg()}}
  </div>
</template>
<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "test",
  props: {
    props_msg: {
      type: String,
      default: "props_msg"
    }
  },
  components: {},
  data() {
    // 这里存放数据
    return {
      data_msg: "data_msg",
    };
  },
  // 监听属性 类似于data概念
  computed: {
    computed_msg() {
      return "computed_msg";
    }
  },
  // 监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    methods_msg() {
      return "methods_msg"
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

通的msg我们给他加上一个前缀，很清楚明了，不管你再什么地方，看到它，就能知道她是哪里来的，还有做替换的时候也将会非常方便。不用担心弄错。
当然这里只是举个例子，如果觉得这个前缀太长或者不好看，也可以自己定义规则，这个看个人和团队。
比如：
props：p_msg
data：d_msg
computed：c_msg
methods：m_msg
这只是一个不成熟的想法，如果大家有别的更好的办法，欢迎讨论！

最后分享一个vue组件的模板，希望对大家有用：

<!-- 模块注释 -->
<template>
  <div class=""></div>
</template>
<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  name: "",
  props: {},
  components: {},
  data() {
    // 这里存放数据
    return {};
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
  // @import url(); 引入公共css类
  . {}
</style>
<style lang="scss">
  // @import url(); 引入公共css类
  . {}
</style>