系统化学习前端之Vue（vue2）

前言

vue2 截止 2023 年 12 月 31 日不再维护更新，将全面拥抱 vue3 了。

vue2

vue2 是一个实现 UI 层的渐进式 js 框架。vue2 本质是一个类，可以配置 options API 实例化为一个 vm 对象，通过模板编译处理成虚拟 DOM，对比更新后生成真实 DOM 并挂载至页面中，实现页面渲染，相较于原生 js 更加易用，灵活，高效。

简而言之，vue2 的实例对象就是一种特殊的 DOM，可以通过 Options API 配置化生成 DOM，vue2 也提供一系列的方法（静态方法和实例方法）和属性（静态属性和实例属性）来支持操作 DOM。这个 DOM 支持更小粒度的拆分和组合，这种小粒度的 DOM 称之为组件，而组件也是 vue2 的实例对象。

Options API

Options API 是 vue 的配置选项，用户可以通过指定配置，实例化自定义的 vm 对象，可以具备数据，DOM元素，交互方法等。

DOM Options

DOM Options 主要包含 el, template, render, renderError 四个选项。

1. el

   el 是 vue 实例关联 HTML 文档的唯一配置项，可以通过配置 el 选项指定 vm 对象挂载 DOM 位置。

   <div id="app"></div>
   <script type="text/javascript">
       const vm = new Vue({
           el: '#app',
           template: `<h1>template</h1>`,
       })
   </script>
   

   vm 对象也可以通过实例方法 vm.$mount() 挂载指定 DOM。

   <div id="app"></div>
   <script type="text/javascript">
       const vm = new Vue({
          template: `<h1>template</h1>`,
       })
       vm.$mount('#app')
   </script>
   

   注意：vue2 中实例化 vm 对象的方式有：new Vue(), Vue.component, Vue.extend() 三种方式，el 选项只在 new Vue() 实例化过程生效，其他两种方式实例化对象需要通过 components 方式挂载至 new Vue() 实例化对象上。

2. template

   template 用于指定当前 vm 对象渲染在页面中的 DOM 元素，当 el 选项生效时，可以省略，则挂载 DOM 即渲染 DOM。

   <div id="app"></div>
   <script type="text/javascript">
       const vm = new Vue({
           el: '#app',
           template: `<h1>template</h1>`,
       })
   </script>
   

3. render

   render 优先级最高，一旦重写 render 方法，优先使用 render 返回 DOM。

   <div id="app"></div>
   <script type="text/javascript">
      const vm = new Vue({
          el: '#app',
          template: `<h1>template</h1>`,
          render(createElement) {
              return createElement('div', { id: 'test' }, 'render')
          }
      })
   </script>
   

   render 方法参数 createElement 是一个函数，接收三个参数：标签名，属性，子元素，返回参数生成的 DOM 元素。

4. renderError

Data Options

1. data

2. props

3. propsData

4. computed

5. methods

6. watch

LifeCycle Options

1. beforeCreate

2. created

3. beforeMount

4. mounted

5. beforeUpdate

6. updated

7. beforeDestroy

8. destroyed

9. actived

10. deactived

11. errorCaptured

Source Options

1. directives

2. filters

3. components

Compostion Options

1. parent

2. mixins

3. extends

4. provide / inject

Other Options

1. name

2. delimiters

3. functional

4. model

5. inheritAttrs

6. comments

静态方法

vue2 中实例方式是全局 API，是实例方法的延伸。

extend

component

nextTick

set

delete

directive

filter

use

mixin

compile

observable

version

静态属性

vue2 中静态属性只有一个 config 配置属性，config 是一个配置对象属性，包含多个具体属性配置。

silent

optionMergeStrategies

devtools

errorHandler

warnHandler

ignoredElements

keyCodes

performance

productionTip

实例方法

Data Method

Event Method

LifeCycle Method

实例属性

vue2 中实例属性实际为组件属性。

data

props

el

options

parent

children

root

slots

scopedSlots

refs

isServer

attrs

listeners

内置组件

component

transition

transition-group

keep-alive

slot

内置指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-slot

v-pre

v-cloak

v-once

特殊属性

key

ref

is

slot

slot-scope

scope

后记

尽管 vue2 不再支持，在框架的变更节点上的我们，势必要同时面对 vue2 和 vue3 项目，既不可抛弃旧爱 vue2，又必须另找新欢 vue3，尽力“渣”下去吧！