Vue基础19 Vue2.6更新

最新推荐文章于 2024-08-29 15:22:59 发布

「已注销」

最新推荐文章于 2024-08-29 15:22:59 发布

阅读量1.7k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/duola8789/article/details/87862731

版权

Vue2.6发布，引入了新Slots语法，提高性能并为Vue3.0做准备。新语法简化了组件嵌套，优化了编译性能，提升了错误处理能力，支持动态指令参数，并提供了显示创建响应式对象的API。同时，内部改动全部使用Microtask，确保更好的更新流程。

摘要由CSDN通过智能技术生成

已同步到个人博客，欢迎访问。

又更新了

2019.2月，大年三十，Vue在时隔一段时间后发布了新的版本Vue2.6，版本号是Macross（超时空要塞）

真是，不让人过好年啊。学不动了。

吐槽归吐槽，该学还是得学习。相对来说Vue的文档和教程是最平易近人、最易理解的了，而且尤雨溪还亲自发表文章介绍了Vue2.6的更新情况，更没有不跟进的理由了。

Slots：新语法，性能优化，准备接轨3.0

语法

最重要的更新之一就是对Slots的语法的更新，Slots对于Vue的组件解耦和分发复用有很重要的意义。旧的语法在2.x版本将获得支持，但是在3.0版本后将被废弃。

这次更新引入了v-slot来代替原来的slot和slot-scope语法

有这样一个组件Comp：

<template>
  <div class="slot-inner">
    <slot>默认Slot</slot>
    <slot name="slot1">具名Slot</slot>
    <slot name="slot2" :innerUser="user">Hello {
  {user.firstName}}</slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        firstName: 'jay',
        lastName: 'chow'
      },
    }
  }
}
</script>

原来的语法：

<Comp>
  <!-- 默认插槽 -->
  <p>向默认Slot插入的内容</p>
  <!-- 具名插槽 -->
  <p slot="slot1">向具名Slot插入的内容</p>
  <!-- 作用域插槽 -->
  <p slot="slot2" slot-scope="{innerUser}">Hi, {
  {innerUser.lastName}}</p>
</Comp>

<!--默认插槽-->
<foo>
  <div slot-scope="{ msg }">
    {
  { msg }}
  </div>
</foo>

<!--命名插槽-->
<foo>
  <template slot="one" slot-scope="{ msg }">
    text slot: {
  { msg }}
  </template>

  <div slot="two" slot-scope="{ msg }">
    element slot: {
  { msg }}
  </div>
</foo>

更新后的语法：

<Comp>
  <!-- 默认插槽 -->
  <template><p>向默认Slot插入的内容</p></template>
  <!-- 具名插槽 -->
  <template v-slot:slot1><p>向具名Slot插入的内容</p></template>
  <!-- 作用域插槽 -->
  <template v-slot:slot2="{innerUser}