Vue常用API、高级API的相关总结


Posted in Vue.js onFebruary 02, 2021

最近手痒痒,玩儿了一下Vue3.0,很舒服,赶紧把这几期Vue2.0弄完,写一些3.0的东西。
本文主要罗列和解析一些个人认为常用或有大用途的Api,作为自我总结的笔记和探讨。

nextTick

功能:

添加在下次Dom更新循环结束之后的延迟回调,修改数据之后,可以获取更新后的Dom。
用法:

Vue.nextTick( [callback, context] )
vm.$nextTick( [callback] )
// 用法2
// 作为一个 Promise 使用 (2.1.0 起新增)
Vue.nextTick()
 .then(function () {
  // DOM 更新了
 })

说明:

callback:延迟回调函数
context:可选的object
ps:2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。

扩展:

关于nextTick的执行机制和使用场景,我们还必须掌握类似的requestAnimationFrame() 和 process.nextTick(), 前者是浏览器自带的监听(在下次重绘之前执行),后者是node环境下,在下一个事件轮询的时间点上执行

mixin

功能:

注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。
用法:

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
 created: function () {
  var myOption = this.$options.myOption
  if (myOption) {
   console.log(myOption)
  }
 }
})

new Vue({
 myOption: 'hello!'
})
// => "hello!"

说明:

object:一个vm的属性或方法
ps:请谨慎使用全局混入,因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下,只应当应用于自定义选项,就像上面示例一样。推荐将其作为插件发布,以避免重复应用混入。

$forceUpdate

功能:

迫使 Vue 实例重新渲染。
用法:

vm.$forceUpdate()

set、delete

功能:

对响应式数据的属性进行设置、删除,同时触发视图更新。
用法:

// 用法1
Vue.set( target, key, value )
Vue.delete( target, key )
// 用法2
vm.$set( target, key, value )
vm.$delete( target, key )

说明:

target:目标对象
key:要添加的属性名
value:要添加的属性值
ps:主要使用场景,可以避开 Vue 不能检测到 property 被删除的限制

filter

功能:

用于一些常见的文本格式化和一些规范数据mapping。
用法:

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
// 注册
filters: {
 capitalize: function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
 }
}
// 全局注册
Vue.filter('capitalize', function (value) {
 if (!value) return ''
 value = value.toString()
 return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
 // ...
})

说明:

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号指示。

ps:过滤器可以接受多个参数,如{{ message | filterA('arg1', arg2) }},这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

directive

功能:

用于注册自定义指令。

用法:

<!-- 当页面加载时,该元素将获得焦点 --> 
<input v-focus>
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
 // 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})
// 注册局部指令,组件中也接受一个 directives 的选项
directives: {
 focus: {
  // 指令的定义
  inserted: function (el) {
   el.focus()
  }
 }
}

说明:

inserted 只是注册指令的其中一个插值函数,完整的注册属性还可以包括:
bind:只调用一次,指令第一次绑定到元素时调用,在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有,但是可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。

Vue.directive('my-directive', {
 bind: function () {},
 inserted: function () {},
 update: function () {},
 componentUpdated: function () {},
 unbind: function () {}
})

其它简单的常用属性和方法

// console.log(vm.$root); 
vm.$root  //实例对象

vm.$el //根元素(真实的DOM元素)
// console.log(vm.$el);

vm.$el.innerHTML  //得到根元素(真实的DOM元素)中的内容
// console.log(vm.$el.innerHTML);

vm.$data  //实例下的data对象
// console.log(vm.$data);

vm.$options   //实例下的挂载项
// console.log(vm.$options);

vm.$props  //组件之间通信的数据
// console.log(vm.$props);

vm.$parent   //在组件中,指父元素
// console.log(vm.$parent);

vm.$children  //在组件中,指子代元素
// console.log(vm.$children);

vm.$attrs  //用来获取父组件传递过来的所有属性
// console.log(vm.$attrs);

vm.$listeners  //用来获取父组件传递过来的所有方法
// console.log(vm.$listeners);

vm.$slots  //组件中的插槽
// console.log(vm.$slots);

vm.$scopedSlots   //用来访问作用域插槽
// console.log(vm.$scopedSlots);

vm.$refs  //用来定位DOM元素(使用ref进行追踪)
// console.log(vm.$refs);

vm.$watch  //用于监听数据(在vue文件中使用后会自动销毁)
// console.log(vm.$watch);

vm.$emit  //用于派发事件(常用于数据通信)
// console.log(vm.$emit);

vm.$on //用于监听事件的派发
// console.log(vm.$on);

vm.$once  //只监听事件一次(之后不监听)
// console.log(vm.$once);

//生命周期
beforeCreate() {
}
created() {
}
beforeMount() {
}
mounted() {
}
beforeUpdate() {
}
updated() {
}
beforeDestroy() {
}
destroyed() {
}

总结

本文主要收录vue中常用的这几个API,如果有兴趣学习更多,可以参考其官网。希望本文对你有用,并能熟练运用到实际的项目开发中。

为了方便阅读理解,本文代码已经上传Github

文中如有错误,欢迎在评论区指正,如果有所帮助,欢迎点赞和关注。

以上就是Vue常用API、高级API的相关总结的详细内容,更多关于Vue常用API、高级API的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
深入了解Vue3模板编译原理
Nov 19 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
vue常用高阶函数及综合实例
Feb 25 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
vue监听键盘事件的相关总结
Jan 29 #Vue.js
You might like
PHP 函数执行效率的小比较
2010/10/17 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
解析JavaScript中的字符串类型与字符编码支持
2016/06/24 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
Python分治法定义与应用实例详解
2017/07/28 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
python yield关键词案例测试
2019/10/15 Python
python识别验证码图片实例详解
2020/02/17 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
美国最佳在线航班预订网站:LookupFare
2019/03/26 全球购物
nohup的用法
2012/11/26 面试题
高中班主任评语大全
2014/04/25 职场文书
廉洁自律个人总结
2015/02/14 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
解约证明模板
2015/06/19 职场文书
导游词之舟山普陀山
2019/11/06 职场文书