vue介绍-渐进式框架/虚拟DOM/MVVM模式/声明式渲染

责编:menVScode 2017-11-05 21:57 阅读(1523)

        1、渐进式框架Vue

        Vue是构建用户界面的渐进式框架,只关注视图层(view);

        2、vue中两个核心点

        响应的数据绑定

        当数据发生改变,自动更新视图。内部利用Object.definedProperty中的setter/getter代理数据,监控对数据的操作。由于Object.definedProperty不兼容IE8浏览器,所以Vue不兼容IE8及以下浏览器。

        组合的视图组件

        ui页面映射为组件树;划分组件可维护、可重用、可测试。  

QQ截图20171105201853

        3、虚拟DOM

        运行js的速度是很快的,大量的操作DOM就会很慢。时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM节点,这样造成了很大程度上的资源浪费。

        利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。

过程

        首先是html模板/字符串模板/render函数创建出来的模板,进行编译,调用Render函数,把模板中的元素抽离出来,形成一个虚拟DOM树,然后创建好真实的DOM树,最后呈现在页面中。

QQ截图20171105204853

        当数据发生改化时,能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

        4、MVVM模式

        M:Model -> 数据模型

        V:view -> 视图模板

        vm:view-Model -> 视图模型

QQ截图20171105205854

        5、Vue实例

        vue实例:每一个应用都是通过Vue这个构造函数创建根实例启动

new Vue( 选项对象 )

        需要传入现象对象,对象包涵挂载元素、数据、模板、方法等。更多方法请参见官网api。

el:挂载元素选择器   String | HtmlElement
data:代理数据         Object | Function
methods:定义方法  Object

        vue代理data数据:每个Vue实例都会代理data对象里所有的属性,这些被代理的属性是响应的。新添加的属性不具备响应功能,改变后不会更新试图。

        vue实例自身的属性和方法:暴露自身的属性和方法,以$开头,比如$el、$data...

        6、声明式渲染

        声明式:只需要声明在哪里(where)做什么(what),而无需关心如何实现(how)。

        命令式:需要以具体代码表达在哪里(where)做什么(what),如何实现(how)。

        例子,求数组中每一项的倍数。

        命令式,使用for循环拿出每一项,然后求值完成后,再放入到另一数组中。

var arr = [1,2,3,4,5];
var newArr = [];
for(var i=0; i<arr.length; i++){
    newArr.push(arr[i]*2);
}

        声明式,使用map方法,关注如何求值。

var newArr = arr.map(function(item){
  return item*2
});

        vue声明式渲染:初始化根实例,vue自动将数据绑定在DOM模板上。

标签: vue MVVM
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码