Vue.js 2.6尝鲜
发布时间：2019-08-20 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Vue.js 2.6尝鲜，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
Vue 2.6 "Macross" 发布了，同时也是Vuejs五周年~
在这篇文章中，将会介绍新版本的新特性, 比如slots的新语法，Vue.observable()等等
1. ScoPEd slots(作用域插槽)的新语法
这是一个比较重大的改变，包含的有：
- v-slot新指令，结合了
slot 和 slot-scope的功能
-
scoped slots的简写
之前在Vue@2.5.22中是这样使用scoped-slots的:
button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
<template>
<testcomponent>
<! - 默认 scoped slot ->
<div slot-scope="{message}">
{{`Default slot with message: ${message}`}}
</ div>
<! - 具名 scoped slot ->
<div slot="text" slot-scope="{text}">
{{`Named slot with text: ${text}`}}
</ div>
</ TestComponent>
</ template>@H_616_126@
现在是这样的：
button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="
{{`Default slot with message: ${message}`}}
{{`Named slot with text: ${text}`}}
" title="" data-original-title="复制">
<template>
<TestComponent>
<! - 默认 scoped slot ->
<template v-slot="{message}">
<div>
{{`Default slot with message: ${message}`}}
</ div>
</ template>
<! - 具名 scoped slot ->
<template v-slot:text="{text}">
<div>
{{`Named slot with text: ${text}`}}
</ div>
</ template>
</ TestComponent>
</ template>
默认插槽：
<template>
<! - v-slot is used directly on the parent ->
<TestComponent v-slot="{message}">
<div>
{{`Default slot with message: ${message}`}}
</ div>
</ TestComponent>
</ template>
具名插槽：
<template>
<TestComponent>
<! - # 简写: ->
<template #text="{text}">
<div>
{{`Named slot with text: ${text}`}}
</ div>
</ template>
</ TestComponent>
</ template>
新版中，可以不使用任何作用域插槽变量，但是仍然可以通过父组件的$scopedSlots去引用到
2. 动态参数指令
如果我们想在v-bind or v-on中使用动态变量，在Vue@2.5.22中：
512_394@" title="" data-original-title="复制">
<div v-bind="{ [key]: value }"></div>
<div v-on="{ [event]: handler }"></div>
但是这个例子有几个缺点：
为了解决这些问题，Vue@2.6.0 引入了一个新语法：
<div v-bind:[key]="value"></div>
<div v-on:[event]="handler"></div>
举个例子：
<template>
<div>
<! - v-bind 动态key ->
<div v-bind:[key]="value"> </ div>
<! - 简写 ->
<div :[key]="value"> </ div>
<! - v-on 动态事件，event变量 ->
<div v-on:[event]="handler"> </ div>
<! - 简写 ->
<div @[event]="handler"> </ div>
<! - v-slot 动态名字 ->
<TestComponent>
<template v-slot:[name]>
Hello
</ template>
</ TestComponent>
<! - 简写 ->
<TestComponent>
<template #[name]>
Cool slot
</ template>
</ TestComponent>
</ div>
</ template>
3. 使用Vue.observable()创建一个响应对象
之前，创建一个响应对象，必须在一个vue实例中配置。现在我们可以在Vue实例外部，通过使用Vue.observable(data)创建，如下：
import vue From vue;
const state = Vue.observable ({
counter: 0,
});
export default {
render () {
return (
{state.counter}
import vue from vue;
const state = Vue.observable ({
counter: 0,
});
export default {
render () {
return (
<div>
{state.counter}
<button v-on:click={() => {state.counter ++; }}>
Increment counter
</ button>
</ div>
);
},
};
4. server端获取数据
在新的升级版本中，vue-server-renderer改变了SSR的数据加载策略。
之前，我们推荐使用asyncData()在router.getMatchedComponents()方法中获取的组件中，获取数据。
新版本中有一个特别的组件方法：serverPRefetch() 。vue-server-renderer会在每个组件中调用它，它会返回一个promise。
name}}