话说前端（47）-初识vue

Vue 介绍：Vue 是一个渐进式 MVVM 框架，只关注视图层（view），用来构建 Web 应用界面。所谓渐进式，即我们需要哪些功能就使用框架的哪些模块即可，vue 这样处理使其减少侵入性。

1. 声明式渲染：Vue 的核心库提供了数据渲染功能（vue 模板引擎），实现视图与数据解耦。

2. 组件系统：对界面进行组件化

3. 前端路由：可以用来制作移动端单页面应用

4. 状态管理：对共享数据进行管理

Introduction to Vue: Vue is a progressive MVVM framework, which only focuses on the view layer and is used to build a Web application interface. The so-called gradual, that is, we can use which modules of the framework if we need any functions. vue does this to make it less invasive.

1. Declarative rendering: vues core library provides data rendering function (Vue template engine) to decouple view and data.

2. Component system: Component the interface.

3. Front-end routing: it can be used to make single-page applications on mobile terminals.

4. State management: manage the shared data.

什么是渐进式：

Vue 其实包含很多 vue 的扩展插件,比如 以下:

vue-cli: vue脚手架

vue-router: 路由

vuex: 状态管理

vue-scroller: 页面滑动相关

mint-ui: 基于vue的组件库(移动端)

element-ui: 基于vue的组件库(PC端)

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用

What is gradual:

Vue actually contains many extensions to Vue, such as the following:

Vue-cli: vue scaffold

Vue-router: routing

Vuex: state management

Vue-scroller: page sliding correlation

Mint-ui: Component Library Based on vue (Mobile)

Element-ui: component library based on vue (PC side)

Different from other large-scale frames, Vue is designed to be applied layer by layer from the bottom up.

vue 与 JavaScript对比：

DOM 操作

原生 JS 如果要操作 UI，需要频繁操作 DOM，效率较低

Vue 框架内部 实现了虚拟 DOM，在界面需要更新时，Vue 会在虚拟 DOM 中比较渲染前后的差异，决定最优更新哪些 DOM，由于虚拟 DOM 是内存数据，对实际 DOM 操作的仅仅是 Diff 部分，因而提高了性能。

虚拟 DOM 上绑定的属性极少，更加轻量（因为只有框架自己使用

‣组件化

原生 JS 组件化方案支持度不足，Vue 有完善的组件化支持（声明式）

Comparison between vue and JavaScript:

DOM operation

If native JS wants to operate UI, it needs to operate DOM frequently, which is inefficient.

The virtual DOM is implemented in the framework of Vue. When the interface needs to be updated, Vue will compare the Differences before and after rendering in the virtual DOM and decide which DOM to update optimally. Because the virtual DOM is memory data, it only operates the diff part of the actual DOM, thus improving the performance.

There are few properties bound on the virtual DOM, which is lighter (because only the framework uses it itself)

modularization

The support of native JS component scheme is insufficient, and Vue has perfect component support (declarative).

下载方法：

第一种：传统引入方法，下载vue.js文件，并在页面中引入。

‣第二种：使用vue-cli安装导入使用。

Download method:

The first method: traditional import method, download the vue.js file and import it into the page.

The second type: use vue-cli to install and import.

vue2 响应式：

实现原理

对象类型：通过`Object.defineProperty()`对属性的读取、修改进行拦截（数据劫持）。

数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

Vue2 response:

Realization principle

Object type: Intercept the reading and modification of attributes through Object.defineProperty () (data hijacking).

Array type: Interception is achieved by rewriting a series of methods for updating arrays. (The change method of array is wrapped).

翻译：Google翻译

本文由LearningYard新学苑原创，如有侵权，请联系删除。