环境搭建
$ 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 的使用都是很简单的，下文的内容，看例子代码就能懂了的，所以下面的例子不会做过多解释。
reactive
reactive: 创建响应式数据对象setup 函数是个新的入口函数，相当于 vue2.x 中 beforeCreate 和 created，在 beforeCreate 之后 created 之前执行。 <head> <meta charset="UTF-8"> <meta name="viewport" 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="../../packages/vue/dist/vue.global.js"></script> </head> <body> <h3>reactive</h3> <div id='app'></div> </body> <script> const { createApp, reactive } = Vue const App = { template: ` <button @click='click'>reverse</button> <div style="margin-top: 20px">{{ 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 : 创建一个响应式的数据对象isRef : 检查值是否是 ref 的引用对象。
isRef : 检查值是否是 ref 的引用对象。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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="../../packages/vue/dist/vue.global.js"></script> </head> <body> <h3>ref & isRef</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, isRef } = Vue const App = { template: ` <button @click='click'>count++</button> <div style="margin-top: 20px">{{ count }}</div> `, setup() { const count = ref(0); console.log("count.value：", count.value) // 0 count.value++ console.log("count.value：", count.value) // 1 // 判断某值是否是响应式类型 console.log('count is ref:', isRef(count)) click = () => { count.value++; console.log("click count.value：", count.value) } return { count, click, } } } createApp(App).mount('#app') </script> </html>
Template Refs
使用 Composition API 时，反应性引用和模板引用的概念是统一的。
为了获得对模板中元素或组件实例的引用，我们可以像往常一样声明 ref 并从 setup() 返回。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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="../../packages/vue/dist/vue.global.js"></script> </head> <body> <h3>Template Refs</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue const App = { template: ` <div v-for="(item, i) in list" :ref="el => { divs[i] = el }"> {{ item }} </div> `, setup() { const list = reactive([1, 2, 3]) const divs = ref([]) // make sure to reset the refs before each update onBeforeUpdate(() => { divs.value = [] }) onMounted(() => { // the DOM element will be assigned to the ref after initial render console.log(divs.value) // [<div/>] }) return { list, divs } } } createApp(App).mount('#app') </script> </html>
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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="../../packages/vue/dist/vue.global.js"></script> </head> <body> <h3>Template Refs</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue const App = { template: ` <div v-for="(item, i) in list" :ref="el => { divs[i] = el }"> {{ item }} </div> `, setup() { const list = reactive([1, 2, 3]) const divs = ref([]) // make sure to reset the refs before each update onBeforeUpdate(() => { divs.value = [] }) onMounted(() => { // the DOM element will be assigned to the ref after initial render console.log(divs.value) // [<div/>] }) return { list, divs } } } createApp(App).mount('#app') </script> </html>
toRefs
toRefs : 将响应式数据对象转换为单一响应式对象
将一个 reactive 代理对象打平，转换为 ref 代理对象，使得对象的属性可以直接在 template 上使用。
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" 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="../../packages/vue/dist/vue.global.js"></script> </head> <body> <h3>toRefs</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, isRef, toRefs } = Vue const App = { // template: ` // <button @click='click'>reverse</button> // <div style="margin-top: 20px">{{ state.message }}</div> // `, // setup() { // const state = reactive({ // message: 'Hello Vue3.0!!' // }) // click = () => { // state.message = state.message.split('').reverse().join('') // console.log('state.message: ', state.message) // } // return { // state, // click // } // } template: ` <button @click='click'>count++</button> <div style="margin-top: 20px">{{ message }}</div> `, setup() { const state = reactive({ message: 'Hello Vue3.0!!' }) click = () => { state.message = state.message.split('').reverse().join('') console.log('state.message: ', state.message) } return { click, ...toRefs(state) } } } createApp(App).mount('#app') </script> </html>
