Vue开发常用方法详解
$nexttick()
this.$nexttick()将回调延迟到下次 dom 更新循环之后执行。在修改数据之后立即使用它,然后等待 dom 更新。
使用场景
在一些情况下,变量进行了初始赋值或更新,但是dom还未更新完成时,使用变量的值是不起作用的。此时就需要通过this.$nexttick()等待dom更新加载完成后立即进行使用。常用于created钩子函数中以及涉及到dom更新的情况。
用法
this.$nexttick(() => { this.$refs.table.refresh(true)})
this.$nexttick()在页面交互,尤其是从后台获取数据后重新生成dom对象之后的操作有很大的优势
$forceupdate()
迫使 vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
使用场景
对于一个复杂的对象,例如一个对象数组,直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue无法知道发生了改变时可以使用强制更新
另一方面,表单渲染时,有时进行了选择操作,但是表单内容未更新,可使用强制更新
用法
this.$nexttick(() => { this.$refs.table.refresh(true) })
$set()
使用场景
受 es5 的限制,vue.js 不能检测到对象属性的添加或删除
向响应式对象中添加一个 property,并确保这个新 property 同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新 property,因为 vue 无法探测普通的新增 property (比如 this.myobject.newproperty = ‘hi')
注意对象不能是 vue 实例,或者 vue 实例的根数据对象。
用法
this.$set( target, propertyname/index, value )
-
target
:要更改的数据源(可以是对象或者数组) -
propertyname/index
:对象新添加的属性名或者数组新添加元素的下标位置 -
value
:新添加属性的值
// 对象 this.$set(this.student,"age", 24) // 数组 this.$set(this.arraylist, 2, { name: "张三" })
.sync——2.3.0+ 新增(vue 3.x中已被v-model替换,不再支持)
使用场景
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”,在vue 2.3.0之后便可以使用.sync修饰符进行操作。vue 3.0之后不再支持
用法
父组件
<comp :foo.sync="bar"></comp>
实际会被等价扩展为
<comp :foo="bar" @update:foo="val => bar = val"></comp>
子组件
this.$emit('update:foo', newvalue)
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注的更多内容!
推荐阅读
-
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
-
ThinkPHP开发框架函数详解:C方法
-
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
-
javascript 中关于array的常用方法详解
-
Android7.0开发实现Launcher3去掉应用抽屉的方法详解
-
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
-
js中Array对象的常用遍历方法详解
-
对Vue table 动态表格td可编辑的方法详解
-
vue组件开发之用户无限添加自定义填写表单的方法
-
详解Vue项目中出现Loading chunk {n} failed问题的解决方法