Vue开发常用方法总结

2023-11-16

$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无法知道发生了改变时可以使用强制更新

另一方面，表单渲染时，有时进行了选择操作，但是表单内容未更新，可使用强制更新

在这里插入图片描述
用法

// 用法一
<a-select
   placeholder="请选择"
   v-model="infoData.approveBy"
   :options="roleList"
   :disabled="!isEdit"
   @change="$forceUpdate()"
 />
 
//用法二
switchChange (checked) {
   this.isEdit = checked
   this.$forceUpdate()
 },

$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定义全局函数

方法一
直接在main.js文件中定义

// 全局记录系统出错日志方法
Vue.prototype.writeSysLog = function (params) {
  do something...
}

使用方法（在所有组件中均可使用）

this.writeSysLog (params)

方法二
单独创建一个 request.js 文件，用于存放常用全局函数

// 写法一
exports.install = function (Vue, options) {
  Vue.prototype.writeSysLog  = function (params){
    do something...
  };
};

// 写法二（exports.install运行报错可用此方法解决）
const installer = {
    vm: {},
    install(Vue) {
        Vue.prototype.writeSysLog = function (params) {
            do something...
        }
    }
}

export { installer as global }

然后在main.js中引用

// 写法一
import request from '@/utils/request'
Vue.use(request)

// 写法二
import { global } from '@/utils/request'
Vue.use(global)

.native修饰符

官方对.native修饰符的解释为：

有时候，你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如：

<my-component v-on:click.native="doTheThing"></my-component>

简单理解为：.native修饰符是告诉编译器，前面的事件为原生的事件，不是自定义的事件，按照原生的方法解析便可。

异步编程

await—— Generator 函数的语法糖

多个异步任务的处理方法——不存在继发关系（互不依赖）

try {
   let [textDatas, mainData] = await Promise.all([ 
     getInfo(param), 
     getData(param)
   ])
   // do something...
   console.log(textDatas,'www',mainData)
 } catch (error) {
   console.log(error)
 }

多个异步任务的处理方法——存在继发关系

let foo = await getFoo(param);
let bar = await getBar(foo);
console.log(bar)

按顺序完成异步操作

使用注意点

await命令后面的Promise对象，运行结果可能是rejected，所以最好把await命令放在try…catch代码块中
多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发，节省时间
await命令只能用在async函数之中，如果用在普通函数，就会报错
async 函数可以保留运行堆栈

query和params传参的区别

首先，两种传参在url中的展现形式如下

query：（/Info?id=123456789； /Info?uid=666；等）url地址栏中是这样的形式则是query传参
params：（/Info/:id；/Info/123456789；/Info/666）url地址栏中是这样的形式则是params传参
ps：一般情况下，如果参数不多，采用params传参。当然如果不想将参数值显示在url地址栏中，则采用post方法传参

两种传参的获取方式
query： this. r o u t e . q u e r y . i d p a r a m s ： t h i s . route.query.id params： this. route.query.idparams：this.route.params.id

持续更新…

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)