Vue.js概念

2018-10-27  本文已影响0人  5jing

一个轻量级的mvvm框架,gzip后大小只有20k+
vue.js更容易上手,学习曲线平稳
借鉴了angular的指令和react的组件化

vue的核心思想

  • 数据驱动
  • 组件化的前端开发
什么是数据驱动
  • 数据驱动DOM变化, DOM 是数据的一种自然映射。vue.js里面,只要改变数据,vue.js通过Directive指令,去对DOM做一层封装。当数据发生变化,会通知指令修改对应的DOM。
  • 修改视图的时候,vue.js监听到这些变化,从而改变数据
  • 通过以上两个步骤实现数据的双向绑定


数据响应原理

一份数据a.b,在一个vue对象的实例化过程中,会给a,b这份数据通过ES5的Object.defineProperty属性添加了一个getter和setter。同时vue.js会对模板做编译,解析生成一个指令对象,图中就是v-text指令。每一个指令对象都会关联一个watcher,当我们对指令a.b做求值的时候,就会触发他的getter,就会把依赖搜集到watcher里面,当我们再次改变a.b的时候,就会触发他的setter,会通知到对应关联的watcher,watcher会再次对a.b求值,计算对比新旧值,当发现值改变了,watcher就会通知到指令,调用指令的update方法,由于指令是对DOM的封装,所以会调用原生DOM的方法去更新视图,这样我们就完成了数据改变到数据更新的自动过程。


组件化

扩展HTML元素,封装可以重用的代码。
vue.js中,每个组件对应一个vue-model,最终生成的vue-model树和DOM树是一一对应的关系。


组件设计原则
上一篇 下一篇

猜你喜欢

热点阅读