### key值
虚拟DOM对比节点是否需要更新，通过key值比较，key值建议不要用随机数或下标，用id值，保持唯一性。
### commit()方法没有返回值
commit()方法没有返回值，在mutations中定义的方法就是用来修改state中的值的，如果要封装一些自己用的方法，在store实例外面用ES5的方式声明。如果在mutations中声明，再通过commit()在另一个mutations中方法中调用，因为commit()没有返回值，所以拿不到这个值。
### let obj1={...obj}
用解构的方式去复制对象，如果被复制对象只有一层，那么两个对象之间没有引用关系。
### splice()的用途
前面watch监听中提到过在特殊情况下无法监听到数组的变化，一是通过下标来更改数组中的数据，二是通过length来将数据清空，对应的解决办法是通过vue的实例方法$set()进行设置，通过splice()来清空数组。
在vuex中，通过下标对数组进行修改无效，此时通过splice()可以进行修改。
### vue中常用的ui框架
pc端：
element-ui
iview
移动端：
mint-ui
vant
cube
antd vue
### mint-ui的使用
①安装：npm install mint-ui -S
②main.js中引入全部组件：
import Vue from 'vue'; import Mint from 'mint-ui'; import "mint-ui/lib/style.min.css"; Vue.use(Mint);
③ui组件直接在根组件App.vue使用：
<h1>css组件</h1> <h3>样式</h3> <mt-button type="default">default</mt-button> <mt-button type="primary">primary</mt-button> <mt-button type="danger">danger</mt-button> <h3>尺寸</h3> <mt-button size="small">small</mt-button> <mt-button size="large">large</mt-button> <mt-button size="normal">normal</mt-button> <mt-button disabled>disabled</mt-button> <mt-button plain>plain</mt-button> <h3>icon</h3> <mt-button icon="back">back</mt-button> <mt-button icon="more">more</mt-button> <h3>自定义icon</h3> <mt-button> <img src="../public/img/01.jpg" height="20" width="20" slot="icon"> icon </mt-button> <h1>js组件</h1> <button @click="toast">toast</button>
④js组件需要引入再使用：
import {Toast} from 'mint-ui';
Toast({
message:"点击我了，操作成功", // 信息
position:"center", // 位置
duration:3000 // 持续时间
});
### mint-ui按需加载-借助babel-plugin-component插件
①安装babel-plugin-component：npm install babel-plugin-component -D
②项目根目录下新建 .babelrc 文件：
{ "plugins": [ [ "component", { "libraryName": "mint-ui", "style": true } ] ] }
③main.js中引入组件并注册（不再使用 import Mint from 'mint-ui';Vue.use(Mint); 这里在main.js中引入所有的组件都可以用，可以在需要该组件的组件中引入，只有当前组件可用）：
import "mint-ui/lib/style.min.css"; import {Button,Header} from 'mint-ui'; Vue.component('my-btn', Button); Vue.component(Header.name,Header);
④根组件App.vue中Header组件使用mint-ui默认的名字作为标签使用，Button组件使用自定义标签名：
<mt-header title="fixed top"></mt-header> <my-btn type="default">default</my-btn> <my-btn type="primary">primary</my-btn> <my-btn type="danger">danger</my-btn>
### vant的使用-有赞
①安装vant：npm i vant -S
②安装自动按需引入插件：npm i babel-plugin-import -D
③根目录下babel.config.js文件中添加plugins配置项：
plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ]
④接着你可以在代码中直接引入 Vant 组件（这里不需要引入css，插件会自动引入）：
import Vue from "vue"; import { Button } from 'vant'; Vue.use(Button);// 自动按需引入插件已经帮我们注册好了
④使用vant的button：
<van-button type="default">默认按钮</van-button> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>
⑤使用icon：
import Vue from "vue"; import { Button,Icon } from 'vant'; Vue.use(Button); Vue.use(Icon);
<van-icon name="success" dot /> <van-icon name="eye-o" info="9" /> <van-icon name="chat-o" info="99+" />
### cube的使用-滴滴
①安装插件：npm install vue-cli-plugin-cube-ui -S（用cmd安装）
②添加cube-ui：vue add cube-ui
Use post-compile?（是否使用后期编译） ----y
Import type（引入类型） ----partly（按需引入）
Custom theme?（自定义主题） ----n
Use rem layout?（rem布局） ----n
Use vw layout?（vm布局） ----n
③App.vue中直接使用：
<cube-button>Button</cube-button> <cube-button type="submit">Submit Button</cube-button>
### element-ui的使用
①安装：npm i element-ui -S
②安装按需引入插件：npm install babel-plugin-component -D
③配置babel.config.js文件，将以下代码粘贴到plugins中（plugins中配置项是一个个数组）：
[ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ]
