导语1——vue简单介绍

Vue产生背景

1.近年来前端开发趋势变化&＃xff1a;旧浏览器被淘汰&＃xff0c;移动端需求增加。而 Vue.js 核心是利用ES5的Object.defined.profile。

旧浏览器&＃xff1a;IE5~8&＃xff0c;不支持ES5特性&＃xff0c;利用Object.defined.profile

IE9移动端大部分基于webkit内核&＃xff0c;支持ES5特性

2.前端交互越来越多&＃xff0c;功能越来越复杂

3.架构从传统后台 MVC 向 REST API &＃43; 前端MV* 迁移

传统后台MVC&＃xff1a;前端数据和后台进行交互时&＃xff0c;刷新整个页面&＃xff0c;用户体验差

REST API&＃43;&＃xff1a;利用Ajax与后端REST API进行通讯&＃xff0c;异步刷新前端某个区块&＃xff0c;优化提升体验&＃xff0c;同时把MVC拿到前端来做

PS&＃xff1a;MV*&＃xff1a;包括MVC&＃xff0c;MVP&＃xff0c;MVWM

1.包括&＃xff1a;View&＃xff08;视图&＃xff0c;对应前端的DOM&＃xff09;&＃xff0c;ViewModel&＃xff08;连接视图和数据&＃xff0c;通讯&＃xff0c;观察者&＃xff09;&＃xff0c;Model&＃xff08;数据&＃xff0c;对应前端的Javascript对象&＃xff09;

MVVM框架下View和Model之间没办法通讯&＃xff0c;必须通过ViewModel观察两者变化&＃xff0c;并将其变化反映到另一方那里&＃xff0c;从而实现双向绑定。

2.功能&＃xff1a;

1&＃xff09;针对具有复杂交互逻辑的前端应用

2&＃xff09;提供基础的架构抽象

3&＃xff09;通过Ajax数据持久化&＃xff0c;保证前端用户体验

3.好处

当前端进行数据操作时&＃xff0c;不需要改动整个页面&＃xff0c;只需要改动DOM需要改的那一部分&＃xff0c;不需要刷新整个页面&＃xff0c;只刷新需要改动的那一部分。这对移动端来说是很必要的&＃xff0c;虽然有很多数据被缓存&＃xff0c;但刷新整个页面&＃xff0c;DOM&＃xff0c;js&＃xff0c;css会被重新解析&＃xff0c;这会浪费资源。因此&＃xff0c;移动端经常做成xpa单页应用。在这个基础上就诞生出许多MVVM框架&＃xff0c;像Angular.js&＃xff0c;react.js&＃xff0c;Vue.js。

1.数据驱动&＃xff1a;DOM是数据的一种自然映射

数据响应原理&＃xff1a;数据&＃xff08;model&＃xff09;改变驱动视图&＃xff08;view&＃xff09;自动更新

解析&＃xff1a;假设这里有一个数据 a.b&＃xff0c;在实例化过程中会通过 ES5 的 object.defineproperty() 添加 getter和setter方法&＃xff0c;同时 vue.js 会对模板进行编译&＃xff0c;解析生成一个指令对象&＃xff0c;这里的指令对象就是 v-text &＃xff0c;每个指令都会关联一个 watcher &＃xff0c;当对指令对应的表达式a.b求值时&＃xff0c;就会触发 getter 方法&＃xff0c;此时依赖会升级到对watcher中&＃xff0c;如果再改变 a.b 的值&＃xff0c;就会触发 setter 方法&＃xff0c;会通知到关联的 watcher 。watcher 重新求值&＃xff0c;比较新旧值&＃xff0c;如果值改变&＃xff0c;watcher 会通知对应指令&＃xff0c;指令调用 update 方法&＃xff0c;指令是对DOM的封装&＃xff0c;所以会调用DOM原生方法去更新视图。

2.组件化&＃xff1a;扩展HTML元素&＃xff0c;封装可重用的代码

组件设计原则&＃xff1a;

1&＃xff09;页面上每个独立的可视 / 可交互区域视为一个组件

2&＃xff09;每个组件对应一个工程目录&＃xff0c;组件所需要的各种资源在这个目录下就近维护

3&＃xff09;页面不过是组件的容器&＃xff0c;组件可以嵌套自由组合形成完整的页面