vue的实用且常用的各种api

1. 实例配置

1. 取消Vue所有日志与警告

Vue.config.silent = true

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

Vue.config.devtools = true

3. vue在启动时生成生产提示

Vue.config.productionTip = false

4. 自定义错误处理函数

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

5. 自定义警告处理函数

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

2. 获取实例或组件

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

this.$root

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

this.$children

3. 获取当前组件的父实例

this.$parent

4. 获取注册过ref属性的组件

this.$refs

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

this.$options

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

this.$props

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

this.$attrs

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

this.$listeners

9. 获取组件的插槽内容

this.$slots

10. 获取组件的作用域插槽

this.$scopedSlots

11. 获取当前实例的DOM元素

this.$el

3. 设置属性或方法

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

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

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

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

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

this.$delete( target, propertyName / index )

3. 手动触发当前实例的更新

this.$forceUpdate()

4. 手动挂载Vue实例

this.$mount()

5. 销毁Vue实例

this.$destroy()

4. 生命周期钩子

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

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

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

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

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

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

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

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

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

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

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

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

7. 实例销毁之前调用

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

8. Vue 实例销毁后调用

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

5. 事件相关

1. 触发当前实例上的事件

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

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

this.$on( eventName, callback )

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

this.$once( eventName, callback )

4. 移除自定义事件监听器

this.$off( [eventName, callback] )

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

1. 获取当前路由

this.$route

2. 获取路由实例

this.$router

3. 路由跳转

this.$router.push(location)

4. 路由替换

this.$router.replace(location)

5. 路由后退

this.$router.go(n)

7. 其他实用API

1. 混入 (mixin)

Vue.mixin({// 选项
})

2. 自定义指令

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

3. 过滤器

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

4. 组件注册

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

5. 插件注册

Vue.use(MyPlugin)

6. 创建响应式对象

Vue.observable(object)

7. 异步组件

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

8. 全局事件总线

// 创建事件总线
const bus = new Vue()// 发送事件
bus.$emit('event-name', data)// 接收事件
bus.$on('event-name', callback)

---

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

往期文章

• vue中ref的详解以及react的ref对比
• css使用aspect-ratio制作4:3和9:16和1:1等等比例布局
• Web前端页面开发阿拉伯语种适配指南
• flutter-使用extended_image操作图片的加载和状态处理以及缓存和下载
• flutter-制作可缩放底部弹出抽屉评论区效果
• flutter-实现Tabs吸顶的PageView效果
• Vue2全家桶+Element搭建的PC端在线音乐网站
• 助你上手Vue3全家桶之Vue3教程
• 超详细！vue组件通信的10种方式
• 超详细！Vuex手把手教程
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• vue中利用.env文件存储全局环境变量，以及配置vue启动和打包命令

个人主页

• CSDN
• GitHub
• 掘金