第二种通过[]获取
那什么时候用点获取什么时候[]呢，可以在不同场景使用
两个的相同点：都是获取对象属性值
不同点：
1 [ ]运算符可以使用字符串变量的内容作为属性名，点运算符不能
普通常量赋值的时候可以用点运算符，其他可以用[]运算符，
代码如下:
这细微的差别就会影响到程序的结果。
代码如下:
这些颜色不仅作用于那些直接包含在<body>标签里的内容，还将作用于嵌套在body元素内的所有元素。
id属性就像一个挂钩，它一头连着文档里的某个元素，另一头连着CSS样式表里的某个样式。
document.getElementById("purchases")这个调用将返回一个对象，这个对象对应着document对象里的一个独一无二的元素，那个元素的的id属性值为purchases。其实，文档中的每个元素都是一个对象。利用DOM提供的方法能够得到任何一个对象。getElementsByTagName返回一个数组，即使整个文档里只有一个元素，也返回一个数组。
示例：
显示信息都是object，getElementByClassName也返回一个具有相同类名的元素数组，获取和设置属性getAttribute object.getAttribute(attribute)。
注：getAttribute方法不属于document对象，它只能通过元素节点对象调用。
例子：
对象中有get和set方法，在读取和设定值的时候触发。vue中的数据绑定就是通过这个来实现的。
作用：
(1). 在对象内属性嵌套层级过多时，可以直接在对象下读取到对应属性，简化调用；
(2). 在get时可以任意设置属性名，可以不暴露组件内部属性名。
作用：
(1). 在对象内属性嵌套层级过多时，可以直接在对象下设置到对应属性，简化层级；
(2). set方法内的逻辑在赋值时会自动执行，可以监听属性值的改变
作用：
set方法可以监听对应属性值的改变，vue的数据动态绑定就是通过这个方法实现的，监听到vue实例中的data属性发生改变时，在set方法中触发模版重新渲染逻辑。
作用：
和方法1直接在对象中设置效果和原理相似
