vue学习
什么是vue
- 轻量级
- 渐进式
- 双向数据绑定
vue的兼容性
- IE8 及以下版本不兼容
vue的核心特点
- 响应的数据绑定
//传统的js操作页面：获取元素+处理业务逻辑
//响应式操作页面：date数据使用{
{}}在页面上绑定，数据变了，页面也会随着渲染
- 可组合的视图组件
//一个页面可以由多个组件组合而成
//组件可以被多个页面复用
//组件可以嵌套引入，也就是说组件可以引入其他组件
//步骤
/*
1、引入组件
2、注册组建
3、组件标签添加
*/
- 虚拟DOM
//真实dom渲染影响js的运行性能：时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM节点，这样就造成了很大程度上的资源浪费
//虚拟dom：利用在内存中生成与真实DOM与之对应的数据结构，当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上
- MVVM模式(双向数据绑定)
/*
M：Model数据模型：数据
V：view 视图模板：用户界面
vm：view-Model：视图模型：逻辑
*/
//双向数据绑定：当数据发生改变—自动更新视图
/*
vue是如何实现双向数据绑定的：
利用Object.definedProperty中的setter/getter代理数据，监控对数据的操作
*/
- 声明式渲染
//允许采用简洁的模板语法来声明式的将数据渲染进 DOM，初始化根实例，vue自动将数据绑定在DOM模板上
/*
声明式渲染与命令式渲染区别：
声明式渲染：所谓声明式渲染只需要声明在哪里，做什么，而无需关心如何实现
命令式渲染：需要具体代码表达在哪里，做什么，如何实践
*/
vue和其他其他框架的对比
- React
/*
相似处：
1、使用虚拟dom渲染
2、响应式
3、组件化
4、支持native的方案，React的RN，vue的Wee下
5、都支持SSR服务端渲染
6、都支持props进行父子组件间的通信
*/
/*
区别：
1、数据绑定：vue实现了数据的双向数据绑定，react数据流动是单向的
2、virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3、state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理（如果要操作直接this.xxx）
4、组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件
*/
- angular
/*
1、性能方面：vue快于angular
2、大小方面：vue小于angular
3、灵活性：Vue 相比于 Angular 更加灵活
*/