집 > 기사 > 웹 프론트엔드 > vuejs는 어떤 프레임워크인가요?

vuejs는 어떤 프레임워크인가요?

青灯夜游원래의: 2021-09-06 17:48:382423검색

vuejs는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. Vue.js의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 구현하는 것입니다.

vuejs는 어떤 프레임워크인가요?

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue(/vjuː/로 발음, view와 유사)는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. 다른 대형 프레임워크와 달리 Vue는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. Vue의 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. 반면, 최신 도구 체인 및 다양한 지원 라이브러리와 결합하면 Vue는 복잡한 단일 페이지 애플리케이션(SPA)용 드라이버를 완벽하게 제공할 수 있습니다.

Vue.js의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 활성화하는 것입니다.

Vue.js 자체는 포괄적인 프레임워크가 아니며 뷰 레이어에만 중점을 둡니다. 따라서 배우기가 매우 쉽고 다른 라이브러리나 기존 프로젝트와 통합하기가 매우 쉽습니다. 반면에 Vue.js는 관련 도구 및 지원 라이브러리와 함께 사용하면 복잡한 단일 페이지 애플리케이션을 강화할 수도 있습니다.

Vue.js의 장점

작은 크기: 압축 후 33k에 불과
더 높은 운영 효율성: 가상 DOM 기반으로 JavaScript를 통해 사전에 다양한 계산을 수행하고 최종 DOM A로 변환할 수 있습니다. 연산을 계산하고 최적화하는 기술입니다. 이 DOM 연산은 전처리 연산이고 실제로 DOM을 연산하지 않기 때문에 이를 가상 DOM이라고 합니다.
양방향 데이터 바인딩: 개발자가 더 이상 DOM 객체를 연산할 필요가 없습니다. 비즈니스 로직에 더 많은 에너지를 투자하세요.
풍부한 생태계와 낮은 학습 비용: 시장에는 vue.js를 기반으로 하는 성숙하고 안정적인 UI 프레임워크와 구성 요소가 많이 있으며 이를 통해 빠른 개발을 달성할 수 있습니다. 초보자 친화적이고 시작하기 쉬우며 학습 자료가 많습니다.

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

자체 HTML, JavaScript, 범위가 지정된 CSS 또는 SCSS가 포함된 Vue의 단일 파일 구성 요소를 사용할 수도 있습니다.

데이터 중심의 원리(양방향 데이터 바인딩)

데이터 중심이란 무엇인가

데이터 중심은 Vue.js의 가장 큰 특징입니다. Vue에서 소위 데이터 기반이란 데이터가 변경되면 그에 따라 사용자 인터페이스가 변경되며 개발자가 DOM을 수동으로 수정할 필요가 없음을 의미합니다.

예를 들어 버튼을 클릭하면 요소의 텍스트가 "예/아니요" 전환 작업을 수행해야 합니다. 기존 jQuery에서 페이지 수정 프로세스는 일반적으로 이벤트를 버튼에 바인딩한 다음 가져옵니다. dom 객체의 해당 요소를 변경하고 마지막으로 스위치에 따라 dom 객체의 텍스트 값을 수정합니다.

Vue는 데이터 중심을 구현합니다.

Vue는 주로 데이터 하이재킹을 통해 양방향 데이터 바인딩을 구현하고 Object.defineProperty() 来劫持各个属性的 setter 和 getter를 통해 데이터가 변경되면 메시지가 구독자에게 게시되고 해당 모니터링 콜백을 트리거합니다. .

일반 JavaScript 객체가 Vue 인스턴스에 데이터 옵션으로 전달되면 Vue는 해당 속성을 반복하고 Object.defineProperty를 사용하여 해당 속성을 getter/setter로 변환합니다. getter/setter는 사용자에게 표시되지 않지만 내부적으로 Vue가 종속성을 추적하고 속성에 액세스하고 수정될 때 변경 사항을 알릴 수 있습니다.

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

vuejs는 어떤 프레임워크인가요?

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>

实现过程如下图：

vuejs는 어떤 프레임워크인가요?

虚拟DOM的作用

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

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

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

提供与真实DOM节点所对应的虚拟节点VNode
将虚拟节点VNode和旧虚拟节点oldVNode进行对比，然后更新视图

为什么要使用虚拟DOM

具备跨平台优势，由于Virtual DOM 是以JavaScript对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node等。
操作DOM慢，JS运行效率高，可以将DOM对比操作放在JS层，提高效率。因为DOM操作的执行速度远不如JavaScript运算速度快，因此，把大量的DOM操作搬运到JavaScript中，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。Vritual DOM本质上就是在JS和DOM之间做了一个缓存，JS只操作Virtual DOM，最后把变更写入到真实DOM。
提高渲染性能，Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

vuejs는 어떤 프레임워크인가요?

관련 기사