Vue 2 API 详解

1. 全局 API

Vue.extend(options)

作用：创建一个继承自 Vue 的子类构造器。
参数：options - 组件选项对象。
返回值：一个新的 Vue 子类构造器。
使用场景：用于创建可复用的组件构造器，特别是在大型应用中。

javascript

const MyComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello World'
    }
  }
})

// 创建实例
new MyComponent().$mount('#app')

Vue.component(id, [definition])

作用：注册或获取全局组件。
参数：
- id - 组件的名称。
- definition - 组件的定义对象或构造器。
返回值：注册时返回组件构造器，获取时返回已注册的组件。
使用场景：用于注册全局可复用组件。

javascript

// 注册组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello'
    }
  }
})

// 使用组件
// <my-component></my-component>

Vue.directive(id, [definition])

作用：注册或获取全局指令。
参数：
- id - 指令的名称。
- definition - 指令的定义对象。
返回值：注册时返回指令定义，获取时返回已注册的指令。
使用场景：用于创建自定义指令，实现 DOM 操作相关的功能。

javascript

// 注册指令
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

// 使用指令
// <input v-focus>

Vue.filter(id, [definition])

作用：注册或获取全局过滤器。
参数：
- id - 过滤器的名称。
- definition - 过滤器函数。
返回值：注册时返回过滤器函数，获取时返回已注册的过滤器。
使用场景：用于格式化文本，如日期、货币等。

javascript

// 注册过滤器
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  return value.charAt(0).toUpperCase() + value.slice(1)
})

// 使用过滤器
// {{ message | capitalize }}

Vue.use(plugin)

作用：安装 Vue 插件。
参数：plugin - 插件对象或函数。
使用场景：用于集成第三方插件，如 Vue Router、Vuex 等。

javascript

// 安装插件
Vue.use(VueRouter)
Vue.use(Vuex)

Vue.mixin(mixin)

作用：全局注册一个混入对象，影响所有 Vue 实例。
参数：mixin - 混入对象。
使用场景：用于在多个组件之间共享逻辑。

javascript

// 注册全局混入
Vue.mixin({
  created() {
    console.log('Global mixin created')
  }
})

Vue.compile(template)

作用：将模板字符串编译为渲染函数。
参数：template - 模板字符串。
返回值：包含 render 函数和 staticRenderFns 数组的对象。
使用场景：用于动态编译模板，如在运行时生成模板。

javascript

const { render } = Vue.compile('<div>{{ message }}</div>')

new Vue({
  data: {
    message: 'Hello'
  },
  render
}).$mount('#app')

Vue.nextTick([callback, context])

作用：在下次 DOM 更新循环结束后执行回调。
参数：
- callback - 回调函数。
- context - 回调函数的 this 上下文。
返回值：如果没有提供回调，返回一个 Promise。
使用场景：用于在 DOM 更新后执行操作，如获取更新后的 DOM 尺寸。

javascript

// 使用回调
Vue.nextTick(() => {
  // DOM 更新后执行
  console.log('DOM updated')
})

// 使用 Promise
Vue.nextTick().then(() => {
  // DOM 更新后执行
  console.log('DOM updated')
})

Vue.set(object, key, value)

作用：向响应式对象添加属性，并确保新属性也是响应式的。
参数：
- object - 目标对象。
- key - 属性名。
- value - 属性值。
使用场景：用于在响应式对象上添加新属性，解决 Vue 无法检测到对象新增属性的问题。

javascript

const vm = new Vue({
  data: {
    user: {
      name: 'John'
    }
  }
})

// 响应式添加属性
Vue.set(vm.user, 'age', 30)

Vue.delete(object, key)

作用：删除对象的属性，并确保删除能触发更新。
参数：
- object - 目标对象。
- key - 属性名。
使用场景：用于删除响应式对象的属性，解决 Vue 无法检测到对象属性删除的问题。

javascript

const vm = new Vue({
  data: {
    user: {
      name: 'John',
      age: 30
    }
  }
})

// 响应式删除属性
Vue.delete(vm.user, 'age')

2. 实例属性

vm.$data

作用：Vue 实例的数据对象。
使用场景：用于访问或修改实例的响应式数据。

javascript

const vm = new Vue({
  data: {
    message: 'Hello'
  }
})

console.log(vm.$data.message) // 'Hello'
vm.$data.message = 'World' // 修改数据

vm.$props

作用：当前组件接收到的 props 对象。
使用场景：用于访问组件的 props 数据。

javascript

const vm = new Vue({
  props: ['message'],
  mounted() {
    console.log(this.$props.message)
  }
})

