写文章
7

vue学习笔记五

注：上述笔记是报名某培训机构vue六天集训班的笔记，笔记五是对上述笔记的总结

vue的三大特性

渐进式

vue仅控制页面中指定的区域，其他的区域不会收到vue的影响，于是分区域的改造工程，以降低改造成本和风险

组件化

组件是vue中的基本功能单元，每个组件包含功能和界面

组件是一个独立的功能单元，管理自身的状态，接收外来的属性，对需要外部处理的位置使用事件

  1. 组件可以嵌套使用，因此最终会形成一棵组件树

  2. 组件间的数据传递是自上而下的单向数据流

  3. 组件通过事件，向父组件发出通知

每个组件都有自己的生命周期，从组件诞生到销毁，经历的每个阶段都会有相应方法被调用：

  1. beforeCreate: 执行1次，组件刚创建时被调用，此时还未提升配置中的成员
  2. created: 执行1次，组件提升了配置中的成员后被调用
  3. beforeMounted: 执行1次，组件已完成对模板的编译，但还未反映到真实的DOM中
  4. mounted: 执行1次，组件已被渲染到真实的DOM中，此时界面已呈现，建议在该 方法中书写副作用代码，以避免阻塞页面呈现
  5. beforeUpdate: 执行多次，每当组件需要重新渲染，执行该方法，此时，数据已 更新，但界面还未更新
  6. updated: 执行多次，此时，数据和界面都已更新
  7. beforeDestroy: 组件销毁之前执行
  8. destroyed: 组件销毁之后执行

响应式

vue实例可以响应数据的变化，当属性或状态变化时，组件会重新渲染

在组件树中，组件的重新渲染是从某个组件出发（状态变化），依次影响到后续组件

vue之所以能实现响应式，根本原因，是它将配置中的状态提升到了vue实例中，使得对状态的赋值和取值可以被监控

vue-router

vuex

存储和处理复杂共享数据的仓库

  • 配置

    • state：初始状态
    • mutaions：可配置多个用于改变状态的无副作用方法
    • actions：可配置多个用于处理副作用的方法
    • modules：模块化配置
    • namespaced：是否开启命名空间，以防止多个模块的名称冲突
    • getters：用于配置仓库中的计算属性，类似于组件的computed

  • 使用

  • 在组件中使用

展望vue3.0

  • 函数式组件
  • 与 TypeScript 更好的结合
  • 组件生命周期变化
  • 是进化还是革命
posted @ 2020-09-04 16:34  ZenlenTim  阅读(186)  评论(0)    收藏  举报
分享到：