First, the basic declaration of object

const obj = { key: 'value' } || { 'key': 'value' }; / / value obj. Key | | obj [' key '] / / 'value'Copy the code

[1] When the key value matches the identifier (letter, $, _, beginning), the key is equal with or without quotation marks, and equal values are overwritten

const obj = {key: 'value', 'key': 'valule}
// {key: 'value'}
Copy the code

[2] When the key value is a common number, the key is equal with or without quotation marks, and equal values will be overwritten

Const obj = {1: 'value', '1': 'value'} // developer tools print keys without quotesCopy the code

[3] When the value of key is a number in scientific notation, the situation is different

const obj = {1e2: 'value', 100: 'value'}
// {100: 'value'}
Copy the code

Because key is a number, toString() is used to convert it toString

1e2.toString() // 100
Copy the code

Referring to the situation of [2], the two keys are the same and are overwritten. If you put quotes around 1e2, then one is a 100 number and the other is a ‘1e2’ string, and the two keys are not equal

const obj = {'1e2': 'value'. 100: 'value'}
// {100: 'value', 1e2: 'value'}
Copy the code

[4] When the key is not an identifier, quotation marks must be used, otherwise the object declaration will fail

const obj = {1-1: 'value', -27test: 'value'}
// Uncaught SyntaxError: Unexpected token '-'
const obj = {'1-1': 'value', '-27test': 'value'}
// {1-1: 'value', -27test: 'value'}
Copy the code

Next, we illustrate the exception behavior of objects in Taro2

Declare a non-DOM object

const object = {key: 'value'}
Copy the code

Taro2 behaves normally when declaring an object of type DOM

Const object = {key: <View> dom</View>}Copy the code

The console will say, ‘Please provide defaultProps for the component to improve the rendering performance for the first time! ‘When the key is quoted, Taro2 compiles normally and the page renders normally

Const object = {'key': <View>Copy the code

In Taro2, you need to quote the key if you want to use object to handle DOM logic. In Taro3, neither the class nor the hooks have this problem