vue的实用且常用的各种api

原创于 2025-06-12 10:34:34 发布 · 996 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架 #es6

Vue 专栏收录该内容

45 篇文章

订阅专栏

文章目录

1. 实例配置
2. 获取实例或组件
3. 设置属性或方法
4. 生命周期钩子
5. 事件相关
6. 路由相关（如果使用了vue-router）
7. 其他实用API

1. 实例配置

取消Vue所有日志与警告

Vue.config.silent = true

配置是否允许 vue-devtools 检查代码，开发版本默认为 true，生产版本默认为 false。

Vue.config.devtools = true

vue在启动时生成生产提示

Vue.config.productionTip = false

自定义错误处理函数

Vue.config.errorHandler = function (err, vm, info) {
  // 处理错误，例如记录到日志
  console.error('Error:', err, 'Info:', info)
}

自定义警告处理函数

Vue.config.warnHandler = function (msg, vm, trace) {
  // 处理警告，例如记录到日志
  console.warn('Warning:', msg, 'Trace:', trace)
}

2. 获取实例或组件

获取当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

this.$root

获取当前实例的直接子组件

this.$children

获取当前组件的父实例

this.$parent

获取注册过ref属性的组件

this.$refs

获取当前Vue实例的初始化选项

this.$options

获取当前组件接收到的props对象

this.$props

获取父组件不作为prop被识别的属性

this.$attrs

获取父组件的v-on事件监听器

this.$listeners

获取组件的插槽内容

this.$slots

获取组件的作用域插槽

this.$scopedSlots

获取当前实例的DOM元素

this.$el

3. 设置属性或方法

向响应式对象中添加一个属性，并触发视图更新

参数为，要改变的对象或者数组，要添加的属性名或者索引，要添加的值

this.$set( target, propertyName / index, value )

向响应式对象中删除一个属性，并触发视图更新

参数为，要删除的对象或者数组，要删除的属性名或者索引

this.$delete( target, propertyName / index )

手动触发当前实例的更新

this.$forceUpdate()

手动挂载Vue实例

this.$mount()

销毁Vue实例

this.$destroy()

4. 生命周期钩子

实例初始化之后，数据观测和 event/watcher 事件配置之前被调用

beforeCreate() {
  // 初始化之前的操作
}

实例已经创建完成之后被调用

created() {
  // 数据观测、property 和 method 的计算、watch/event 事件回调
  // 这里可以访问到数据和方法，但DOM尚未挂载
}

在挂载开始之前被调用：相关的 render 函数首次被调用

beforeMount() {
  // 模板编译/挂载之前
}

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

mounted() {
  // 模板编译/挂载之后
  // 这里可以访问到DOM元素
}

数据更新时调用，发生在虚拟 DOM 打补丁之前

beforeUpdate() {
  // 数据更新之前
}

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

updated() {
  // 数据更新之后
}

实例销毁之前调用

beforeDestroy() {
  // 实例销毁之前
}

Vue 实例销毁后调用

destroyed() {
  // 实例销毁之后
}

5. 事件相关

触发当前实例上的事件

this.$emit( eventName, [...args] )

监听当前实例上的自定义事件

this.$on( eventName, callback )

监听一个自定义事件，但是只触发一次

this.$once( eventName, callback )

移除自定义事件监听器

this.$off( [eventName, callback] )

6. 路由相关（如果使用了vue-router）

获取当前路由

this.$route

获取路由实例

this.$router

路由跳转

this.$router.push(location)

路由替换

this.$router.replace(location)

路由后退

this.$router.go(n)

7. 其他实用API

混入 (mixin)

Vue.mixin({
  // 选项
})

自定义指令

Vue.directive('name', {
  // 指令选项
})

过滤器

Vue.filter('name', function (value) {
  // 返回处理后的值
})

组件注册

Vue.component('name', {
  // 组件选项
})

插件注册

Vue.use(MyPlugin)

创建响应式对象

Vue.observable(object)

异步组件

Vue.component('async-example', function (resolve, reject) {
  // 异步解析组件定义
})

全局事件总线

// 创建事件总线
const bus = new Vue()

// 发送事件
bus.$emit('event-name', data)

// 接收事件
bus.$on('event-name', callback)

本次分享就到这儿啦，我是鹏多多，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

往期文章

个人主页