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

时间:2024-03-23 22:33:18

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

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

问题重现

一个输入键盘,keyUpHandle 为该触发事件函数,绑定 $event 和 index,在输入的时候 index 一直报错,虽然不影响功能实现,但洁癖看到红色报错还是很不爽的,一起来看吧!
[Vue warn]: "Property or method index is not defined on the instance but referenced during render
图中看到 “「Property or method index is not defined on the instance but referenced during render」” 报错,翻译过来就是 “属性或方法索引未在实例上定义,但引用了”,打开 Chrome dev,根据报错定位到该行代码

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

可以看到**「 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: ''
	}
}