vue应用结构
组件树和store
vue-router
-
<router-view><router-view/>是占位符，放在需要显示路由视图的地方 - 子组件里面的
<router-view><router-view/>需要配置子路由 -
<router-link to="/">是vue封装的路由跳转，本质上是a标签
vuex
vuex流程图
- actions、mutations就像事件，需要dispatch、commit去触发
概念
- state： 存放数据的地方，页面数据最好都统一放在这里。相当于组件中的data
- getters: 也可以理解为属性数据，相当于组件中的computed计算属性
- actions： 通常是处理异步操作的地方，比如请求后端数据，需要在组件内通过
dispatch('actionName',payload)来触发。
actions函数接收两个参数(store,payload)，异步请求数据，再通过store.commit()调用mutation - mutations： 同步修改state中的数据，state中的数据只能通过mutations来修改。通过
commit('mutationName',payload)，在组件内触发或在actions中触发，但一定是同步操作。
mutations函数接收两个参数(state,payload),通过payload中的数据同步修改state - 修改后的数据通过view渲染
- dispatch、commit只接受两个参数，函数名和payload，需要传的数据封装为一个对象通过payload传进来
vue双向绑定原理
vue的双向绑定主要用了数据劫持的方法（angular是脏值检测），通过Object.defineProperty()方法，劫持每个属性的getter和setter，在数据变动时发布消息给订阅者，触发相应的监听回调。
具体参考这里
vue生命周期
- beforeCreate,
- created,
- beforeMount,
- Mounted,
- beforeUpdate,
- updated,
- beforeDestroy,
- destroyed
官网图示
注：outerHTML 也就是该DOM及其子元素的标签和文本内容全都显示出来，即取的是它自己和它所有的子元素的HTML
outerText 只输出当前标签内的文本内容，如果标签内有子标签，那么也只输出子标签内的文本内容
