Vue.js框架详解-优快云博客

前言

Vue是一套用于构建用户界面的渐进式框架，由尤雨溪创作于2013年。发展至今一共三个版本：1.x、2.x、3.x

2.x VS 1.x，实在太多了，直接参考
- Vue Router2和Vue2兼容
- 每个组件必须只有一个根元素
```
  <div>
    <p>foo</p>
    <p>bar</p>
  </div>
复制代码
```
- 生命周期钩子函数
  beforeCompile 移除
  created 替代
  
  compiled 移除、attached 移除、ready移除
  mounted 替代
  
  detached 移除
  destroyed 替代
  
  init移除
  beforeCreated 替代
- v-for 遍历数据时的参数顺序变更，现在是(value, key)，key 两个隐式声明变量移除；track-by 替换为 key，且必须写，如:key='abcd'；v-for="number in 10"现在从 1 开始，到 10 结束
- Props
  - coerce Prop 的参数移除，如果需要检查 prop 的值，创建一个内部的 computed 值
  - twoWay Prop 的参数移除，v-bind 的 .once和.sync 修饰符移除，Props 现在只能单向传递。为了对父组件产生反向影响，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定
- v-bind 真/假值变更
  在2.0中使用 v-bind 时，只有 null, undefined，和 false 被看作是假。这意味着，0 和空字符串将被作为真值渲染
- 用v-on监听事件变更现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符
- 带有 debounce 的 v-model移除
- v-el 和v-ref 替换
  v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用
- v-else 不能再跟在 v-show后面使用
- Vue 的过渡系统有了彻底的改变，现在通过使用和来包裹元素实现过渡效果，而不再使用 transition 属性
- $dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex
- 现在过滤器只能用在插入文本中 ({{ }} tags)
3.x VS 2.x
- 随着虚拟 DOM 重写，我们可以期待更多的编译时（compile-time）提示来减少运行时（runtime）开销
- 优化插槽生成，在当前的 Vue 版本中，当父组件重新渲染时，其子组件也必须重新渲染。使用 Vue 3 ，可以单独重新渲染父组件和子组件。
- 静态树提升，使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本
- 静态属性提升，基于 Proxy 的观察者机制
- 使 Vue 更小，runtime版本压缩后大概10KB
- 实验性的 Hooks API
  当我们需要在 Vue 中共享两个组件之间的行为时，我们通常使用 Mixins 。然而，Evan 正在尝试使用 Hooks API 来避免来自 Mixins 的一些问题
- 实验性的 Time Slicing 支持
  当您有许多组件同时尝试重新渲染时，任何浏览器都可以开始变得很慢，从而使用户体验下降

组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。一个组件可以在不同页面中被复用，从父作用域将数据传到子组件才对。

注册组件

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
复制代码

data 必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

基础

数据与方法

data 对象中的属性值会发生视图的响应

生命周期

直接看英文翻译就可以了

beforeCreate
created
beforeMounted
mounted
beforeUpdated：挂载后，data更新前
updated
beforeDestroy
destroy

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

<span v-once>{{ msg }}</span>
复制代码

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
复制代码

watch和computed

watch必须在data里，computed是计算属性，不需要在data里定义。

Class 与 Style 绑定

class

  <div v-bind:class="[activeClass, errorClass]"></div>
  <div v-bind:class="{ active: isActive }"></div>
  <div v-bind:class="[{ active: isActive }, errorClass]"></div>
复制代码

style

  <div v-bind:style="[baseStyles, overridingStyles]"></div>
复制代码

用 v-for 把一个数组对应为一组元素

我们用 v-for 指令根据一组数组的选项列表进行渲染

数据与方法

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡。

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
复制代码

Mixins

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
复制代码

bind：只调用一次，指令第一次绑定到元素时调用
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

插件

可以参考http://vue.awesometiny.com/，里面有很多好用的插件。

轮播

Vue-Awesome-Swiper swiper是大名鼎鼎的老牌轮播组件,其性能、可靠性和功能的丰富性都极佳

布局

vue-waterfall，瀑布流布局组件
vue-fullpage，整屏滚动常见于宣传介绍型的页面，组件除了滚动本身还可以进行事件回调，功能全面

图标

Vue-Awesome，方便顺手的引入Font Awesome
Vue-Fontawesome，方便的引入Font Awesome 5，不但能快速引入Font Awesome5的组件，还有旋转、位移、边框等快速设置属性

拖动排布

这个功能，后台系统定制组件或者页面时常常有，给item项排序

Vue.Draggable，用户以拖动的方式对单组或多组卡片进行排列
vue-slicksort，触屏友好、丝滑反馈动效、可混合到自定义控件中，单组
vue-js-grid，动效非常精致，被拖动者会“颤抖”，其它对象会受拖动影响而平滑运动，网格版动效
vue-grid-layout，通过拖动为一堆卡片安排位置，支持丰富的相关设置，比如容器尺寸自动变化
dnd-grid，通过拖动为一堆卡片安排位置，支持丰富的相关属性，比如能拉动修改卡片尺寸“灵活”排布，即卡片可以放置在容器中任何位置

效果

Vue-Touch-Ripple，Ripple是比较平衡自然的点击体验效果，很可能会发展为点击体验效果的未来趋势
vue-word-cloud，很有气场的文字墙效果，重排效果很赞
vue-flat-surface-shader，直译过来是“平面着色器”，通过灰度差和几何图形变换实现着色效果，在特定场景下适合展现“坚毅”情怀
vue-sticker，适合隐匿网页彩蛋
status-indicator，可起弱强调作用，能方便快速的引入

组件库

Vuetify，组件设计往往恰到好处，快速上手使用，容易学习并且给你的用户体验增强带来实质的帮助
Quasar，包含组件极度丰富，可能是目前包含组件最全面的框架，甚至包含富文本编辑组件（即便在重型组件库中也难得一见）同时支持Web 、Web Mobile、Mobile App、PWA
Vux，国内S级移动组件库
vuesax，这是一个不包含布局的组件包，只有几种常用组件
Element，这是一款国人开发的框架，组件比较适合国人的使用习惯，本地化更好