2019 VueConf US
偶然间浏览youtube看到了这个视频，觉得很有启发，遂分享一下。
了解了一下，2019年的3月25-27日，在伦敦举行的vueConf。首先介绍一下，演讲者是一个逗比，拍照的时候看错了摄像头，哈哈。大佬的工作是负责Vue.js文档编写，但是大佬肯定是写代码的吧……
先声明，这些可能最终不一定会在Vue3中实现，但是话说回来，既然提到了应该大部分是会实现的，话不能说的太满不是。
变化 => 更加简洁
变化就是从语法层面上更加简洁，主要是下面几个方面：
- 再见响应式注意事项
- 支持多个根节点
- 更少的传输包裹
- 更聪明的v-model
- 更简洁的render函数
- 其他（是否支持IE、vue2到vue3升级要很久吗、会向下兼容吗）
再见响应式注意事项
这个特性还是很期待的，和js原本的操作就一致了，不用单独注意。
原来 Vue2
// 通过下标修改数组中的值
Vue.set(this.myArray, index, newValue)
// 给对象添加属性
Vue.set(this.myObject, key, value)
// 删除对象属性
Vue.delete(this.myObject, key)
现在 Vue3
// 通过下标修改数组中的值
Vue.setthis.myArray[index] = newValue
// 给对象添加属性
this.myObject[key] = value
// 删除对象属性
delete this.myObject[key]
支持多个根节点
这个改进可以让我们少去了一定要在外边包一个div的繁琐。
原来 Vue2
<template>
<div>
<div></div>
<div></div>
</div>
</template>
现在 Vue3
<template>
<div></div>
<div></div>
</template>
更少的传输包裹
封装组件更加简洁
原来 Vue2
// 组件内部
<script>
export default {
inheritAttrs: false,
model: {
event: 'update'
},
props: ['label']
}
</script>
<template>
<label>
{{label}}
<input
v-bind="$attrs"
@input="$emit('update', $event.target.value)"
v-on="$listeners"
/>
</label>
</template>
// 使用
<BaseInput
v-model="searchText"
placeHolder="Search"
@keyup.enter="search"
></BaseInput>
现在 Vue3
// 组件内部
<script>
export default {
props: ['label']
}
</script>
<template>
<label>
{{label}}
<input v-bind="$attrs" />
</label>
</template>
// 使用
<BaseInput
v-model="searchText"
placeHolder="Search"
@keyup.enter="search"
></BaseInput>
更聪明的v-model
场景是这样
<template>
// 不封装成组件时，这么用
<select v-model="selectedChoice">
<option disabled />
<option v-for="choice in choices">
{{choice}}
</option>
</select>
// 封装后这样调用
<BaseSelect
v-model="selectedChoice"
:choices="choices"
/>
原来 Vue2
// 如此这般实现还是很繁琐的吧
<template>
<select @change="$emit('input', $event.target.value)">
<option
disabled
:selected="!choices.includes(value)"
/>
<option
v-for="choice in choices"
:selected="choice === value"
>
{{choice}}
</option>
</select>
</template>
现在 Vue3
// 是不是很简洁，紧扣题目。……
<template>
<select v-bind="$attrs">
<option disabled />
<option v-for="choice in choices">
{{ choice }}
</option>
</select>
</template>
更简洁的render函数
在template下正常使用组件是这样
<template>
<BaseInput
v-model="searchText"
:class="$style.searchInput"
placeholder="Search"
/>
</template>
如果是jsx，是这样
// jsx
render(h){
return (
<BaseInput
vModel="{this.searchText}"
class="{this.$style.searchInput}"
placeholder="Search"
/>
)
},
如果没有jsx，改成写render，那么是这样…… 感同身受不，感谢你坚持下来了……
// without jsx
render(h){
return h(BaseInput, {
props: {
value: this.searchText
},
on: {
update: newValue => {
this.searchText = newValue
}
},
class: this.$style.searchInput,
attrs: {
placeholder: 'Search'
}
})
}
那么Vue3来了之后变成了这样
// 确实是简洁了不少呀！
render(h){
return h(BaseInput, {
modelValue: this.searchText,
onModelUpdate: newValue => {
this.searchText = newValue
},
class: this.$style.searchInput,
placeholder: 'Search'
})
}
其他（是否支持IE、vue2到vue3升级要很久吗、vue2会更新以上特性吗）
- 是否支持IE。 yes，但是响应式注意事项，还是得自己注意（Vue.set）
- vue2->vue3，要一周，nonono，据说有工具自动转换（真的么）。
- vue2会更新以上特性吗，尽量更新，但是响应式注意事项，还是得自己注意（Vue.set）
