Vue踩坑之记一次很傻的错误-data内的变量命名

最近在用Vue制作内部系统写一个通用组件时在用watch方法监听变量时，发现无论如何也监听不到变量。
具体的代码如下：

在测试后发现无论怎样改变传入的this.$props.detialData，子组件的_detialDatas都不会改变其值。并且在控制台中也没有出现任何错误。最先想到的就是watch中的赋值操作可能没有被执行，毕竟Vue是数据驱动的嘛，如果页面渲染没有改变，那么一定是变量的值没有被更新。于是便加上了打印语句。

......
  watch: {
    detialData(newval, oldval) {
      this._detialDatas = newval;
      console.log(this._detialDatas);
    }
  },
......

结果控制台中，顺利地打印出了每次变化的值。这就让人郁闷了…变量明明已经改变了但是页面上渲染的部分就是没有更新，并且控制台也没有报错。唯一可以确定的就是子组件的_detialDatas没有被监听到。那么在束手无策的时候，只能从created开始注释了。

当注释掉之后，控制台突然报出警告了。说是_detialDats没有被定义，但是在渲染过程中被使用了。这下问题就出来了，明明已经在data中定义过了，现在却报出没有被定义。那么这就说明我定义在data中的变量_detialDatas没有被监听到。

在求助官方文档之后，发现原来data中的变量是不能以_或者$开始的，这么定义的变量不会被监听。官方文档定义那么为什么一开始又没有报错呢？这是因为最初在created()方法中把_detialDatas挂到实力上了，所以后面就不会报出未定义的错误了。

这是一个十分简单并且很傻的错误了，如果在最初好好翻阅文档应该就可以避免了（所以阅读文档还是很重要的）。而至于为什么会采用_的方法呢？那是因为以前在Python中，类的私有变量默认采用下划线开头的方式进行命名的（捂脸）。