本文目录导航：
vue制造一个繁难的网站(vue搭建网站)
用vue开发网页成果本地运行：
指令v-text的作用是：设置标签的内容
自动写法会交流所有内容，经常使用插值表白式{{}}可以交流指定内容
部分交流经常使用两个大括号写法
v-html指令：作用是设置元素的innerHTML
内容中有html结果会被解析为标签；v-text无论内容是什么，只会解析为文本
解析文本用v-text，解析html结构用v-html
v-on指令：事情绑定的方法写成函数调用的方式，可以传入自定义参数
定义方法时须要定义形参来接受传入的实参
期间的前面跟上【.润色符】可以对事情启动限制
可以限制触发的按键为回车
期间润色符有多种
计数器的步骤：
1.在data中定义数据num；
中参与两种方法add和sub
3.经常使用v-text给num设置span标签
4.经常使用v-on将add，sub绑定给+、-按钮
逻辑小于10继续累加，否则alert
逻辑大于0继续递减，否则alert
创立Vue示例时，el（挂载点），data（数据），methods（方法）
v-on指令的作用是绑定事情，简写为@
方法中经过this，关键字失掉data中的数据
v-text设置文本值，简写{{}}
v-show指令的作用是：依据虚实切换元素的显示形态
原理是修正元素的display，成功显示和暗藏
指令前面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素暗藏
v-if指令的作用是：依据虚实切换元素的显示形态
实质是经过操纵dom元历来切换显示形态
表白式的值为true，元素存在于dom树中，为false，从dom树中移除
v-bind指令的作用是：为元素绑定属性
完整写法是v-bind：属性名
简写的话可以间接省略v-bind，只保管【：属性名】
须要灵活的增删class倡导经常使用对象的方式
v-for指令的作用是：依据数据生成列表结构
数组经常和v-for联合经常使用
语法是（item，index）in数据
item和index可以联合其余指令一同经常使用
数组长度的降级会同步到页面上，是照应式的
v-model指令的作用是方便的设置和失掉表单元素的值
绑定的数据和表单元素值关系联
绑定的数据双向绑定表单元素的值
网络运行
VuePress-Vue驱动的静态网站生成器入门教程
VuePress由两部分组成：第一部分是一个极简静态网站生成器(opensnewwindow)，它蕴含由Vue驱动的主题系统和插件API，另一个部分是为书写技术文档而提升的自动主题，它的降生初衷是为了支持Vue及其子名目标文档需求。
每一个由VuePress生成的页面都带有预渲染好的HTML，也因此具备十分好的加载性能和搜查引擎提升（SEO）。
同时，一旦页面被加载，Vue将接收这些静态内容，并将其转换成一个完整的单页运行（SPA），其余的页面则会只在用户阅读到的时刻才按需加载。
理想上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页运行。
假设你以前经常使用过Vue的话，当你在开发一个自定义主题的时刻，你会感遭到十分相熟的开发体验，你甚至可以经常使用VueDevTools去调试你的自定义主题。
1、创立并进入一个新目录
2、经常使用你青睐的包治理器启动初始化
3、将VuePress装置为本地依赖
咱们曾经不再介绍全局装置VuePress
4、创立你的第一篇文档
5、在中参与一些scripts
这一步骤是可选的，但咱们介绍你成功它。
在下文中，咱们会自动这些scripts曾经被参与。
6、在本地启动主机
VuePress会在(opensnewwindow)启动一个热重载的开发主机。
如今，你应该曾经有了一个繁难可用的VuePress文档。
接上去，了解一下介绍的目录结构和VuePress中的基本色能。
VuePress遵照“商定优于性能”的准则，介绍的目录结构如下：
假设没有任何性能，这个网站将会是十分局限的，用户也无法在你的网站上自在导航。
为了更好地自定义你的网站，让咱们首先在你的文档目录下创立一个目录，一切VuePress关系的文件都将会被放在这里。
你的名目结构或许是这样：
一个VuePress网站必要的性能文件是/，它应该导出一个Javascript对象：
关于上述的性能，假设你运转起devserver，你应该能看到一个页面，它蕴含一个页头，外面蕴含一个题目和一个搜查框。
VuePress内置了基于headers的搜查——它会智能为一切页面的题目、h2和h3构建起一个繁难的搜查索引。
你也可以经常使用YAML(/)或是TOML(/)格局的性能文件。
一个VuePress主题应该担任整个网站的规划和交互细节。
在VuePress中，目前自带了一个自动的主题（正是你如今所看到的），它是为技术文档而设计的。
同时，自动主题提供了一些选项，让你可以去自定义导航栏（navbar）、侧边栏（sidebar）和首页（homepage）等，
由于VuePress是一个规范的Vue运行，你可以经过创立一个/文件来做一些运行级别的性能，当该文件存在的时刻，会被导入到运行外部。
应该exportdefault一个钩子函数，并接受一个蕴含了一些运行级别属性的对象作为参数。
你可以经常使用这个钩子来装置一些附加的Vue插件、注册全局组件，或许参与额外的路由钩子等：
感觉成果不错的请帮助加个关注点个赞，经常分享前端适用开发技巧
预备用vue写个小名目，经常使用axios调用api做一个网站，还须要哪些技术？看你自己的须要咯，
比如前端的跟vue搭配一同的，有vue-router（路由，这个就不解释了）,vuex（全局变量，也不详细解释了）。
或许还有框架？比如element-ui，或许vuetify这样的。
后端的话假设用node的就有express,koa这样的。
然后端的，或许还触及到一些数据的存储之类的，又会触及到一个数据库的插件，比如ORM，NEDB这样的。
在本章中，咱们能学到：
群众号《帅帅的Python》回复《数据加密》失掉源码
咱们在网上搜查md5加密，会进去很多的网站，然而都是关于单个字符的的加密，其中加密算法有md5和sha加密。
然而当我有1万条数据，如何加密，总不能一条一条的复制粘贴过去加密，这很不理想。
小凡选择先参考这些网站做一个繁难的字符串加密网站，然后再做关于Excel文件的加密网站。
咱们看这些网站都是由两个输入框，两边加上选项组成的，比如上方这种：
咱们可以用element中的组件绘制出这样的页面：
绘制输入字符串的文本框：
同理，咱们可以绘制出加密后的文本框：
form表单：
下拉框，选用加密的方式：
单选框：
按钮：
后端咱们用flask写一个接口，这个接口就是用来将前端输入的字符串发送给加密的函数，咱们须要开发一个地址，经常使用POST方法，并且接受传递的参数。
启动后端服务，即可访问到网站。
小凡不满足于只能加密字符串，接上去，小凡要思索如何加密Excel文件？
Primary:Vue{三、一个基于Vue的门户网站(阅历踩坑)}经常使用框架时必定熟知框架指令个性！很关键；
Bootstrap+jQuery是很好的选用！
库：?????1.i18n(双言语切换)；
?????????-router(路由）；
?????????(形态治理，须要启动双言语切换监听变动)；
?????????(饿了么以电脑端为主得UI框架)；
?????????(css预处置)；
?????????(须要K线图，团体介绍不要用echarts,太大)；
?????????(相关于fetch兼容性好，恳求数据)
IE的坑：1.走马灯之前用的是swiper的，结果兼容性不好，4.0+兼容不好，3.0关键以移动端为主，
????????之后换成了ElementUI的走马灯又疏导出无法笼罩ElementUI的样式，由于VUE是自动全局笼罩部分，再加一个style，不要加scoped,ElementUI是全局引入！?处置疑问。
????????2.阅历无余，IE9不支持flex,坑、坑、坑移动端写习气了！
????????3.多行文本省略只支持webkit内核阅读器，又是坑，用js控制长度搞定！
????????4.低版本兼容引入babel-polyfill，将build?里entry修正为entry:{babel-polyfill:babel-polyfill,app:./src/},
??????5.经常使用axios低版本兼容?es6-promise包，在里援用
????????????????importpromisefromes6-promise
打包形式：须要主机端性能请看官方；不须要改任何物品，路由里加mode:history即可
??????形式：将config里里的assetsPublicPath:/??改为assetsPublicPath:./,即可访问静态资源；
??????3.打包体积：将config里里的productionSourceMap:true,改为?productionSourceMap:false，或许待打包完之先手动删除Map文件；
??????4.路由懒加载（详细看官方很繁难）；
??????5.第三方包分别将build?里参与
????????????????????externals:{；
??????????????????????echarts:echarts
??????6.打包后css背景图无法访问，将build??里参与?publicPath:../../,
????性能（）
????{test:/\$/,loaders:[style,css,sass]},
如有写错的中央欢迎大家评论
web前端开之网站搭建框架之vue详解网站搭建框架之vue
Vue是web前端极速搭建网站的框架之一。
它与jQuery有所不同，是以数据驱动web界面（以操作数据扭转页面，而jQuery是以操作节点来扭转页面），同时，vue还成功了数据的双向绑定，可及时响运行户的输入。
最关键的是vue的写法繁难，容易把握，组件方式可以大大提高上班效率。
关于vue的经常使用可以分为两种经常使用方式：1.引入文件，在js中将vue实例化；2.经过node装置第三方包--vue，搭建脚手架，用脚手架将页面分红几个组件编写，从而应用组件来搭建页面。
引入的写法
Vue分为V层（视图层）和M层（数据层），普通都是由M层的数据来驱动V层的扭转。
而vue的罕用指令数量不多且写法繁难。
罕用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。
v-html和v-text都是将数据写进标签内，但它们的不同之处在于v-text会将标签当做文本内容写入
，而v-html则会对标签启动编译，只显示标签内的内容。
至于v-show、v-if、v-else这三个指令都是经过布尔值的判别来口头的，当布尔值为真时，设置了v-show、v-if指令的标签会显示进去，当布尔值为假时，标签暗藏；而v-else与这两个指令相反。
除此之外，v-show和v-if、v-else之间也有差异，v-show是扭转标签的display属性来使标签显示或暗藏；而v-if、v-else是经过参与或删除节点，来显示或暗藏标签的。
V-for是vue的一种遍历方法，这个方法极大的简化了数组或对象的遍历并显示到页面的步骤
而v-bind：是对html属性或自定义属性的数据驱动方式，格局为v-bind:href，可简写为：href。
关于类（class）的操作是经过布尔值来判别参与或许暗藏类，同时。
类和样式（style）所接受的数据类型为对象。
V-model指令的作用是将数据启动双向绑定，仅限于输入类型标签。
当用户在页面输入时，数据层的数据会跟着扭转。
这是VM形式。
由v驱动m。
除了这些普通的指令之外，还有事情指令v-on:，可简写为@+事情名，例如：@click，并将口头函数写到vue的methods中
经过脚手架来写名目标话，可用经过写组件，再将组件引入（注册）到另一个vue文件里拼接在一同，从而构建出一个页面。
（组件书写格局）
（组件整合）
（注册路由）
路由是经过vue-router来成功的，在注册路由的时刻要将router实例化。
不同的路由跳转不同的页面，这是搭建单页面运行的好处。
而父组件与子组件之间的通信可以经过props将父组件的消息传递给子组件，扭转子组件的内容，这样子组件的复用就不会有阻碍了，而子组件传递消息给父组件或许其余组件的通信则需vuex。
经过引入vuex并实例化一个作为一个公共平台，将数据启动传输。
经过vue的computed方法接纳数据，经过methods方法扭转数据。
而这个专用平台可以成功组件与组件之间的消息传递，从而成功组件之间的交互。
经过一个星期的实战，深深的体会到了vue的好处，在构建移动端这方面的效率很高。
但在搭建的环节中，还是少不了与jQuery联合，毕竟每个工具都有其好处，择其优而用是理智的选用。
vue静态网站模版(vue加载html静态页面)
vue聊天室的基础静态页面搭建
接着关上这个文件在build文件夹中，参与然后还是这个文件，找到plugins，在外面参与留意着外面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。
依照你的route来写。
审核node能否装置成功为了更快装置，可以经常使用淘宝的镜像：http：///在终端输入以下命令：检测cnpm能否装置成功vue-cli是vue脚手架工具，繁难打包，部署，测试等。
前言：Vue主机驳回nginxVue为主机；请确保你是以领有sudo权限的用户来登录的主机请依照上方的步骤，在CentOS中装置Nginx。
Vue模板渲染的原理是什么1、vue的渲染分为两个部分：vue自身的初始化；生命周期钩子函数的环节自身初始化时，经过五个mixin方法为vue自身注入关系属性和方法。
2、原理：Vue框架的外围是虚构DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。
3、原理是：vue在编译的时刻经过在DOM元素以及css样式上加上惟一标志，成功样式私有化，不污染全局样式。
如：编译为；对应的样式。
my-class编译为。
my-class[data-v-56e7f951]。
1、VuePress是一个以Markdown为中心的静态网站生成器，一个VuePress站点实质上是一个由Vue在和VueRouter驱动的单页面运行(SPA)。
路由会依据你的Markdown文件的相对门路来智能生成。
2、先繁难引见一下VuePress，这是尤大在2018年4月份颁布的一个新轮子。
一个基于VueSSR的静态站生成器，原本的目标是爽爽的写文档，然而我发现用来撸一团体博客也十分不错。
3、官方文档：https：///Vue驱动的静态网站生成器。
4、上方咱们来经常使用VuePress来搭建一个博客系统。
我这里经常使用的是vuepress社区主题vuepress-theme-hope（一款集成了泛滥插件的vuepress主题）。
理想上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页运行。
5、GatsbyGatsby是一个越来越盛行的开源网站生成框架。
它经常使用来生成极速、界面柔美的网站。
Primary:Vue{三、一个基于Vue的门户网站(阅历踩坑)}
(windowasany)参考：vue3报错UncaughtErrorvue2中用法：vue3用法：vue3+ts中经常使用process报错，找不到称号“process”。
Vue将被侦听的数组的变卦方法启动了包裹，所以它们也将会触发视图降级。
当天到公司，继续关上我的vue的名目，然而页面显示的是CannotGET，关上控制台之后，发现有一篇白色报错。
vue名目静态资源(图片,字体)援用门路正确姿态
咱们须要在template，script，style下援用图片，如下。
比如这里能用@assets是由于在外面设置了如下参数。
咱们首先关上，检查template：外面定义了一个Vuelogo，其中援用了asserts文件夹的图片。
依据门路，咱们可以找到图片门路。
那么假设咱们有其余图片，人造也可以类比经常使用。
vue打包上线后经常会碰到静态资源门路找不到的疑问。
静态资源文件放入public文件夹下（相似cli2外面的static文件夹），打包时不会被wenpack处置，输入文件在dist文件夹下。
public文件夹public文件夹下的文件并不会被Webpack处置：它们会间接被复制到最终的打包目录（文件名需指定）下。
必定经常使用相对门路援用这些文件，繁难说就是用来寄存万年不变的文件。
在vuex版本相似static/文件夹。
所以当天龙哥教你一套新的前端框架，基于vue的ssr前端框架—nuxt。
本地开发的时刻，经常使用vue语法，模块化你的名目，然后颁布的时刻生成静态，把ajax得来到的内容转化成静态html以利于seo。
接着关上这个文件在build文件夹中，参与然后还是这个文件，找到plugins，在外面参与留意着外面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。
依照你的route来写。
普通经常使用nodejs环境下的pm2运转颁布generate打包用于将首页静态化（首页的nuxt-link也会被静态化），打包后生成dist文件夹（相似于vue普通性打包）。
颁布时，只要要将dist文件夹颁布即可（同vue名目颁布）。
需在plugins文件夹里创立一个文件，内容如下：在nuxt名目中如何经常使用scss？与Vue中经常使用的有和不同？也繁难，只是性能上略有不同，经常使用上没有不同。
Vue3基础-模板语法
假设咱们宿愿把数据显示到模板（template）中，经常使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。
并且咱们前端提到过，data前往的对象是有参与到Vue的照应式系统 中，当data中的数据出现扭转时，对应的内容也会出现降级。
当然，Mustache中不只仅可以是data中的属性，也可以是一个Javascript的表白式：
上方这种写法是语句不是表白式，所以是失误的：
v-once用于指定元素或许组件只渲染一次性，当数据出现变动时，元素或许组件以及其一切的子元素将视为静态内容并且跳过，该指令可以用于性能提升。
假设参与到父节点，那么一切的子节点也是只会渲染一次性：
用于降级元素的 textContent，等价于Mustache语法，而且Mustache语法更灵敏。
自动状况下，假设咱们展现的内容自身是 html 的，那么vue并不会对其启动不凡的解析。
假设咱们宿愿这个内容被Vue可以解析进去，那么可以经常使用 v-html 来展现。
成果如下：
v-pre用于跳过元素和它的子元素的编译环节，显示原始的Mustache标签。
跳过不须要编译的节点，放慢编译的速度。
成果如下：
这个指令坚持在元素上直到关联组件实例完结编译。
v-cloak 和 CSS 规定如 [v-cloak] { display: none } 一同用时，这个指令可以暗藏未编译的 Mustache 标签直到组件实例预备终了，关键用于处置闪烁疑问，如今Vue3普通不会出现这个疑问了。
<div> 不会显示，直到编译完结。
前面讲的一系列指令，关键是将值拔出到模板内容中。
然而，除了内容须要灵活来选择外，某些属性咱们也宿愿灵活来绑定。
比如灵活绑定a元素的href属性，灵活绑定img元素的src属性。
绑定属性咱们经常使用 v-bind: ，缩写 : ，用于灵活地绑定一个或多个 attribute，或一个组件 prop 到表白式。
v-bind用于绑定一个或多个属性值，或许向另一个组件传递props值（这个学到组件时再引见），在开发中，有哪些属性须要灵活启动绑定呢？还是有很多的，比如图片的链接src、网站的链接href、灵活绑定一些类、样式等等。
v-bind有一个对应的语法糖，也就是简写方式，在开发中，咱们理论会经常使用语法糖的方式，由于更繁复。
留意 ：Vue2 template模板中只能有一个根元素，Vue3 template模板中准许有多个根元素。
在开发中，有时刻咱们的元素class也是灵活的，比如：当数据为某个形态时，字体显示白色，当数据另一个形态时，字体显示彩色。
绑定class有两种方式：对象语法，数组语法。
① 对象语法：咱们可以传给 :class (v-bind:class 的简写) 一个对象，以灵活地切换 class。
② 数组语法：咱们可以把一个数组传给 :class，以运行一个 class 列表；
咱们可以应用v-bind:style来绑定一些CSS内联样式，这是由于某些样式咱们须要依据数据灵活来选择，比如某段文字的色彩，大小等等。
CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
绑定style有两种方式：对象语法，数组语法。
① 对象语法：
② 数组语法： :style的数组语法可以将多个样式对象运行到同一个元素上
在某些状况下，咱们属性的称号或许也不是固定的。
前面咱们无论绑定src、href、class、style，属性称号都是固定的，假设属性称号不是固定的，咱们可以经常使用 :[属性名]=“值” 的格局来定义，这种绑定的方式，咱们称之为灵活绑定属性。
假设咱们宿愿将一个对象的一切属性，绑定到元素上的一切属性，应该怎样做呢？十分繁难，咱们可以间接经常使用 v-bind 绑定一个对象。
如下：info对象会被拆解成div的各个属性。
前面咱们绑定了元素的内容和属性，在前端开发中另外一个十分关键的个性就是交互。
在前端开发中，咱们须要经常和用户启动各种各样的交互，这个时刻，咱们就必定监听用户出现的事情，比如点击、拖拽、键盘事情等等。
在Vue中如何监听事情呢？经常使用v-on指令。接上去咱们来看一下v-on的用法：
咱们可以经常使用v-on来监听一下点击的事情：
v-on:click可以写成@click，是它的语法糖写法：
当然，咱们也可以绑定其余的事情：
假设咱们宿愿一个元素绑定多个事情，这个时刻可以传入一个对象：
当经过methods中定义方法，以供@click调用时，须要留意参数疑问：
状况一：假设该方法不须要额外参数，那么方法后的()可以不参与，并且方法的成功不用参数，间接就可以打印event。
状况二：假设须要同时传入某个参数和event时，可以经过$event传入事情，并且方法的成功必定按顺序写明参数。
代表enter键弹起的时刻会调用onEnter方法，咱们普通在方法外面失掉输入的值：
在某些状况下，咱们须要依据以后的条件选择某些元素或组件能否渲染，这个时刻咱们就须要启动条件判别了。
Vue提供了上方的指令来启动条件判别：
上方咱们来对它们启动学习。
v-if、v-else、v-else-if 用于依据条件来渲染某一块的内容，这些内容只要在条件为true时，才会被渲染进去，这三个指令与Javascript的条件语句 if、else、else if 相似。
v-if 的渲染原理：v-if是惰性的，当条件为false时，其判别的内容齐全不会被渲染或许会被销毁掉，当条件为true时，才会真正渲染条件块中的内容。
由于v-if是一个指令，所以必定将其参与到一个元素上，然而假设咱们宿愿切换的是多个元素呢？ 假设此时咱们经常使用div包裹，div会被渲染到界面过去，然而咱们并不宿愿div被渲染，这个时刻，咱们可以选用经常使用template，template元素可以当做无法见的包裹元素，并且 v-if 可以参与到 template 上，然而最终template不会被渲染进去，相似于小程序中的block。
v-show和v-if的用法看起来是分歧的，也是依据一个条件选择能否显示元素或许组件。
首先，在用法上的区别：
其次，实质的区别：
开发中如何启动选用呢？
在实在开发中，咱们往往会从主机拿到一组数据，并且须要对其启动渲染。
这个时刻咱们可以经常使用v-for来成功，v-for相似于Javascript的for循环，可以用于遍历一组数据。
v-for的基本格局是 item in 数组 ，数组理论是来自data或许prop，也可以是其余方式，item是咱们给每项元素起的一一般名，这一般名可以自定来定义。
咱们知道，在遍历一个数组的时刻会经常须要拿到数组的索引，假设咱们须要索引，可以经常使用格局 (item, index) in 数组 ，留意顺序，数组元素项item在前面，索引项index在前面。
相似于v-if，你可以经常使用 template 元历来循环渲染一段蕴含多个元素的内容。
咱们经常使用template来对多个元素启动包裹，而不是经常使用div来成功，由于div会被渲染，template不会被渲染。
而且假设有ul，ul外面不介绍放div，只介绍放li。
Vue 将被侦听的数组的变卦方法启动了包裹，所以它们也将会触发视图降级，这些被包裹过的方法包括：
上方的方法会间接修正原来的数组，所以视图会跟着降级。然而某些方法不会交流原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()，这时刻咱们可以经过从新赋值的方式触发视图降级，如下：
在经常使用v-for启动列表渲染时，咱们理论会给元素或许组件绑定一个key属性。
这个key属性有什么作用呢？ 咱们先来看一下官方的解释：key属性关键用在Vue的虚构DOM算法，在新旧nodes对比时辨识VNodes。
假设不经常使用key，Vue会经常使用一种最大限制缩小灵活元素并且尽或许的尝试就地修正/复用相反类型元素的算法，而经常使用key时，它会基于key的变动从新陈列元素顺序，并且会移除/销毁key不存在的元素。
官方的解释关于初学者来说并不好了解，比如上方的疑问： 什么是新旧nodes，什么是VNode？ 没有key的时刻，如何尝试修正和复用的？ 有key的时刻，如何基于key从新陈列的？
咱们先来解释一下VNode的概念： VNode的全称是Virtual Node，也就是虚构节点。
理想上，无论是组件还是元素，它们最终在Vue中示意进去的都是一个个VNode。
VNode的实质是一个Javascript的对象。
假设咱们不只是一个繁难的div，而是有一大堆的元素，那么它们应该会构成一个VNode Tree。
咱们先来看一个案例：这个案例是当咱们点击按钮时会在li两边拔出一个f。
咱们可以确定的是，这次降级关于ul和button是不须要启动降级，须要降级的是咱们li的列表。
在Vue中，关于相反父元素的子元素节点并不会从新渲染整个列表，由于关于列表中 a、b、c、d它们都是没有变动的。
在操作实在DOM的时刻，咱们只要要在两边拔出一个f的li即可。
那么Vue中关于列表的降级终究是如何操作的呢？ Vue理想上会关于有key和没有key会调用两个不同的方法，有key，那么就调用 patchKeyedChildren方法，没有key，那么就调用 patchUnkeyedChildren方法。
没有key的diff算法：
咱们会发现上方的diff算法效率并不高，c和d来说它们理想上并不须要有任何的改动，然而由于咱们的c被f所经常使用了，一切后续一切的内容都要一次性启动改动，并且最后启动新增。
有key的diff算法：
所以咱们可以发现，Vue在启动diff算法的时刻，会尽量应用咱们的key来启动提升操作，在没有key的时刻咱们的效率是十分低效的，在启动拔出或许重置顺序的时刻，坚持相反的key可以让diff算法愈加的高效。
