Vue.js 最容易让开发者忽略的 几个API 详解

简介: Vue.js 最容易让开发者忽略的 几个API 详解

nextTick

nextTick 是 Vue.js 提供的一个函数,并非浏览器内置。nextTick 函数接收一个回调函数 cb,在下一个 DOM 更新循环之后执行。比如下面的示例:

<template>
  <div>
    <p v-if="show" ref="hideRef">隐藏</p>
    <button @click="handleShow">显示</button>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        show: false
      }
    },
    methods: {
      handleShow () {
        this.show = true;
        console.log(this.$refs.hideRef);  // undefined
        this.$nextTick(() => {
          console.log(this.$refs.hideRef);  // <p>隐藏</p>
        });
      }
    }
  }
</script>

show 被置为 true 时,这时 p 节点还未被渲染,因此打印出的是 undefined,而在 nextTick 的回调里,p 已经渲染好了,这时能正确打印出节点。

nextTick 的源码在 https://github.com/vuejs/vue/blob/dev/src/core/util/next-tick.js,可以看到,Vue.js 使用了 PromisesetTimeoutsetImmediate 三种方法来实现 nextTick,在不同环境会使用不同的方法。

v-model 语法糖

v-model 常用于表单元素上进行数据的双向绑定,比如 <input>。除了原生的元素,它还能在自定义组件中使用。

v-model 是一个语法糖,可以拆解为 props: value 和 events: input。就是说组件必须提供一个名为 value 的 prop,以及名为 input 的自定义事件,满足这两个条件,使用者就能在自定义组件上使用 v-model。比如下面的示例,实现了一个数字选择器:

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span>{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: Number
      }
    },
    data () {
      return {
        currentValue: this.value
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit('input', this.currentValue);
      }
    }
  }
</script>

props 一般不能在组件内修改,它是通过父级修改的,因此实现 v-model 一般都会有一个 currentValue 的内部 data,初始时从 value 获取一次值,当 value 修改时,也通过 watch 监听到及时更新;组件不会修改 value 的值,而是修改 currentValue,同时将修改的值通过自定义事件 input 派发给父组件,父组件接收到后,由父组件修改 value。所以,上面的数字选择器组件可以有下面两种使用方式:

<template>
  <InputNumber v-model="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

如果你不想用 valueinput 这两个名字,从 Vue.js 2.2.0 版本开始,提供了一个 model 的选项,可以指定它们的名字,所以数字选择器组件也可以这样写:

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span style="color: red;padding: 6px">{{ currentValue }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      number: {
        type: Number
      }
    },
    model: {
      prop: 'number',
      event: 'change'
    },
    data () {
      return {
        currentValue: this.number
      }
    },
    watch: {
      value (val) {
        this.currentValue = val;
      }
    },
    methods: {
      increase (val) {
        this.currentValue += val;
        this.$emit('number', this.currentValue);
      }
    }
  }
</script>

在 model 选项里,就可以指定 prop 和 event 的名字了,而不一定非要用 value 和 input,因为这两个名字在一些原生表单元素里,有其它用处。

.sync 修饰符

如果你使用过 Vue.js 1.x,一定对 .sync 不陌生。在 1.x 里,可以使用 .sync 双向绑定数据,也就是父组件或子组件都能修改这个数据,是双向响应的。在 Vue.js 2.x 里废弃了这种用法,目的是尽可能将父子组件解耦,避免子组件无意中修改了父组件的状态。

不过在 Vue.js 2.3.0 版本,又增加了 .sync 修饰符,但它的用法与 1.x 的不完全相同。2.x 的 .sync 不是真正的双向绑定,而是一个语法糖,修改数据还是在父组件完成的,并非在子组件。

仍然是数字选择器的示例,这次不用 v-model,而是用 .sync,可以这样改写:

<template>
  <div>
    <button @click="increase(-1)">减 1</button>
    <span style="color: red;padding: 6px">{{ value }}</span>
    <button @click="increase(1)">加 1</button>
  </div>
</template>
<script>
  export default {
    name: 'InputNumber',
    props: {
      value: {
        type: Number
      }
    },
    methods: {
      increase (val) {
        this.$emit('update:value', this.value + val);
      }
    }
  }
</script>

用例:

<template>
  <InputNumber :value.sync="value" />
</template>
<script>
  import InputNumber from '../components/input-number/input-number.vue';

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    }
  }
</script>

看起来要比 v-model 的实现简单多,实现的效果是一样的。v-model 在一个组件中只能有一个,但 .sync 可以设置很多个。.sync 虽好,但也有限制,比如:

  • 不能和表达式一起使用(如 v-bind:title.sync="doc.title + '!'" 是无效的);
  • 不能用在字面量对象上(如 v-bind.sync="{ title: doc.title }" 是无法正常工作的)。

$set

在上一节已经介绍过 $set,有两种情况会用到它:

  1. 由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

    1. 当利用索引直接设置一个项时,例如:this.items[index] = value;
    2. 当修改数组的长度时,例如:vm.items.length = newLength
  2. 由于 JavaScript 的限制,Vue 不能检测对象属性的添加或删除

举例来看,就是:

// 数组
export default {
  data () {
    return {
      items: ['a', 'b', 'c']
    }
  },
  methods: {
    handler () {
      this.items[1] = 'x';  // 不是响应性的
    }
  }
}

使用 $set

// 数组
export default {
  data () {
    return {
      items: ['a', 'b', 'c']
    }
  },
  methods: {
    handler () {
      this.$set(this.items, 1, 'x');  // 是响应性的
    }
  }
}

以对象为例:

// 对象
export default {
  data () {
    return {
      item: {
        a: 1
      }
    }
  },
  methods: {
    handler () {
      this.item.b = 2;  // 不是响应性的
    }
  }
}