vm.$el

作用：Vue 实例挂载的 DOM 元素。
使用场景：用于直接操作 DOM 元素。

javascript

const vm = new Vue({
  mounted() {
    console.log(this.$el) // 挂载的 DOM 元素
  }
})

vm.$options

作用：Vue 实例的初始化选项。
使用场景：用于访问实例的初始化选项，如自定义属性。

javascript

const vm = new Vue({
  customOption: 'custom value',
  mounted() {
    console.log(this.$options.customOption) // 'custom value'
  }
})

vm.$parent

作用：父组件实例。
使用场景：用于访问父组件的数据和方法。

vm.$children

作用：子组件实例数组。
使用场景：用于访问子组件的数据和方法。

vm.$refs

作用：持有注册过 ref 特性的 DOM 元素或组件实例。
使用场景：用于直接访问 DOM 元素或子组件实例。

html

<template>
  <div>
    <input ref="input" />
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.$refs.input.focus() // 访问 DOM 元素
      this.$refs.child.doSomething() // 访问子组件方法
    }
  }
</script>

vm.$slots

作用：包含所有插槽的对象。
使用场景：用于访问和操作组件的插槽内容。

vm.$scopedSlots

作用：包含所有作用域插槽的对象。
使用场景：用于访问和操作组件的作用域插槽。

vm.$isServer

作用：判断当前实例是否在服务器端渲染环境中。
使用场景：用于在服务器端和客户端执行不同的逻辑。

vm.$attrs

作用：包含未被 props 接收的属性的对象。
使用场景：用于将未使用的属性传递给子组件。

vm.$listeners

作用：包含所有父组件传递的事件监听器的对象。
使用场景：用于将事件监听器传递给子组件。

3. 实例方法

数据方法

vm.$watch(expOrFn, callback, [options])

作用：监听数据变化。
参数：
- expOrFn - 要监听的表达式或函数。
- callback - 回调函数。
- options - 选项对象，如 deep、immediate 等。
返回值：取消监听的函数。
使用场景：用于监听数据变化并执行相应的操作。

javascript

const unwatch = vm.$watch(
  'message',
  (newVal, oldVal) => {
    console.log('message changed:', newVal, oldVal)
  },
  {
    deep: true, // 深度监听
    immediate: true // 立即执行
  }
)

// 取消监听
unwatch()

vm.$set(object, key, value)

作用：向响应式对象添加属性。
参数：同 Vue.set。
使用场景：同 Vue.set。

vm.$delete(object, key)

作用：删除对象的属性。
参数：同 Vue.delete。
使用场景：同 Vue.delete。

事件方法

vm.$on(event, callback)

作用：监听自定义事件。
参数：
- event - 事件名。
- callback - 回调函数。
使用场景：用于组件内部事件通信。

javascript

vm.$on('custom-event', data => {
  console.log('Custom event triggered:', data)
})

vm.$once(event, callback)

作用：监听自定义事件，只触发一次。
参数：同 vm.$on。
使用场景：用于只需要触发一次的事件。

vm.$off([event, callback])

作用：移除事件监听器。
参数：
- event - 事件名。
- callback - 回调函数。
使用场景：用于清理事件监听器，避免内存泄漏。

vm.$emit(event, [...args])

作用：触发自定义事件。
参数：
- event - 事件名。
- ...args - 传递给监听器的参数。
使用场景：用于子组件向父组件传递数据。

javascript

// 子组件
vm.$emit('update', { value: 10 })

// 父组件
// <child-component @update="handleUpdate"></child-component>

生命周期方法

vm.$mount([elementOrSelector])

作用：手动挂载 Vue 实例。
参数：
- elementOrSelector - DOM 元素或选择器。
返回值：Vue 实例。
使用场景：用于手动控制实例的挂载时机。

javascript

const vm = new Vue({
  template: '<div>Hello</div>'
})

vm.$mount('#app')

vm.$forceUpdate()

作用：强制更新视图。
使用场景：用于在某些情况下手动触发视图更新。

vm.$nextTick([callback])

作用：同 Vue.nextTick。
使用场景：同 Vue.nextTick。

vm.$destroy()

作用：销毁 Vue 实例。
使用场景：用于手动销毁实例，释放资源。

4. 指令

内置指令

v-text

作用：更新元素的文本内容。
使用场景：用于显示纯文本内容。

html

<span v-text="message"></span>
<!-- 等同于 -->
<span>{{ message }}</span>

v-html

作用：更新元素的 innerHTML。
使用场景：用于显示 HTML 内容。

