• 技术文章 >web前端 >前端问答

    vuejs是什么样的框架

    青灯夜游青灯夜游2021-09-06 17:48:38原创136

    vuejs是一套用于构建用户界面的渐进式JavaScript框架,Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。

    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue.js 也能驱动复杂的单页应用。

    Vue.js的优点

    为什么要使用Vue.js

    随着前端技术的不断发展,前端开发能够处理的业务越来越多,网页也变得越来越强大和动态化,这些进步都离不开JavaScript。在目前的开发中,已经把很多服务端的代码放到了浏览器中来执行,这就产生了成千上万行的JavaScript代码,他们连接着各式各样的HTML和CSS文件,但是缺乏正规的组织形式。这也是为什么越来越多的前端开发者使用JavaScript框架的原因,目前比较流行的前端框架有Angular、Reac、Vue等。

    Vue是一款友好的、多用途且高性能的JavaScript框架,它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架,也就是说,如果你已经有了现成的服务端应用,你可以将Vue作为该应用的一部分嵌入其中,带来更加丰富的交互体验。或者如果你希望将更多业务逻辑放到前端来实现,那么Vue的核心库及其生态系统也可以满足你的各式需求。

    和其他框架一样,Vue允许你将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方。如果我们构建了一个大型的应用,可能需要将东西分割成为各自的组件和文件,使用Vue的命令行工具,使快速初始化一个真实的工程变得非常简单。

    vue init webpack my-project

    我们甚至可以使用Vue的单文件组件,它包含了各自的HTML、JavaScript以及带作用域的CSS或SCSS。

    数据驱动(双向数据绑定)的原理

    什么是数据驱动

    数据驱动是Vue.js最大的特点。在vue中,所谓的数据驱动就是当数据发生变化时,用户界面发生相应的变化,开发者不需要手动的去修改DOM。

    比如,我们点击一个button,需要元素的文本做一个 “是/否” 的切换操作,在传统的jQuery中,对于页面修改的流程通常是:对button绑定事件,然后获取文案对应元素的dom对象,最后根据切换来修改dom对象的文本值。

    Vue实现数据驱动

    vue实现数据双向绑定主要采用数据劫持,配合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 settergetter ,在数据变动时发布消息给订阅者,触发相应监听回调。

    当一个普通 JavaScript 对象传给 Vue 实例来作为它的 data 选项时,vue 将遍历它的属性,用 Object.defineProperty 将它们转为 getter/setter 。用户看不到 getter/setter ,但是在内部它们让vue追踪依赖,在属性被访问和修改时通知变化。

    vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的Model的数据变化,通过Compile来解析编译模板指令(vue中用来解析{{}}模板语法),最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到 数据变化 —> 视图更新;视图交互变化(input)—> 数据model变更 双向绑定效果。

    在这里插入图片描述

    getter和setter的理解

    当打印出vue实例下的data对象里的属性,它的每个属性都有两个对应的get和set方法。顾名思义,get为取值方法,set为赋值方法。正常情况下,取值和赋值是用 obj.prop 的方式,但是这样做有一个问题,我们如何知道对象的值改变了?

    我们可以把get和set理解为function,当我们调用对象的属性时,会进入到 get.属性(){…} 中,先判断对象是否有这个属性,如果没有,那么就添加一个name属性,并给它赋值;如果有name属性,那么就返回name属性。可以把get看成一个取值的函数,函数的返回值就是它拿到的值。

    当给实例赋值时,会进入 set.属性(val){…} 中,形参val就是赋给属性的值,在这个函数里做了很多事情,比如双向绑定等等。因为这个值每次都要经过set,其他方式无法对该值做修改。在ES5中,对象原型有两个属性,_defineGetter__defineSetter_ ,专门用来给对象绑定get和set。

    虚拟DOM

    什么是虚拟DOM

    在Vue.js 2.0版本中引入了 Virtual DOM 的概念,Virtual DOM 其实就是一个以JavaScript对象(VNode节点)作为基础来模拟DOM结构的树形结构,这个树形结构包含了整个DOM结构的信息。简单来说,可以把Virtual DOM理解为一个简单的JS对象,并且最少包含标签名(tag)、属性(attrs)和子元素对象(children)三个属性。不同的框架对这三个属性的命名会有所差别。

    模板转换成视图的过程

    通过一个简单的实例,来说明虚拟DOM到真实DOM的渲染过程:

    创建模板:

    <ul id="app">
    	<li v-for="item in list">{{item}}</li>
    </ul>

    首先将上面的模板编译成渲染函数:

    createElement(
    	"ul", //节点标签名
    	{ //标签上的属性,用对象存储键值对
    		attr:{
    			id:"app"
    		}
    	},
    	[ //该节点的子节点
    		createElement("li",1),
    		createElement("li",2),
    		createElement("li",3)
    	]
    )

    然后将上面的渲染函数,渲染出虚拟DOM树:

    VNode: {
    	child: undefined,
    	children: [
    		VNode-0:{...},
    		VNode-1:{...},
    		VNode-2:{...}
    	],
    	elm:{...} //ul
    }

    最后由虚拟DOM树生成真实DOM:

    <ul>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    </ul>

    实现过程如下图:

    在这里插入图片描述

    虚拟DOM的作用

    虚拟DOM的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的DOM操作。例如,一个ul标签下有很多个li标签,其中只有一个li标签有变化,这种情况下如果使用新的ul去替代旧的ul,会因为这些不必要的DOM操作而造成性能上的浪费。

    为了避免不必要的DOM操作,虚拟DOM在虚拟节点映射到视图的过程中,将虚拟节点与上一次渲染视图所使用的旧虚拟节点做对比,找出真正需要更新的节点来进行DOM操作,从而避免操作其他不需要改动的DOM元素。

    其实,虚拟DOM在Vue.js中主要做了两件事情:

    为什么要使用虚拟DOM

    相关推荐:《vue.js教程

    以上就是vuejs是什么样的框架的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vuejs
    上一篇:element ui和vuejs的区别是什么 下一篇:javascript和jquery之间有什么区别
    线上培训班

    相关文章推荐

    • 浅析Vue中入口缓存的问题(代码分享)• MAC环境下安装node、vue等环境配置• 一文讲解Vue中路由切换终止异步请求(附代码)• Uniapp自定义vue导航菜单组件完成菜单动态高亮

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网