Vue3.0 发 beta 版都有一段时间了，正式版也不远了，所以真的要学习一下 Vue3.0 的语法了。
GitHub 博客地址: https://github.com/biaochenxuying/blog
环境搭建 $ git pull https://github.com/vuejs/vue-next.git $ cd vue-next && yarn下载完成之后打开代码， 开启 sourceMap :
tsconfig.json 把 sourceMap 字段修改为 true: "sourceMap": true
rollup.config.js 在 rollup.config.js 中，手动键入： output.sourcemap = true
生成 vue 全局的文件：yarn dev
在根目录创建一个 demo 目录用于存放示例代码，并在 demo 目录下创建 html 文件，引入构建后的 vue 文件
api 的使用都是很简单的，下文的内容，看例子代码就能懂了的，所以下面的例子不会做过多解释。
reactivereactive: 创建响应式数据对象
setup 函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 created，在 beforeCreate 之后 created 之前执行。
<head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello Vue3.0</title> <style> body, #app { text-align: center; padding: 30px; } </style> <script src=""></script> </head> <body> <h3>reactive</h3> <div></div> </body> <script> const { createApp, reactive } = Vue const App = { template: ` <button @click='click'>reverse</button> <div>{{ state.message }}</div> `, setup() { console.log('setup '); const state = reactive({ message: 'Hello Vue3!!' }) click = () => { state.message = state.message.split('').reverse().join('') } return { state, click } } } createApp(App).mount('#app') </script> </html>
ref : 创建一个响应式的数据对象
isRef : 检查值是否是 ref 的引用对象。
使用 Composition API 时，反应性引用和模板引用的概念是统一的。
为了获得对模板中元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回。
<html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello Vue3.0</title> <style> body, #app { text-align: center; padding: 30px; } </style> <script src=""></script> </head> <body> <h3>Template Refs</h3> <div></div> </body> <script> const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue const App = { template: ` <button @click='click'>count++</button> <div ref="count">{{ count }}</div> `, setup() { const count = ref(null); onMounted(() => { // the DOM element will be assigned to the ref after initial render console.log(count.value) // <div/> }) click = () => { count.value++; console.log("click count.value：", count.value) } return { count, click } } } createApp(App).mount('#app') </script> </html>
toRefs : 将响应式数据对象转换为单一响应式对象