vue核心技术知识点总结

作者 : admin 本文共4159个字,预计阅读时间需要11分钟 发布时间: 2021-10-28 共1人阅读

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 更新循环结束之后执行延迟回调。  

  1. // 修改数据
  2. vm.msg = ‘Hello’
  3. // DOM 还没有更新
  4. Vue.nextTick(function () {
  5. // DOM 更新了
  6. })

 

异步更新队列

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 新增

跨组件传递数据  向上

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-text  v-html

循环渲染 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也支持服务端渲染

 


滴石it网-Java学习中高级和架构师教程_Java企业级开发项目实战下载 » vue核心技术知识点总结

常见问题FAQ

发表评论

开通VIP 享更多特权,建议使用QQ登录