html

<div v-html="htmlContent"></div>

v-show

作用：根据表达式的值切换元素的 display CSS 属性。
使用场景：用于频繁切换显示/隐藏的元素。

html

<div v-show="isVisible">Visible</div>

v-if

作用：根据表达式的值条件性地渲染元素。
使用场景：用于不频繁切换的条件渲染。

html

<div v-if="isVisible">Visible</div>

v-else

作用：与 v-if 配合使用，当 v-if 条件不满足时渲染。
使用场景：用于 else 分支的条件渲染。

html

<div v-if="isVisible">Visible</div>
<div v-else>Hidden</div>

v-else-if

作用：与 v-if 配合使用，用于多条件分支。
使用场景：用于多个条件的分支渲染。

html

<div v-if="type === 'A'"></div>
<div v-else-if="type === 'B'"></div>
<div v-else></div>

v-for

作用：基于源数据渲染列表。
使用场景：用于渲染数组或对象的列表。

html

<ul>
  <li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

v-on

作用：绑定事件监听器。
缩写：@
使用场景：用于处理 DOM 事件。

html

<button v-on:click="handleClick">Click</button>
<!-- 缩写 -->
<button @click="handleClick">Click</button>

v-bind

作用：动态绑定属性。
缩写：:
使用场景：用于绑定元素属性。

html

<img v-bind:src="imageSrc" />
<!-- 缩写 -->
<img :src="imageSrc" />

v-model

作用：在表单元素上创建双向数据绑定。
使用场景：用于表单输入的双向绑定。

html

<input v-model="message" />

v-pre

作用：跳过这个元素及其子元素的编译过程。
使用场景：用于显示原始模板内容。

html

<div v-pre>{{ message }}</div>
<!-- 显示 {{ message }} 而不是变量值 -->

v-cloak

作用：在 Vue 实例编译完成前保持元素隐藏。
使用场景：用于防止模板闪烁。

html

<div v-cloak>{{ message }}</div>

v-once

作用：只渲染元素和组件一次。
使用场景：用于静态内容，提高性能。

html

<div v-once>{{ message }}</div>
<!-- 只渲染一次 -->

5. 特殊属性

key

作用：用于识别 VNode，提高渲染性能。
使用场景：在 v-for 中使用，或用于触发组件的重新渲染。

html

<li v-for="item in items" :key="item.id"></li>

ref

作用：给元素或组件注册引用。
使用场景：用于直接访问 DOM 元素或组件实例。

html

<input ref="input" /> <child-component ref="child"></child-component>

is

作用：用于动态组件。
使用场景：用于根据条件渲染不同的组件。

html

<component :is="currentComponent"></component>

slot

作用：用于定义插槽。
使用场景：用于组件的内容分发。

html

<template>
  <div>
    <slot></slot>
  </div>
</template>

slot-scope

作用：用于作用域插槽。
使用场景：用于从子组件获取数据。

html

<child-component>
  <template slot-scope="props"> {{ props.data }} </template>
</child-component>

6. 选项对象

数据选项

data

作用：定义组件的数据。
使用场景：用于存储组件的响应式数据。

javascript

data() {
  return {
    message: 'Hello',
    count: 0
  };
}

props

作用：定义组件的属性。
使用场景：用于接收父组件传递的数据。

javascript

props: {
  message: String,
  count: {
    type: Number,
    default: 0,
    required: true
  }
}

computed

作用：定义计算属性。
使用场景：用于基于响应式数据进行计算。

javascript

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

methods

作用：定义组件的方法。
使用场景：用于处理组件的逻辑。

javascript

methods: {
  handleClick() {
    this.count++;
  }
}

watch

作用：定义监听器。
使用场景：用于监听数据变化并执行副作用。

javascript

watch: {
  message(newVal, oldVal) {
    console.log('message changed:', newVal, oldVal);
  }
}

DOM 选项

el

作用：指定 Vue 实例挂载的元素。
使用场景：用于指定实例的挂载点。

javascript

el: '#app'

template

作用：定义组件的模板。
使用场景：用于定义组件的结构。

javascript

template: '<div>{{ message }}</div>'

render

作用：使用渲染函数定义组件。
使用场景：用于复杂的组件结构或动态组件。

javascript

render(h) {
  return h('div', this.message);
}

生命周期选项

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
activated
deactivated

其他选项

directives

作用：注册局部指令。
使用场景：用于组件内部的自定义指令。

filters

作用：注册局部过滤器。
使用场景：用于组件内部的过滤器。

components

