Vue.js中的关键技术简介

						**Vue.js中的关键技术简介**

摘要：随着用户对Web前端的使用体验升级，导致Web前端开发的工作难度增大。为了提高开发效率和代码复用率, 近几年,互联网前端行业发展迅速,涌现出一大批优秀框架 这些框架逐渐改变了传统前端的开发方式,譬如:谷歌的AngularJS,脸书的ReactJS以及Vue.js技术等[1]。
Vue.js应是一个小型、高性能、能器件化的JavaScriptMVVM库，应是一套创建用户界面的渐进式框架。它就是即以数据分析驱动及组件化的思维创立的，采纳自底向上增量开发的设计。Vue的目的就是借助API实现的数据绑定来开发[1]。
Vue.js是目前业界流行的前端技术之一，它有什么优点让它在各种前端框架中脱颖而出，本文我会结合代码简单介绍一下对vue.js的以下5个主要关键技术的理解。
1.渐进式框架：渐进式是指可以由浅入深的，由简单到困难的一种方式，Vue 的设计非常注重灵活性和“逐步集成”的思想。
2.声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
3.响应式更新：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。
4.API风格：Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
5.双向数据传递：当视图(View)的值发生改变时会自动更新model的值；当model的值发生改变时会自动更新视图(View)[2];

关键词：vue.js，渐进式框架，声明式渲染，API风格，双向数据绑定

1. 渐进式框架
   什么是渐进式？渐进式就是指可以由浅入深的，由简单到困难的一种方式。
   Vue是一个渐进式（真正用到才引用）的JavaScript框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，与现代化的工具以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，Vue 的设计非常注重灵活性和“逐步集成”的思想[3]。
   在 MVC 模型里，Model 不依赖于 View，但 View 依赖于 Model；MVVM 模式在概念上是真正地将页面和数据逻辑分离它把数据绑定工作放到一个 JS 中去实现，这个 JS 文件 的主要功能是完成数据的绑定，就是把 Model 绑定到 UI 元素上，MVVM分为M、V、VM，M（Model） 也就是页面中单独数据，V （View）是页面中HTML结构，VM（View-Model） 当V需要调用M中数据时，由VM做到中间处理[3]。
   根据我们的需求场景，我们可以用不同的方式使用 Vue：

1. 无需构建步骤，渐进式增强静态的 HTML
2. 在任何页面中作为 Web Components 嵌入
3. 单页应用 (SPA)
4. 全栈 / 服务端渲染 (SSR)
5. Jamstack / 静态站点生成 (SSG)
6. 开发桌面端、移动端、WebGL，甚至是命令行终端中的界面[4]

2. 声明式渲染
   在vue.js官网是这样定义“声明式渲染”的：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系[4]。
   声明式编程(Declarative programming)是一种编程范型，与命令式编程相对立。它描述目标性质，让计算机明白目标，而非流程。声明式编程不用告诉电脑问题领域，从而避免随之而来的副作用。而指令式编程专则需要用算法来明确的指出每一步该怎么做。简单来说，相对于命令式编程，声明式编程不注重实现过程而侧重于结果。
   下面这段代码，可以帮助我们理解声明式渲染的概念：

var app = new Vue({ el: '#app', data: { message: 'Hello World!' } }) 这段代码，会在div之中渲染data中的message变量，即 ‘Hello World!’。但是这过程中，我们并不知道或者是关注vue是怎么把message渲染到页面上的过程和方法，但是我们轻易的就看到结果是什么样子的。 结合这句定义：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。这里通过模板语法，告诉了浏览器一个结果，哪里该渲染什么数据，而我们也能清楚的明白哪里能显示什么内容，而不是注重为什么能实现这个结果。即表明了vue的核心技术之一——声明式渲染[4]。

