vue核心技术知识点总结

作者 : admin 本文共4159个字，预计阅读时间需要11分钟发布时间：共21人阅读

vue核心技术知识点总结

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.extend` + `$mount` 这对组合是我们需要去关注的
Vue.nextTick( [callback, context] )	在下次 DOM 更新循环结束之后执行延迟回调。	// 修改数据 vm.msg = ‘Hello’ // DOM 还没有更新 Vue.nextTick(function () { // 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.observable` 返回的对象，而不是传入源对象。
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，生命周期

Vue å®ä¾çå½å¨æ vue核心技术知识点总结插图(1)

上面红色的生命周期不能在服务端渲染期间被调用

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 新增跨组件传递数据向上