学习计划

注：

• 早(7:00-11:00)
• 午(13:30-16:00)
• 晚(19:00-23:00)

第一周

知识整理：

• Vue核心：用模板的方式进行一系列的编译，有自己的核心库会编译模板，然后会渲染DOM

• 数据 -> ViewModel核心库-> 视图

• 数据绑定：数据与视图渲染之间的关系

  • React：单向数据绑定，通过事件event触发state的更改导致视图变更

  • Vue：双向数据绑定

    • 通过事件event触发state的更改导致视图变更
    • v-model机制可以完成视图变化导致state/data变更

• 数据流：就是数据流淌的方向，父子组件中数据按照什么方向流动

  • React和Vue都是单向数据流，父组件传递state给子组件作为props
  • 子组件不能props变更导致父组件的state变更
  • 只能是父组件的state变更导致子组件的props变更

• 组件逻辑的本质: 是一个对象，里面有很多特定的属性

• 为什么要用data? 每次组件实例时先执行data()返回一个函数来保证数据的引用是唯一的

• 组件化是抽象了一个小型，独立，可预先定义配置的，可复用的组件

• 组件最大的作用是独立开发，预先配置，为了更好的维护和拓展

• 组件的嵌套形成了一个组件树

• 根组件的本质是一个对象，createApp()执行的时候需要一个根组件，所以执行createApp({})里面至少放一个对象

• 应用实例主要是用来注册全局组件

• 组件实例：每个组件都有自己的组件实例，一个应用中所有的组件都共享一个应用实例

• 无论是根组件还是应用内其他的组件，配置选项，组件行为都是一样的(生命周期函数)

• 生命周期：组件是有初始化过程的，在过程中，Vue提供了很多每个阶段运行的函数

• 生命周期：函数会在对应的初始化阶段自动运行

• 虚拟节点：能更高效的进行DOM节点的渲染

• 关于前端MVC：

  • Model：需要管理视图所需要的数据，数据与视图的关联
  • View：管理HTML模板和视图渲染
  • Controller：管理事件逻辑

• MVVM：MVVM解决了驱动不集中，不内聚的方式，更加解决了视图与模型之间完全隔离开来的一种关系，从而演变成MVVM的形式，将ViewModel隔离出来，剩下M data 和 V view供开发者使用，更加说明vue是只关注于视图渲染

• ViewModel里有收集依赖，模板编译，数据劫持等重要方法

• 模板：Vue提供一套模板编译系统，基本是开发者写的template，然后分析它将HTML字符串变成AST树，把表达式/自定义属性/指令等转化为新的原生的HTML，把JS写法的HTML模板遍历出来后形成虚拟DOM树节点，最后根据虚拟DOM树变成真实DOM树渲染到页面上

• 指令：模板应该按照怎样的逻辑进行渲染或绑定行为

重难点：

实例的生命周期过程：

• 创建实例并挂载：app = Vue.createApp(options); app.mount(el)
• 执行完后初始化事件和生命周期，实例对象身上有默认的一些生命周期函数和默认事件
• beforeCreate阶段
• 初始化，数据注入，整理好跟视图相关的响应式开发相关特性(初始化data/method)
• created阶段

• 判断是否有模板：编译模板，把data对象里面的数据和Vue语法写的模板编译成HTML

  • 有：编译模板至渲染函数
  • 没：编译el的innerHTML至模板
• 挂载之前执行beforeMount阶段
• 创建app.$el(真实的根节点)并添加至el
• mounted阶段

• 已挂载状态监听数据是否存在变化

  • 有变化，虚拟节点对应补丁重新渲染更新
• beforeUpdate阶段
• 更新完之后到updated阶段
• 调用app.unmount()方法后会销毁组件

• 销毁组件经历两个阶段：

  • beforeUnmount阶段
  • unmounted阶段

第二周

第三周

第四周