核心思想不同
组件写法不同
Diff算法不同
响应式原理不同
指的是Model-View-ViewModel,我们可以看到MVVM架构和MVC架构的区别在于有一个ViewModel部分,首先我们要知道在已经有了MVC架构的时候,为什么还要衍生出MVVM架构,这是因为View中很多控件的数据类型和Model中的属性不相同,例如Model中的时间数据可能是一串数字,View想要展示成日期的格式,这就需要一种转化,这个转换如果放在View不合适,因为View中不应该出现逻辑代码,放在Model中也不合适,这回导致Model臃肿庞大,因为这种问题的存在诞生了ViewModel,这一层可以帮助View转化为相应的数据给Model或者从Model中转化成View可以显示的内容。
vue中的MVVM
M:模型(Model) :data中的数据
V:视图(View) :模板代码
VM:视图模型(ViewModel):Vue实例对象
VM对象(VM) 的data(M)中所有的属性最终会出现在VM对象身上
而VM身上所有的属性和原型proto上的所有属性全都能在模版代码(V)上通过语法直接使用
声明式与之相对应的是命令式,命令式指的是通过DOM操作一步步把网页变成想要的样子,而声明式则是只需要通过状态去形容最后的网页长什么样子即可。
组件化指的是尽可能的将页面拆分成一个个较小的、可以复用的组件,这样让我们的代码更加方便组织和管理,并且拓展性页更强。
React的单向数据流指的是数据主要从父节点通过props传递到子节点,如果顶层某个props改变了,React会重新渲染所有的子节点,但是单向数据流并非单向绑定,React想要从一个组件去更新另一个组件的状态,需要进行状态提升,即将状态提升到他们最近的祖先组件中,触发父组件的状态变更,从而影响另一个组件的显示。单向数据流的好处是能够保证状态改变的可追溯性,假如,父组件维护了一个状态,子组件如果能够随意更改父组件的状态,那么各组件的状态改变就会变得难以追溯。
概念: 每个vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。详细来说,就是Vue实例从开始创建,初始化数据,编译模板,挂在dom->渲染,更新->渲染,卸载等一系列过程,我们称这是vue的生命周期,各个阶段有相对应的事件钩子
vue2
生命周期 | 描述 |
---|---|
beforeCreate创建前 | 刚初始化了一个空的VUE实例对象,这时它只有默认的一些生命周期和默认的事件,其他东西都尚未创建 |
created创建后 | 组件实例已经完全创建,属性也绑定,data和methods都已经被初始化好,但真实 dom 还没有生成,$el 还不可用 |
beforeMount载入前 | 在挂载开始之前被调用, 在此函数执行时,模板已经在内存中编译完成,但尚未挂载至页面,此时页面还是旧的, 相关的 render 函数首次被调用 |
mounted载入后 | el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子, 表示我们的整个VUE实例已经初始化完毕,这一阶段一个VUE实例已经完全成熟,是我们实现方法、过滤器等操作的最佳阶段。此时组件已经脱离创建阶段,进入运行阶段 |
beforeUpdate更新前 | 这一阶段产生在 mounted 中,与页面形成了一个循环的交互,但页面中显示的数据还是旧的,此时data数据是最新的,不过页面与最新的数据尚未同步。组件数据更新之前调用,发生在虚拟 DOM 打补丁之前 |
updated更新后 | 组件数据更新之后, 页面与data数据已经保持同步,页面显示内容都是最新的了 |
activited | keep-alive 专属,组件被激活时调用 |
deactivated | keep-alive 专属,组件被销毁时调用 |
beforeDestory销毁前 | 组件销毁前调用, 执行时VUE实例已经从运行阶段进入销毁阶段,实例中的data、methods以及指令、过滤器等都还处于可用状态,还未真正执行销毁过程 |
destoryed销毁后 | 组件已经被完全销毁,此时组件中所有的data、methods以及指令、过滤器等都已经不可用,销毁过程执行完毕 |
vue3
选项式 API | Hook inside setup |
---|---|
beforeCreate |
Not needed* |
created |
Not needed* |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeDestroy |
onBeforeUnmount |
destroyed |
onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
activated |
onActivated |
deactivated |
onDeactivated |