扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue.js中让人容易忽略的API详解
  • 555

0
分享到

Vue.js中让人容易忽略的API详解

2024-04-02 19:04:59 555人浏览 八月长安
摘要

目录nextTickv-model 语法糖.sync 修饰符$set计算属性的 set总结nextTick nextTick 是 vue.js 提供的一个函数，并非浏览器内置。ne

nextTick

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


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

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

nextTick 的源码在GitHub.com/Vuejs/vue/b…，可以看到，Vue.js 使用了 Promise、setTimeout 和 setImmediate 三种方法来实现 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 style="color: red;padding: 6px">{{ 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>

或：


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

  export default {
    components: { InputNumber },
    data () {
      return {
        value: 1
      }
    },
    methods: {
      handleChange (val) {
        this.value = val;
      }
    }
  }
</script>

如果你不想用 value 和 input 这两个名字，从 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，有两种情况会用到它：

由于 javascript 的限制，Vue 不能检测以下变动的数组：

  • 当利用索引直接设置一个项时，例如：this.items[index] = value;
  • 当修改数组的长度时，例如：vm.items.length = newLength。

由于 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。

总结

到此这篇关于Vue.js中让人容易忽略的api的文章就介绍到这了,更多相关Vue.js中易忽略的API内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue.js中让人容易忽略的API详解

本文链接: https://lsjlt.com/news/134506.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue.js中让人容易忽略的API详解
    目录nextTickv-model 语法糖.sync 修饰符$set计算属性的 set总结nextTick nextTick 是 Vue.js 提供的一个函数，并非浏览器内置。ne...
    99+
    2024-04-02
  • Web测试中的UI测试详解：容易忽略的14个测试点汇总
    有软件的地方就有界面，就会有界面测试。界面测试是软件测试中，最多，最繁琐，最简单的测试。尤其在本地化测试(多国语言测试)中，有很多的界面测试。用户界面测试简称UI测试，测试用户界面的功能模块的布局是否合理，整体风格是否一致和各个控件的放置位...
    99+
    2023-06-05
  • web开发中容易忽略的CSS特性有哪些
    web开发中容易忽略的CSS特性有哪些，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。大小写不敏感 虽然我们平时在写CSS的时候...
    99+
    2024-04-02
  • Win7系统中容易忽略的四个实用功能
       现在相信大多数朋友都用上Win7了，那么您是否对Win7已经很熟悉了呢相信不少朋友的回答都是肯定的。但Win7所隐藏的一些新功能，大家是否真正注意过呢接下来，笔者就给大家介绍几个Win7容易被...
    99+
    2023-05-29
    Win7系统 忽略 实用功能 系统 Win7
  • 使用Dedecms中七个容易忽略的安全细节介绍
    随着cms的流行起来，越来越多的网友开始加入到个人站长的行业里，或许不少网友认为，只要买个域名，租个空间，随后解析域名，随后FTP上传程序，程序安装以后便可以发布内容了，发布内容了便开始到处做外链了，做外链了便是真正的站...
    99+
    2022-06-12
    dede细节 dedecms细节
  • 网站建设中容易忽略的重要细节有哪些
    小编给大家分享一下网站建设中容易忽略的重要细节有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、网站链接不连贯有一些网站的技术人员，在进行网站建设的时候，或...
    99+
    2023-06-10
  • C语言中你容易忽略的知识点与技巧总结
    目录‍♀️前言字符串常量输出函数puts除法运算的商和余数除法运算的结果有关赋值double类型的运算数据类型和运算总结‍♀️前言 大家有没有一种感觉，随着一门编程语...
    99+
    2024-04-02
  • 网站建设过程中容易被忽略的元素是什么
    网站建设过程中容易被忽略的元素是什么，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。网站的定位站长们都知道，在跟客户谈单时，客户会提出一些无厘头的要求，有的只是想...
    99+
    2023-06-10
  • win7系统中最容易让人误解的操作方法介绍
           1、内存使用的问题：这是个大误区，很多人都用xp时代的眼光来审视Windows 7，这是错误的，因为两者的内存使用机制本身就不同。打个比方，2G内...
    99+
    2023-05-31
    win7 误解 操作 系统
  • jQuery中容易让人困惑的知识点有哪些
    今天就跟大家聊聊有关jQuery中容易让人困惑的知识点有哪些，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。一，什么是j...
    99+
    2024-04-02
  • MySQL中你可能忽略的COLLATION实例详解
    前言 MySQL 数据库的字符串类型有 CHAR、VARCHAR、BINARY、BLOB、TEXT、ENUM、SET。不同的类型在业务设计、数据库性能方面的表现完全不同，其中最常使用的是 CHAR、VARCHAR。今...
    99+
    2022-05-16
    mysql collation字符集 mysql 字符集
  • Java编程中最容易忽略的10个常见问题分别有哪些
    本篇文章给大家分享的是有关Java编程中最容易忽略的10个常见问题分别有哪些，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。在Java编码中，我们容易犯一些错误，也容易疏忽一些问...
    99+
    2023-06-17
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作