作用：注册局部组件。
使用场景：用于组件内部的子组件。

mixins

作用：混入对象。
使用场景：用于在组件之间共享逻辑。

provide / inject

作用：用于组件间的依赖注入。
使用场景：用于跨级组件通信。

7. 总结

Vue 2 提供了丰富的 API，包括全局 API、实例属性、实例方法、指令和特殊属性。这些 API 共同构成了 Vue 的完整生态系统，使开发者能够构建复杂的前端应用。

API 分类与使用建议

全局 API：用于全局配置、插件安装、组件注册等。
实例属性：用于访问实例的状态和 DOM 元素。
实例方法：用于操作实例的状态、事件和生命周期。
指令：用于在模板中实现各种功能。
特殊属性：用于特殊的功能，如插槽、动态组件等。

最佳实践

优先使用计算属性：对于复杂的计算逻辑，优先使用计算属性而不是方法。
合理使用 watch：只在需要执行副作用时使用 watch。
避免直接操作 DOM：尽量使用数据驱动视图，避免直接操作 DOM。
使用 key 提高性能：在 v-for 中使用唯一的 key。
合理使用生命周期钩子：在适当的生命周期阶段执行相应的操作。

通过掌握这些 API，你将能够更有效地使用 Vue 2 构建高质量的前端应用。

React 基础与核心思想

React 状态管理方案

React Hooks 深度解析

React 性能优化与新特性

渲染和性能

DOM/事件模型

异步/网络/安全

前端攻防安全

经典布局案例

Vue 2 API 详解 ​

1. 全局 API ​

Vue.extend(options) ​

Vue.component(id, [definition]) ​

Vue.directive(id, [definition]) ​

Vue.filter(id, [definition]) ​

Vue.use(plugin) ​

Vue.mixin(mixin) ​

Vue.compile(template) ​

Vue.nextTick([callback, context]) ​

Vue.set(object, key, value) ​

Vue.delete(object, key) ​

2. 实例属性 ​

vm.$data ​

vm.$props ​

vm.$el ​

vm.$options ​

vm.$parent ​

vm.$children ​

vm.$refs ​

vm.$slots ​

vm.$scopedSlots ​

vm.$isServer ​

vm.$attrs ​

vm.$listeners ​

3. 实例方法 ​

数据方法 ​

vm.$watch(expOrFn, callback, [options]) ​

vm.$set(object, key, value) ​

vm.$delete(object, key) ​

事件方法 ​

vm.$on(event, callback) ​

vm.$once(event, callback) ​

vm.$off([event, callback]) ​

vm.$emit(event, [...args]) ​

生命周期方法 ​

vm.$mount([elementOrSelector]) ​

vm.$forceUpdate() ​

vm.$nextTick([callback]) ​

vm.$destroy() ​

4. 指令 ​

内置指令 ​

v-text ​

v-html ​

v-show ​

v-if ​

v-else ​

v-else-if ​

v-for ​

v-on ​

v-bind ​

v-model ​

v-pre ​

v-cloak ​

v-once ​

5. 特殊属性 ​

key ​

ref ​

is ​

slot ​

slot-scope ​

6. 选项对象 ​

数据选项 ​

data ​

props ​

computed ​

methods ​

watch ​

DOM 选项 ​

el ​

template ​

Vue 2 API 详解

1. 全局 API

Vue.extend(options)

Vue.component(id, [definition])

Vue.directive(id, [definition])

Vue.filter(id, [definition])

Vue.use(plugin)

Vue.mixin(mixin)

Vue.compile(template)

Vue.nextTick([callback, context])

Vue.set(object, key, value)

Vue.delete(object, key)

2. 实例属性

vm.$data

vm.$props

vm.$el

vm.$options

vm.$parent

vm.$children

vm.$refs

vm.$slots

vm.$scopedSlots

vm.$isServer

vm.$attrs

vm.$listeners

3. 实例方法

数据方法

vm.$watch(expOrFn, callback, [options])

vm.$set(object, key, value)

vm.$delete(object, key)

事件方法

vm.$on(event, callback)

vm.$once(event, callback)

vm.$off([event, callback])

vm.$emit(event, [...args])

生命周期方法

vm.$mount([elementOrSelector])

vm.$forceUpdate()

vm.$nextTick([callback])

vm.$destroy()

4. 指令

内置指令

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

5. 特殊属性

key

ref

is

slot

slot-scope

6. 选项对象

数据选项

data

props

computed

methods

watch

DOM 选项

el

template

render

生命周期选项

其他选项

directives

filters

components

mixins

provide / inject

7. 总结