写作不易，资瓷一下呗！本文首发于个人博客：https://raycoder.me
咕了这么久，我干了什么？
呼，俺前些天在准备期末考试，终于放假了~~~😍😍😍🎉🎉🎉可以更新一下博客了！
学 了 什 么（活 到 老 学 到 老）
哦，JS、Vue和React。
为什么关注Vue3？
Vue3.0RC🤢🤔
正文开始
（Vue3英文文档：https://v3.vuejs.org，中文：https://v3.cn.vuejs.org）
Vue3重写原因？
Tree shaking support：可以将无用模块“剪辑”，仅打包需要的。Composition API：组合APIBetter TypeScript support：更优秀的Ts支持更好的
Virtual DOM Diff算法代码的
聚集性
Composition API：组合API
在Vue 2.x中，浏览器端和webpack都可以使用一个Vue对象（import Vue from "vue"）。
而在Vue3中（webpack环境），你可以通过从Vue中导入所需功能来使用，有助于减小代码体积）
<template>
<button @click="increment">
Count is: {{ state.count }}, double is: {{ state.double }}
</button>
</template>
<script>
import { reactive, computed } from 'vue'
export default {
setup() {
const state = reactive({
count: 0,
double: computed(() => state.count * 2)
})
function increment() {
state.count++
}
return {
state,
increment
}
}
}
</script>
参阅：https://composition-api.vuejs.org/
代码的聚集性
使用组件时，一个HTML节点可能会与多个选项相关：
<template>
<input v-model="inputVal" @blur="handleBlur" :style="inputStyle"></input>
</template>
<script>
prefixCls = `test-input`
export default {
data () {
return {
inputVal: '',
prefixCls: prefixCls
// ...
}
},
methods: {
handleBlur () {
// Handle Blur
}
// ...
},
computed: {
inputStyle () {
return [`${prefixCls}`]
},
// ...
},
watch: {
inputVal () {
handleInput()
},
// ...
},
// ...
}
</script>
<style>...</style>
如是，一个input的代码被分散到了许多选项中：data，methods，computed，watch，如Vue官方图：
Vue官方示例如下：
function useCreateFolder (openFolder) {
// originally data properties
const showNewFolder = ref(false)
const newFolderName = ref('')
// originally computed property
const newFolderValid = computed(() => isValidMultiName(newFolderName.value))
// originally a method
async function createFolder () {
if (!newFolderValid.value) return
const result = await mutate({
mutation: FOLDER_CREATE,
variables: {
name: newFolderName.value
}
})
openFolder(result.data.folderCreate.path)
newFolderName.value = ''
showNewFolder.value = false
}
return {
showNewFolder,
newFolderName,
newFolderValid,
createFolder
}
}
Q.是不是Vue3就不能使用选项API了？
A.可以用，这是两个并存的API。