Vue笔记

vue应用结构

组件树和store

vue-router

• 是占位符，放在需要显示路由视图的地方
• 子组件里面的需要配置子路由
• 是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生命周期

1. beforeCreate,
2. created,
3. beforeMount,
4. Mounted,
5. beforeUpdate,
6. updated,
7. beforeDestroy,
8. destroyed

官网图示

注：outerHTML 也就是该DOM及其子元素的标签和文本内容全都显示出来，即取的是它自己和它所有的子元素的HTML
outerText 只输出当前标签内的文本内容，如果标签内有子标签，那么也只输出子标签内的文本内容