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 相关文章推荐
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue CLI中模式与环境变量的深入详解
May 30 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/12/11 PHP
检查用户名是否已在mysql中存在的php写法
2014/01/20 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
理解javascript模块化
2016/03/28 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
React和Vue中监听变量变化的方法
2018/11/14 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
python如何把字符串类型list转换成list
2020/02/18 Python
pandas DataFrame运算的实现
2020/06/14 Python
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
保护环境建议书100字
2014/05/13 职场文书
产品包装策划方案
2014/05/18 职场文书
施工安全汇报材料
2014/08/17 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
python实现简单区块链结构
2021/04/25 Python
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
SQL Server中搜索特定的对象
2022/05/25 SQL Server