使用 $set

// 对象
export default {
  data () {
    return {
      item: {
        a: 1
      }
    }
  },
  methods: {
    handler () {
      this.$set(this.item, 'b', 2);  // 是响应性的
    }
  }
}

另外,数组的以下方法,都是可以触发视图更新的,也就是响应性的:

push()pop()shift()unshift()splice()sort()reverse()

还有一种小技巧,就是先 copy 一个数组,然后通过 index 修改后,再把原数组整个替换,比如:

handler () {
  const data = [...this.items];
  data[1] = 'x';
  this.items = data;
}

计算属性的 set

计算属性(computed)很简单,而且也会大量使用,但大多数时候,我们只是用它默认的 get 方法,也就是平时的常规写法,通过 computed 获取一个依赖其它状态的数据。比如:

computed: {
  fullName () {
    return `${this.firstName} ${this.lastName}`;
  }
}

这里的 fullName 事实上可以写为一个 Object,而非 Function,只是 Function 形式是我们默认使用它的 get 方法,当写为 Object 时,还能使用它的 set 方法:

computed: {
  fullName: {
    get () {
      return `${this.firstName} ${this.lastName}`;
    },
    set (val) {
      const names = val.split(' ');
      this.firstName = names[0];
      this.lastName = names[names.length - 1];
    }
  }
}

计算属性大多时候只是读取用,使用了 set 后,就可以写入了,比如上面的示例,如果执行 this.fullName = 'Aresn Liang',computed 的 set 就会调用,firstName 和 lastName 会被赋值为 Aresn 和 Liang。

目录
相关文章
|
2月前
|
监控 供应链 API
速卖通商品 API,开发者示例
速卖通商品API是速卖通开放平台为开发者提供的接口,支持获取商品详情、订单管理等功能。具备多语言、多货币支持,适用于全球电商场景。可应用于商品分析、价格监控、竞品对比和库存管理等业务。文档提供Python调用示例,便于快速集成使用。
|
2月前
|
JSON 安全 API
电商API入门问答:开发者必知的10个基础问题
本文详解电商API的10个基础知识,涵盖定义、用途、认证、安全等内容,帮助开发者快速入门并提升开发效率。
104 0
|
2月前
|
JSON API 开发者
1688商品 API接口,开发者详解与使用指南
1688商品API是阿里巴巴开放平台提供的接口,支持获取商品详情与列表信息。包含商品标题、价格、销量、库存、图片等关键数据,适用于电商数据分析、比价工具、库存管理等场景。开发者需注册账号并创建应用获取App Key和App Secret用于身份验证。通过构造HTTP请求调用API,并解析JSON或XML响应获取数据。提供Python示例代码,方便快速接入。
|
15天前
|
NoSQL API 双11
淘宝订单 API 实战:90% 开发者会踩的 “漏单坑”,我用这 3 招彻底解决
本文深入解析了淘宝订单 API 对接中常见的“漏单”问题,结合实战案例拆解了同步逻辑、漏单原因及解决方案。重点分析了“主动轮询”与“回调通知”两种方式的优缺点,指出高频漏单的三大原因:回调丢包、时间窗口设置错误、订单状态判断不全,并提供对应的解决策略。最后分享了一套“回调 + 轮询”双保险方案,帮助彻底杜绝漏单问题。
|
2月前
|
JSON API 开发者
唯品会商品API,开发者示例
唯品会商品API支持获取商品详情、价格及库存信息,适用于开发者集成商品数据。通过如`vip.item_get`等接口,可使用Python等语言调用,实现商品信息查询与列表筛选。实际使用需申请官方授权或通过第三方平台接入,并遵守相关调用规则。
|
2月前
|
JSON 供应链 数据挖掘
VVIC(搜款网)商品 API 开发者详解与使用指南
VVIC(搜款网)是中国知名服装批发平台,提供丰富的货源和供应链服务。其商品API支持开发者通过编程获取商品数据,适用于电商集成、数据分析、选品工具等场景。本文详解API接入流程、核心接口、调用示例及常见问题解决方案,助力高效开发。
|
2月前
|
JSON 监控 API
虾皮商品 API,开发者详解与使用指南
虾皮商品API支持开发者获取商品详情及列表,适用于电商导购、价格监控、库存管理等场景。提供商品信息查询、店铺管理、数据分析等功能,助力商家优化运营策略。
|
2月前
|
JSON 数据挖掘 API
Lazada商品 API接口,开发者详解与使用指南
Lazada商品API为开发者提供商品信息获取功能,适用于电商应用开发与数据分析。支持获取标题、价格、库存等详细信息,具备实时更新、高并发支持等特点,适用于竞品分析、价格趋势研究、导购应用及客服系统集成。需获取凭证后调用接口,示例代码使用Python实现。
|
2月前
|
安全 API 网络安全
API安全危机四伏!开发者掌握这“十八般武艺”才能破局?
在数字化时代,API作为连接应用的核心枢纽,其安全性至关重要。本文深入解析API安全攻防实战技巧,涵盖数据传输加密、身份认证、输入验证、速率限制、日志监控、API网关应用及持续安全实践等七大防御策略,帮助开发者全面掌握保护数据接口的关键技能,构筑坚实的安全防线。
|
2月前
|
XML API 开发者
易贝商品API接口,开发者详解与使用指南
eBay 商品 API 为开发者提供商品搜索、详情获取、订单管理等功能,包含 Finding、Shopping、Trading 等接口。支持按关键词搜索、获取商品描述与价格、处理交易流程等,适用于电商分析与店铺运营。调用需注册获取 API 权限与密钥,构建请求并解析 JSON/XML 数据。附 Python 示例代码展示如何获取商品详情信息。