Vue在2019年的受欢迎程度逐步加大，很多创业型公司，中小企业都在使用vue框架。很多场景下，大公司更青睐于React技术栈，而随着Vue2.x的发布更新，很多公司开始选用vue作为主要技术栈。vue上手成本低，且社区多为中文，对于开发者而言要求相对 较低。
但是要想做好vue的开发，就必须对vue的原理有深入的了解，并且对相关社区有所了解。Vue中很多也采用了最新的ES6写法，从技术层面上提高了性能。本文以2.x版本为例，梳理一下vue常用api，希望可以在更高层面上对vue做出一个技术解析。欢迎评论指导。
了解一个框架，要从思想层面，原理层面，具体实现和封装，应用层api四个方面入手。
在思想层面：要了解这个框架的设计思想，进而明确框架在技术开发中所解决的问题
在原理方面：要了解框架设计是基于什么技术原理，核心的实现原理
具体实现和封装：以怎样一种方式组合和实现代码逻辑，怎样实现模块通信，更新机制，具体功能的实现封装；
应用层api：怎样使用，如何更好的使用
本文主要总结应用层面api，关于原理层面大家可自己深入研究浏览相关文章。
vue核心api:
1，vue全局配置：
silent | Vue.config.silent = true 取消 Vue 所有的日志与警告。 | |
optionMergeStrategies | 自定义合并策略的选项 | |
devtools | 配置是否允许 vue-devtools 检查代码。 | |
errorHandler | 指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和 Vue 实例。 | 从 2.6.0 起，这个钩子也会捕获 v-on DOM 监听器内部抛出的错误。另外，如果任何被覆盖的钩子或处理函数返回一个 Promise 链 (例如 async 函数)，则来自其 Promise 链的错误也会被处理。 |
warnHandler | 为 Vue 的运行时警告赋予一个自定义处理函数。 | 2.4.0 新增 |
ignoredElements | 须使 Vue 忽略在 Vue 之外的自定义元素 | |
keyCodes | 给 v-on 自定义键位别名 | 常用 |
performance | 在浏览器开发工具的性能/时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪 | 2.2.0 新增 |
productionTip | 设置为 false 以阻止 vue 在启动时生成生产提示 | 2.2.0 新增 |
2,全局api
Vue.extend( options ) | 使用基础 Vue 构造器，创建一个“子类” demo：const extendComponent = new testComponent().$mount() | 渲染在根元素之外的组件。 比如：alert 组件 在一些独立组件开发场景中，
|
Vue.nextTick( [callback, context] ) | 在下次 DOM 更新循环结束之后执行延迟回调。 |
|
Vue.set( target, propertyName/index, value ) | 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新 | 解决数据层级较深时，vue检测不到数据变化的场景。 注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。 |
Vue.delete( target, propertyName/index ) | 删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。 | 使用较少 和Vue.set是相反的 |
Vue.directive( id, [definition] ) | 注册或获取全局指令。
Vue.directive('my-directive', { bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {} })
| 解决指令不兼容场景； 自定义指令场景 |
Vue.filter( id, [definition] ) | 注册或获取全局过滤器。 | 用于一些常见的文本格式化 {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
|
Vue.component( id, [definition] ) | 创建组件 | 应用于非模板情况 |
Vue.use( plugin ) | 使用插件 | 比如Vue.use(VueRouter) |
Vue.mixin( mixin ) | 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例 | 不推荐使用，推荐将其作为插件发布，以避免重复应用混入。 |
Vue.compile( template ) | 在 render 函数中编译模板字符串。只在独立构建时有效 | 渲染函数和JSX场景 |
Vue.observable( object ) | 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。 | 2.6.0 新增 在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行修改仍然是不可响应的。因此，为了向前兼容，我们推荐始终操作使用 |
Vue.version | 根据版本选择不同的插件和策略 | var version = Number(Vue.version.split('.')[0]) |
3，数据相关api
data | Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。 | 深入响应式原理 |
props | props 可以是数组或对象，用于接收来自父组件的数据。 | type default required validator |
propsData | 创建实例时传递 props。主要作用是方便测试。 | 只用于 new 创建的实例中。 |
computed | 计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。 | 计算属性会被缓存，依赖的属性发生变化时才会重新计算 |
methods | methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。 | 不应该使用箭头函数来定义 method 函数 |
watch | 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。 | 不应该使用箭头函数来定义 watcher 函数 |
4，DOM相关
el | 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。 | 只在由 new 创建的实例中遵守。 |
template | 一个字符串模板作为 Vue 实例的标识使用 | 如果 Vue 选项中包含渲染函数，该模板将被忽略。 |
render | 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。 | 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。 |
renderError | 当 render 函数遭遇错误时，提供另外一种渲染输出。其错误将会作为第二个参数传递到 renderError。这个功能配合 hot-reload 非常实用。 | 2.2.0 新增 只在开发者环境下工作 |
5，生命周期
上面红色的生命周期不能在服务端渲染期间被调用
6，vue类的实例的属性（共13个）
vm.$data | Vue 实例观察的数据对象。 | |
vm.$props | 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。 | 2.2.0 新增 |
vm.$el | Vue 实例使用的根 DOM 元素。 | |
vm.$options | 用于当前 Vue 实例的初始化选项 | 在选项中包含自定义属性时会有用处 |
vm.$parent | 父实例，如果当前实例有的话 | |
vm.$root | 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。 | |
vm.$children | 当前实例的直接子组件 | 需要注意 $children 并不保证顺序，也不是响应式的。 |
vm.$slots | 用来访问被插槽分发的内容 | 在使用渲染函数书写一个组件时，访问 vm.$slots 最有帮助。 |
vm.$scopedSlots | 用来访问作用域插槽。 | vm.$scopedSlots 在使用渲染函数开发一个组件时特别有用。 |
vm.$refs | 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。 | |
vm.$isServer | 当前 Vue 实例是否运行于服务器。 | 服务端渲染 |
vm.$attrs | inheritAttrs属性 | 2.4.0 新增 跨组件传递数据 向下 |
vm.$listeners | 2.4.0 新增 跨组件传递数据 向上 |
7，vue的实例的方法
共三类方法：
作用于数据的方法（3个）： vm.$watch vm.$set vm.$delete
作用于属性的方法（3个）：vm.$on vm.$once vm.$off vm.$emit
作用于生命周期的方法（3个）：vm.$mount vm.$forceUpdate vm.$nextTick vm.$destroy
8，vue模板中常用指令
条件渲染：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
说明：红色为不常用
9，内置组件component transition transition-group keep-alive slot
vue客户端基本api大概涵盖了以上这么多，主要包括：
类的属性和方法：1，全局配置 2，全局api
类的实例的属性和方法：3，数据相关api，4，dom相关api ；6，vue类的实例的属性（共13个）；7，vue的实例的方法
类的实例的生命周期：5，vue的生命周期
vue内置命令和组件：8，vue模板中常用指令；9，内置组件
除了客户端，vue也支持服务端渲染
扫一扫
277
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
