vue总结系列--数据驱动和响应式

时间 2019-12-05

标签 vue 总结系列数据驱动响应繁體版

原文原文链接

在公司里帮项目组里开发后台系统的前端项目也有一段时间了。 vue这种数据驱动，组件化的框架和react很像，
从一开始的快速上手基本的开发，到后来开始自定义组件，对element UI的组件二次封装以知足项目需求，期间也是踩了很多坑。
因为未来很长一段时间可能不再会接触前端了，趁着如今对vue还很熟练的时候，赶忙将这期间的收获记录下来。css

按照个人理解，vue的特色在于，高层次的抽象模型，组件化，数据驱动与响应式。
html

注意：本文中全部涉及到{ {的，实际上不包括中间的空格，由于hexo会无脑把这个语法当成hexo的一种特殊语法前端

vue是什么及特色

vue是什么

简单的来讲，vue是一套用于前端开发的框架。
学习一门技术首先应该对该技术有着一个清晰正确的认识和思路，不然犹如浮沙之上建高楼。下面就来谈谈我对vue这个框架的理解。vue

vue它的惊艳之处在于，对上，它提供了一套很是优秀的与传统前端大相径庭的前端开发模型，对下，它屏蔽了传统前端开发的各类丑陋的技术。
在实现复杂的页面需求时，vue帮你从传统前端的各类HACK般的奇淫技巧解脱出来，vue提供的抽象开发模型拥有强大的 表达能力，可以如丝顺滑般的完成各类复杂的需求。java

总而言之，vue之于传统前端，相似C语言之于汇编语言，就像C语言提供了一个强大的表达能力强的语言模型同样，vue一样提供了一个强悍的表达前端的框架模型，这是抽象的威力。
所以，学习vue的80%的重心，都在学习这个强悍的vue模型上。python

vue的特色

从我我的对vue的理解，它的几个重要特色有：react

抽象的组件。这是vue框架模型中的一个基础，vue的一切都是基于vue组件的。你在vue组件上可使用vue提供的各类特性，vue会将其转换成浏览器可以识别的结果经过浏览器渲染出来。
数据驱动。这是vue的理念之一，数据才是项目的核心，也是状态的最终保存者。而视图，只不过是一种可以由数据延迟计算出来的最终结果而已，它自己不存储状态。
响应式。既然渲染结果只是数据的衍生产物，那么当数据改变时，渲染结果天然而然的也要改变。这种机制就是响应式。
组件化。vue自己提供的 抽象特性 。从我我的的理解来看，自定义组件在vue中的地位，相似于函数在C，java之类的语言之中的地位。

它还有几个其它的的特色：webpack

易用和功能兼顾。在我传统的思惟里，易用的东西通常会牺牲一部分功能，而功能强大的东西会须要很大的成本学习，鱼和熊掌不可兼得。
然而vue用实际行动狠狠给了我一耳光，只要模型设计的正交完美，彻底可以兼顾易用性和功能性。
与传统前端的良好兼容。
我目前所作的项目中，因为需求的复杂化项目须要从easy UI迭代到vue，本来我作好了大刀阔斧大规模重构的准备，不过，通过查阅文档和几个小demo实验我发现，这玩意竟然可以和传统前端并存！
结果是很是使人开心的，我逐步的，慢慢的将项目从easy UI迭代到vue版本，一个页面一个页面的替换，对项目的影响下降到了最小。

组件定义

下面的例子定义了一个简单的组件，x-my-component。
因为是须要兼容easy UI的后台系统，该项目并不能使用到webpack + babel + es6等技术，所以我在vue上的经验大都是使用原生的js编写的，git

<div id="x-my-component">
    <div>
      { { message }}
    </div>
</div>

<script>
Vue.component('x-my-component', {
  template: '#x-my-component',
  data: function () {
      return {
        message: 'Hello Vue!'
      };
  }
});
</script>

能够看见一个组件分为两部分：视图部分，和数据部分。
视图部分使用html定义，可是vue会对一些特别的语法赋予vue本身的意义。如 { { message }} 表示将数据message绑定到视图的这个地方来。
这里是使用原生js编写的，所以数据部分和视图部分经过id选择器关联起来，定义了一个x-my-component全局组件。
从这里就能够初步感觉到数据驱动。组件的状态都是存放的数据中的，而视图只负责渲染，自己不保存状态。
当数据不变时，渲染结果必定不变；当数据改变时，渲染结果就要发生改变。

因为vue是组件化的，组件能够层层嵌套。不过，最终的根节点得是app节点，这样才能渲染出结果。它的定义方式不太相同：es6

<div id="app">
    <x-my-component></x-my-component>
</div>
<script>
var app = new Vue({
  el: '#app',
});
</script>

从这里能够看出，自定义的全局组件在vue的其它组件中能够直接使用，就像使用一个已经存在的html标签同样。

　数据绑定

从数据驱动的观点，咱们很容易分析出数据流向：
数据源 --> vue对象　--> DOM

文本绑定，html绑定及xss攻击

<div id="x-my-component">
  <span v-bind:title="message">
  { { message }}
  { { message.split('').reverse().join('') }}
  </span>
  <span :title="message"> </span>
  <div v-html="rawHtml"></div>
</div>
<script>
Vue.component('x-my-component', {
  template: '#x-my-component',
  data: function () {
      return {
        message: 'Hello Vue!',
        rawHtml: '<s>deleted!</s>'
      };
  }
});
</script>

将数据绑定到通常的内容上，用简单的 { {}} 的语法就能够了。
将数据绑定到属性上，须要用特殊的 v-bind 语法。上面将 message 数据绑定到了title属性上。
因为这个语法太经常使用了， v-bind:title 可直接缩写为 :title 。
用 -v-html 语法，绑定原始的html数据。
能绑定的不只仅是属性键值，还能够是 单个表达式 。注意只能是单个表达式。
这些表达式只能访问全局变量的一个白名单，如Math和Date， 不能访问用户自定义的全局变量 。

在传统的前端编程中，须要仔细预防的一点是xss攻击。xss攻击的原理是：

用户输入的数据直接被插入到了DOM中。
用户输入的数据中含有html或js代码，那么它会直接做为DOM的一部分，被渲染或被执行出来。
利用这一点，就可以创造一个指向攻击者页面的一张图片或者连接，从而盗取用户的cookies或sid，或者诱导用户点击钓鱼网址。

所以，为预防xss，任何用户给定的数据展示到页面上都须要仔细的处理。可是若是使用vue，就没必要太操心这个问题。
由于，vue提供了一个更高层次的前端模型，全部的业务代码都须要经过vue处理。咱们只须要看vue对xss的处理状况就能够了。
从上面咱们能够看到，数据到视图渲染中必须使用vue的插值语法：

普通的文本插值。vue会过滤xss攻击，所以能够安全使用。
使用v-html语法将html插入渲染后的DOM中。这固然会形成xss攻击，所以，使用v-html语法时要很是的当心。

条件与循环

<div id="x-my-component">
  <p v-if="seen">如今你看到我了</p>
  <ol>
    <li v-for="todo in todos">
      { { todo.text }}
    </li>
  </ol>
</div>
<script>
Vue.component('x-my-component', {
  template: '#x-my-component',
  data: function () {
      return {
        seen: true,
        todos: ["A", "B", "C"]
      };
  }
});
</script>

用 v-if 绑定的数据，控制此元素是否显示。
用 v-for 绑定的特殊语法，用于控制循环， v-for 的元素会被重复。如上所示，todos是一个数组。

响应式

上面的例子中能够数据绑定的语法，实际上，将数据绑定到视图上的操做并很多见，这些操做，和后端技术经常使用的模样引擎相似，如python的Jinja2， java的freemarker。
可是，vue的数据绑定的还有一大不一样点点是 响应式 。
因为视图渲染是从数据计算出来的产物，相似一个传入数据传出渲染结果的纯函数，所以，当数据改变时，渲染结果也会改变，所获得的结果是页面展现的界面也会发送改变。

数据绑定还不能彻底走通一个vue组件的数据流程，从上面的数据绑定咱们能够发现一个事实：
数据由vue对象流向视图进而渲染出来。

那么，反过来呢？若是让数据从页面流向vue对象？这就是下面要说到的事件处理。

事件处理

事件处理的数据流向是这样的：
用户操做页面产生数据 --> 页面 --> vue对象

<div id="x-my-component">
  <p>{ { message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
  <button @click="reverseMessage">逆转消息</button>
  <input v-model="message">
</div>
<script>
Vue.component('x-my-component', {
  template: '#x-my-component',
  data: function () {
      return {
        message: 'Hello Vue.js!'
      };
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});
</script>

经过 v-on 语法，绑定事件。按钮的数据传入到vue对象中。
这个语法太经常使用了，因此 v-on:click 可缩写成 @click 。
经过 v-model 语法，将表单的数据传入到vue对象中。v-model的数据流动是双向的，至关于:value数据绑定和@input事件绑定的语法糖。

可以与用户交互的组件都可以产生数据。当用户操做组件时，组件的相应事件被触发，进而执行绑定到事件的相应函数。
在函数内部你能够作任何处理逻辑，好比说改变vue对象记录的状态，也就是数据。

那么，这样，一个完整的数据流程就跑通了：

用户操做vue组件。
相应的事件被触发，从而致使绑定事件的函数被触发。
函数执行业务代码，改变vue组件的状态，也就是前面说到的数据绑定中的数据。
数据被改变，绑定了该数据的视图也会发送改变，视图被从新渲染。
页面发生相应改变，用户观察到了本身操做的反馈结果。

再谈响应式

virtual DOM

咱们知道，数据被绑定到视图上，视图自己不存储状态，当数据不变时，渲染结果不变；当数据改变时，视图也须要从新渲染。

好了，如今头脑里可能会有一个简单的思路了：

当数据改变时，触发数据的setter，setter除了更改数据变更外，还须要执行数据更新逻辑。
从新执行渲染函数，重新的数据中计算出新的渲染结果。
将渲染结果插入浏览器DOM树中。

可是，咱们仔细考察下第三步。浏览器的DOM树改变后，浏览器才会真正的从新渲染这个DOM，计算各类css，各类布局，层层调用各类绘图函数从新绘制GUI等等。。。
总而言之，这个步骤是很是很是耗时的。

那么，一个优化的手段是，尽量让真正的DOM改变的最少，这样浏览器只须要渲染最少的结果就能达到效果，提高性能。
所以，vurtual DOM就出现了。以下：

当数据改变时，触发数据的setter，setter除了更改数据变更外，还须要执行数据更新逻辑。
从新执行渲染函数，重新的数据中计算出新的渲染结果。
渲染结果被放在virtual DOM中，vue将新的DOM和就的DOM进行diff。
将diff后的差别结果更新到真正的浏览器DOM树中。

能够看到，整个流程中的一大重点是diff算法。关于DOM的diff算法，我没有接触过。。。。。。。
以前研究过文本diff算法是基于LCS算法的动态规划优化，以后有兴趣能够研究下DOM的diff算法。

数据更新检测的坑

从上面咱们知道，当直接设置一个vue属性的值时，会触发getter函数。
实际上，getter函数是js的一个机制。在修改数组或对象时，也有相似的机制保证vue能检测到数据的更新以触发渲染。

然而，有几种状况，因为js的限制没法检测到，实际编程中要特别注意，不然就会感受碰到了一个玄学bug。。。

数组。
1. 利用索引来直接设置数组元素。如 this.todos[index] = "B"。解决方案是：Vue.set(this.todos, index, "B")，经过vue的函数设置。
2. 直接修改数组的长度。如 this.todos.length = 10。替代方案建议使用不可变数据结构。
对象。vue没法检测到对象属性的添加或删除。添加的话，可使用Vue.set，删除的话，可使用不可变数据结构。

最后

此篇博文梳理了vue的基本特性，可是对于vue最重量级的功能----组件化，没有涉及到。对于组件化的相关梳理留到下篇博文梳理。

注：该文于2018-04-09撰写于个人github静态页博客，现同步到个人segmentfault来。