[Vue warn]: Property or method index is not defined on the instance but referenced during render

8月份开始团队使用 React，所以 Vue 很久没接触了，今天同事问我一个问题，发出来记录下

问题重现

一个输入键盘，keyUpHandle 为该触发事件函数，绑定 $event 和 index，在输入的时候 index 一直报错，虽然不影响功能实现，但洁癖看到红色报错还是很不爽的，一起来看吧！

图中看到 “「Property or method index is not defined on the instance but referenced during render」” 报错，翻译过来就是 “属性或方法索引未在实例上定义，但引用了”，打开 Chrome dev，根据报错定位到该行代码

可以看到**「 vm.index 」**为 undefined

小插曲

插段关于 JavaScript 的两个特殊数据类型：undefined 和 null，第一次碰见 undefined 的时候，尝试用 Java

if(obj == undefined){// doSomething...
}

自作聪明了，查询后得知 JavaScript 写法是这样的：

if(typeof(obj) == “undefined”){// doSomething...
}

这是为什么捏，为什么是这种写法捏，JavaScript 为什么偏偏多出了这种写法？我们知道在大多数计算机语言内，有且仅有一个表示"无"的值， C 是 NULL，Java 是 null，Python 是None，Ruby 是 nil，为什么 JavaScript 表示“无”的值是 undefined 和 null？
JavaScript 诞生之初，Brendan Eich 根据 C 传统设计 null 自动转成 0，但这个在 Java 里是一个对象，由于 JavaScript 数据类型分为「原始类型」和「复合类型」，Eich 觉得 “无” 最好不是一个对象，而且 JavaScript 一开始并没错误处理机制，数据类型不匹配都是直接默认转换或者失败，这样不容易发现错误，从而设计了 undefined。

关于 undefined

undefined 表示未声明或已声明但未赋值的变量或不存在的对象，函数没有返回值时，默认返回 undefined，判断是不是 undefined 使用 typeof 函数，其返回的字符串包括如下：

“number”，“string”，“boolean”，“object”，“function”，“undefined”

回到正题，错误提示 index 以声明但未赋值，Vue 里是有关于这段描述的，也是最独特的的特性之一，「非侵入性的响应式系统」，就是深入响应式原理啦～～
「Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明根级响应式属性，哪怕只是一个空值」，ok，到这里，问题就解决了，既然说了可以声明空值，那就声明一个空值！

data() {return{index: ''}
}