3. 响应式更新
   1）响应式原理
   把js对象传入一个vue实例作为data项，进行遍历，使用Object.defineProperty把这些属性转为getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
   每个vue实例都有一个watcher实例，它会在实例渲染时记录这些属性，并在setter触发时重新渲染。Vue 不能检测数组和对象的变化[5]。
   Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：
   var vm = new Vue({
   data:{
   a:1
   }
   }) // vm.a 是响应式的
   vm.b = 2 // vm.b 是非响应式的
   Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如，对于：
   Vue.set(vm.someObject, ‘b’, 2)
   您还可以使用 vm.$set实例方法，这也是全局Vue.set方法的别名：this.$set(this.someObject,‘b’,2)
   2）声明响应式属性（property）
   由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值。如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性[5]。
   var vm = new Vue({
   data: {
   // 声明 message 为一个空值字符串
   message: ‘’
   },
   template: ‘

   {{ message }}
   ’
   })
   // 之后设置 message
   vm.message = ‘Hello!’
   如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的 property。
   这样的限制在背后是有其技术原因的，它消除了在依赖项跟踪系统中的一类边界情况，也使 Vue 实例能更好地配合类型检查系统工作。但与此同时在代码可维护性方面也有一点重要的考虑：data 对象就像组件状态的结构 (schema)。提前声明所有的响应式 property，可以让组件代码在未来修改或给其他开发人员阅读时更易于理解。
   3）异步更新队列
   vue更新dom时是异步执行的；数据变化、更新是在主线程中同步执行的；在侦听到数据变化时，watcher将数据变更存储到异步队列中，当本次数据变化，即主线成任务执行完毕，异步队列中的任务才会被执行（已去重）。
   如果你在js中更新数据后立即去操作DOM，这时候DOM还未更新；vue提供了nextTick接口来处理这样的情况，它的参数是一个回调函数，会在本次DOM更新完成后被调用[5]。一个较简单的使用方法：
   methods: {
   updateMessage: async function () {
   this.message = ‘已更新’
   console.log(this.$el.textContent)//={>}^{\prime }未更{新}^{\prime }awaitthis.$nextTick()
   console.log(this.$el.textContent) // => ‘已更新’
   }
   }
   因为 $nextTick() 返回一个 Promise 对象，所以你可以使用新的 ES2016 async/await 语法完成相同的事情。
   另外响应式变化的情况一般包括以下四种：
   1、data中根属性的改变；
   2、Vue.set(object, propertyName, value) 给根属性添加嵌套属性；
   3、this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 }) 给根属性添加嵌套属性；
   4、computed 计算属性中依赖的响应式属性的改变；

4. API风格

1. 选项式 API (Options API)
   使用选项式 API，我们可以用包含多个选项的对象来描述组件的逻辑，例如 data、methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例[4]。
   如下面这段代码：

里面的data，method和 mounted等定义的属性，都是被暴露在会成为响应式的状态, 并且暴露在 this 上。

2. 组合式 API (Composition API)
   通过组合式 API，我们可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与

3. 两种API方式的联系和区别
   两种 API 风格都能够覆盖大部分的应用场景，它们只是同一个底层系统所提供的两套不同的接口。
   实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。
   选项式 API 以“组件实例”的概念为中心 (即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。
   组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对 Vue 的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大[6]。
   同一逻辑使用到的不同 变量、方法可以放在一块儿，便于阅读。
   在生产项目中：
   当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 API。
   当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件[6]。
   下面这个表格，展示两个API方式的具体属性上的代码区别：

5. 双向数据绑定

1. 双向数据绑定简介
   Vue最核心的功能是双向数据绑定和组件模块化。
   双向绑定：
   当视图(View)的值发生改变时会自动更新model的值；当model的值发生改变时会自动更新视图(View);这里的视图View是指html中的标签元素，也就是DOM元素；这里的model就是指JavaScript中的对象，也就是用object{foo: bar}[2]。
2. 双向数据绑定JS实现
   下面示例写了一个基本双向数据绑定的实现，打开控制台Console我们可以看到，当在input中输入值时也就是input的值发生改变时，input中的value值会自动赋值给user对象的username属性；当对象user的username属性的值发生改变时也会改变input标签的value值，即View也会跟着改变[2]。

3. 双向数据绑定Vue实现
   Vue实现双向数据绑定是通过以下两个功能来实现的：
   Vue.js主要负责的是上图绿色正方体ViewModel的部分，其在View层（即DOM层）与Model层（即JS逻辑层）之间通过ViewModel绑定了DOM Listeners与Data Bingings两个相当于监听器的东西。当View层的视图发生改变时，Vue会通过DOM Listeners来监听并改变Model层的数据。相反，当Model层的数据发生改变时，其也会通过Data Bingings来监听并改变View层的展示。这样便实现了一个双向数据绑定的功能，也是Vue.js数据驱动的原理所在[2]。
   DOM Listeners(DOM 监听器)：监听DOM元素(也就是html标签)的改变，当DOM发生改变时会自动更新model的值；
   Data Bindings(数据绑定)：当model的值发生改变时会自动更新DOM元素的展示；
   Vue.js是一款轻量级的以数据驱动的前端JS框架，通过数据的改变来实现页面的更新与展示。与jQuery最大的不同点在于jQuery通过操作DOM来改变页面的显示，而Vue通过操作数据来。相比而言改变数据操作更加简单[2]。
   使用Vue演示双向数据绑定，可以看下面代码例子：
   

参考文献
[1]. Vue.js的介绍以及核心技术的讲解_像海的博客-CSDN博客
[2]. Vue.js(二) 双向数据绑定(数据驱动)_风流 少年的博客-CSDN博客_vue双向数据驱动
[3]. 渐进式框架 Vue.js 基础及实例编程演示_niaonao的博客-CSDN博客
[4]. Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)
[5]. Vue响应式更新原理（个人总结）_angular_yyj的博客-CSDN博客_vue更新数据原理
[6]. vue API 风格_小数点儿_的博客-CSDN博客

最后

以上就是隐形悟空为你收集整理的Vue.js中的关键技术简介的全部内容，希望文章能够帮你解决Vue.js中的关键技术简介所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。