vue2.6 增加的特性

Scoped slots(作用域插槽)的新语法

<!-- 父组件 -->
<HelloWorld msg="Welcome to Your Vue.js App">
  <h1 slot="header">header</h1>
  <h2>content</h2>
  <h3 slot="footer">footer</h3>
</HelloWorld>
<!-- HelloWorld.vue -->
<div class="hello">
  <h1>{{ msg }}</h1>
  <slot name="header"></slot>
  <slot name="footer"></slot>
</div>

<!-- 让插槽内容能够访问子组件中才有的数据 -->
<!-- v2.5作用域插槽用法1 -->
<template>
  <div class="home">
    <HelloWorld>
      <template slot="default" slot-scope="slotProps">
        {{ slotProps.user.firstName }} {{ slotProps.user.lastName }}
      </template>
    </HelloWorld>
  </div>
</template>
<!-- v2.5作用域插槽用法2 -->
<template>
  <div class="home">
    <HelloWorld>
      <span slot-scope="{user}">
        {{ user.lastName }} {{ user.firstName }}
      </span>
    </HelloWorld>
  </div>
</template>
<!-- v-slot新指令，结合了slot 和 slot-scope的功能 -->
<!-- v2.6作用域插槽用法1 -->
<template>
  <div class="home">
    <HelloWorld>
      <template v-slot="data">
        {{ data.user.lastName }} {{ data.user.firstName }}
      </template>
    </HelloWorld>
  </div>
</template>
<!-- v2.6作用域插槽用法2 -->
<template>
  <div class="home">
    <HelloWorld>
      <template v-slot="{user}">
        {{ user.lastName }} {{ user.firstName }}
      </template>
    </HelloWorld>
  </div>
</template>
<!-- v2.6作用域插槽用法3 -->
<template>
  <div class="home">
    <HelloWorld>
      <template v-slot:default="data">
        {{ data.user.lastName }} {{ data.user.firstName }}
      </template>
    </HelloWorld>
  </div>
</template>
<!-- v2.6作用域插槽用法4 -->
<template>
  <div class="home">
    <HelloWorld>
      <template v-slot:default="{user}">
        {{ user.lastName }} {{ user.firstName }}
      </template>
    </HelloWorld>
  </div>
</template>
<!-- 这个是子组件 -->
<template>
  <div class="hello">
    <slot :user="user"></slot>
  </div>
</template>

data() {
    return {
      user: {
        lastName: "koa",
        firstName: "express"
      }
    }
  }

动态参数指令

如果我们想在 v-bind or v-on 中使用动态变量，在 Vue@2.5.22 中：

<div v-bind="{ [key]: value }"></div>
<div v-on="{ [event]: handler }"></div>

Vue@2.6.0 引入了一个新语法来动态创建参数指令

<HelloWorld :[key]="value" @[event]="handler"> </HelloWorld>

使用 Vue.observable()创建一个响应对象

之前，创建一个响应对象，必须在一个 Vue 实例中配置。现在我们可以在 Vue 实例外部，通过使用 Vue.observable(data)创建

import Vue from "vue";
export default {
  data: function() {
    return {
      state: Vue.observable({
        counter: 0
      })
    };
  }
};

server 端获取数据

ssr 服务端进行获取数据，实现效果就是网页看不到请求的接口

export default {
  // Call on the server
  async serverPrefetch() {
    //
    await this.fetchItem();
  }
};

改进的错误输出

<template>
  <div>
    <template key="test-key">
      {{ message }}
    </template>
  </div>
</template>

<template> cannot be keyed. Place the key on real elements instead.

  14 |    <template>
  15 |      <div>
  16 |        <template key="test-key">
     |                  ^^^^^^^^^^^^^^
  17 |          {{ message }}
  18 |        </template>

捕捉异步错误

现在 Vue 可以在生命周期方法钩子和事件方法中捕捉到异步错误异常

<template>
   <div @click="doSomething()">
     Some message
   </ div>
</ template>
<script>
export default {
   methods: {
     async doSomething () {
       await this.$nextTick ();
       throw new Error ('Another Error');
     },
   },
   async mounted () {
     await this.$nextTick ();
     throw new Error ('Some Error');
   },
};
</ script>

v-bind.prop

绑定为 DOM 属性，直接渲染成<p>123</p>而不是标签，如果是在组件上，将在组件上设置属性，把原有的 dom 覆盖了

<div v-bind:text-content.prop="'<p>123</p>'"></div>

支持自定义 toString()

把 message 替换成Hello message

export default {
  data: function() {
    return {
      message: {
        value: "message",
        toString() {
          return "Hello message";
        }
      }
    };
  }
};

{{message.value}}-->message
{{message}}-->Hello message

v-for 和可迭代对象

在 2.X 版本中，Map 和 Set, 不支持数据响应。在新版本中，v-for 可以遍历任何实现了 iterable 协议的对象，比如 Map, Set

<div v-for="item in items" :key="item">
  {{item}}
</div>

export default {
  data: function() {
    return {
      items: new Set([4, 2, 6])
    };
  },
  methods: {
    clickButton() {
      this.items = new Set([4, 2, 6, 10]);
    }
  }
};