vue基础全——vue简单说

版权声明:本文为博主原创文章,随便转载,出处注明一哈 https://blog.csdn.net/u012551928/article/details/88861273

概念

Vue.js:基于MVVM模式实现的,一套用于构建用户界面的渐进式框架。
高级功能:

  • 解耦视图
  • 可复用组件
  • 前端路由
  • 状态管理
  • 虚拟DOM

MVVM模式

  • MVVM:Model-View-ViewModel缩写,即模型-视图-视图模型。整这些虚的,说说能干啥:模型:后台传递过来的数据;视图:显示的页面;视图模型:MVVM的核心,给前面两者(模型、视图),连接view和model的桥梁。
  • MVVM中,视图和模型都比较腼腆,不直接通信,通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定,如下图:
viewModel: 数据绑定
viewModel: dom事件监听
model:数据
view:视图

关于更多MVVM,MVC和MVVM的区别,MVVM框架,Angular原理,VUE实现原理,点击链接

Vue的实现原理

观察者-订阅者(数据劫持):使用Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的。
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
详细理解:猛戳这里
在这里插入图片描述

Vue的生命周期:

beforecreate:el 和 data 并未初始化
created:完成了 data 数据的初始化,el没有
beforeMount:完成了 el 和 data 初始化
mounted:完成挂载
beforeUpdate:数据修改前
updated:数据修改后
destroy:销毁前,解绑监听
destroyed:销毁后
详解:猛戳这里


后续继续更新。。。。

猜你喜欢

转载自blog.csdn.net/u012551928/article/details/88861273