最近在用Vue制作内部系统写一个通用组件时在用watch方法监听变量时，发现无论如何也监听不到变量。
具体的代码如下：
<template>
<div class="wrapper">
{{_detialDatas}}
</div>
</template>
<script>
export default {
props: ["detial-data"],
data() {
return {
_detialDatas: null
};
},
watch: {
detialData(newval, oldval) {
this._detialDatas = newval;
}
},
created() {
this._detialDatas = this.$props.detialData;
}
};
</script>
在测试后发现无论怎样改变传入的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中，类的私有变量默认采用下划线开头的方式进行命名的（捂脸）。
