Open biaochenxuying opened 4 years ago
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
"sourceMap": true
rollup.config.js 在 rollup.config.js 中,手动键入: output.sourcemap = true
output.sourcemap = true
生成 vue 全局的文件:yarn dev
yarn dev
在根目录创建一个 demo 目录用于存放示例代码,并在 demo 目录下创建 html 文件,引入构建后的 vue 文件
api 的使用都是很简单的,下文的内容,看例子代码就能懂了的,所以下面的例子不会做过多解释。
reactive: 创建响应式数据对象 setup 函数是个新的入口函数,相当于 vue2.x 中 beforeCreate 和 created,在 beforeCreate 之后 created 之前执行。
reactive: 创建响应式数据对象
setup 函数是个新的入口函数,相当于 vue2.x 中 beforeCreate 和 created,在 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 的引用对象。
<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>
使用 Composition API 时,反应性引用和模板引用的概念是统一的。
Composition API
为了获得对模板中元素或组件实例的引用,我们可以像往常一样声明 ref 并从 setup() 返回。
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: ` <button @click='click'>count++</button> <div ref="count" style="margin-top: 20px">{{ 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>
<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 : 将响应式数据对象转换为单一响应式对象
将一个 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>
computed : 创建计算属性
<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>computed</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, computed } = Vue const App = { template: ` <button @click='handleClick'>count++</button> <div style="margin-top: 20px">{{ count }}</div> `, setup() { const refData = ref(0); const count = computed(()=>{ return refData.value; }) const handleClick = () =>{ refData.value += 1 // 要修改 count 的依赖项 refData } console.log("refData:" , refData) return { count, handleClick } } } 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>computed</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, computed } = Vue const App = { template: ` <button @click='handleClick'>count++</button> <div style="margin-top: 20px">{{ count }}</div> `, setup() { const refData = ref(0); const count = computed({ get(){ return refData.value; }, set(value){ console.log("value:", value) refData.value = value; } }) const handleClick = () =>{ count.value += 1 // 直接修改 count } console.log(refData) return { count, handleClick } } } createApp(App).mount('#app') </script> </html>
watch : 创建 watch 监听 watchEffect : 如果响应性的属性有变更,就会触发这个函数
watch : 创建 watch 监听
watchEffect : 如果响应性的属性有变更,就会触发这个函数
<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>watch && watchEffect</h3> <div id='app'></div> </body> <script> const { createApp, reactive, ref, watch, watchEffect } = Vue const App = { template: ` <div class="container"> <button style="margin-left: 10px" @click="handleClick()">按钮</button> <button style="margin-left: 10px" @click="handleStop">停止 watch</button> <button style="margin-left: 10px" @click="handleStopWatchEffect">停止 watchEffect</button> <div style="margin-top: 20px">{{ refData }}</div> </div>` , setup() { let refData = ref(0); const handleClick = () =>{ refData.value += 1 } const stop = watch(refData, (val, oldVal) => { console.log('watch ', refData.value) }) const stopWatchEffect = watchEffect(() => { console.log('watchEffect ', refData.value) }) const handleStop = () =>{ stop() } const handleStopWatchEffect = () =>{ stopWatchEffect() } return { refData, handleClick, handleStop, handleStopWatchEffect } } } createApp(App).mount('#app') </script> </html>
v-model:就是双向绑定
<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>v-model</h3> <div id='app'></div> </body> <script> const { createApp, reactive, watchEffect } = Vue const App = { template: `<button @click='click'>reverse</button> <div></div> <input v-model="state.message" style="margin-top: 20px" /> <div style="margin-top: 20px">{{ state.message }}</div>`, setup() { const state = reactive({ message:'Hello Vue 3!!' }) watchEffect(() => { console.log('state change ', state.message) }) click = () => { state.message = state.message.split('').reverse().join('') } return { state, click } } } createApp(App).mount('#app') </script> </html>
使用 readonly 函数,可以把 普通 object 对象、reactive 对象、ref 对象 返回一个只读对象。
readonly
object 对象
reactive 对象
ref 对象
返回的 readonly 对象,一旦修改就会在 console 有 warning 警告。
readonly 对象
console
warning
程序还是会照常运行,不会报错。
<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>readonly</h3> <div id='app'></div> </body> <script> const { createApp, reactive, readonly, watchEffect } = Vue const App = { template: ` <button @click='click'>reverse</button> <button @click='clickReadonly' style="margin-left: 20px">readonly++</button> <div style="margin-top: 20px">{{ original.count }}</div> `, setup() { const original = reactive({ count: 0 }) const copy = readonly(original) watchEffect(() => { // works for reactivity tracking console.log(copy.count) }) click = () => { // mutating original will trigger watchers relying on the copy original.count++ } clickReadonly = () => { // mutating the copy will fail and result in a warning copy.count++ // warning! } return { original, click, clickReadonly } } } createApp(App).mount('#app') </script> </html>
provide 和 inject 启用类似于 2.x provide / inject 选项的依赖项注入。
provide
inject
provide / inject
两者都只能在 setup() 当前活动实例期间调用。
import { provide, inject } from 'vue' const ThemeSymbol = Symbol() const Ancestor = { setup() { provide(ThemeSymbol, 'dark') } } const Descendent = { setup() { const theme = inject(ThemeSymbol, 'light' /* optional default value */) return { theme } } }
inject 接受可选的默认值作为第二个参数。
如果未提供默认值,并且在 Provide 上下文中找不到该属性,则 inject 返回 undefined。
Provide
undefined
Vue2 与 Vue3 的生命周期勾子对比:
除了 2.x 生命周期等效项之外,Composition API 还提供了以下调试挂钩:
onRenderTracked
onRenderTriggered
这两个钩子都收到一个 DebuggerEvent,类似于观察者的 onTrack 和 onTrigger 选项:
DebuggerEvent
onTrack
onTrigger
export default { onRenderTriggered(e) { debugger // inspect which dependency is causing the component to re-render } }
例子:
<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>Lifecycle Hooks</h3> <div id='app'></div> </body> <script> const { createApp, reactive, onMounted, onUpdated, onUnmounted } = Vue const App = { template: ` <div class="container"> <button @click='click'>reverse</button> <div style="margin-top: 20px">{{ state.message }}</div> </div>` , setup() { console.log('setup!') const state = reactive({ message: 'Hello Vue3!!' }) click = () => { state.message = state.message.split('').reverse().join('') } onMounted(() => { console.log('mounted!') }) onUpdated(() => { console.log('updated!') }) onUnmounted(() => { console.log('unmounted!') }) return { state, click } } } createApp(App).mount('#app') </script> </html>
本文只列出了笔者觉得会用得非常多的 api,Vue3.0 里面还有不少新特性的,比如 customRef、markRaw ,如果读者有兴趣可看 Vue Composition API 文档。
customRef
markRaw
Vue Composition API 文档: https://composition-api.vuejs.org/api.html#setup
vue-next 地址: https://github.com/vuejs/vue-next
参考文章:
支持一下下👇
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。
GitHub 博客地址: https://github.com/biaochenxuying/blog
环境搭建
下载完成之后打开代码, 开启 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
ref & isRef
Template Refs
使用
Composition API
时,反应性引用和模板引用的概念是统一的。为了获得对模板中元素或组件实例的引用,我们可以像往常一样声明
ref
并从setup()
返回。toRefs
将一个 reactive 代理对象打平,转换为 ref 代理对象,使得对象的属性可以直接在 template 上使用。
computed
watch & watchEffect
v-model
readonly
使用
readonly
函数,可以把 普通object 对象
、reactive 对象
、ref 对象
返回一个只读对象。返回的
readonly 对象
,一旦修改就会在console
有warning
警告。程序还是会照常运行,不会报错。
provide & inject
provide
和inject
启用类似于 2.xprovide / inject
选项的依赖项注入。两者都只能在
setup()
当前活动实例期间调用。inject
接受可选的默认值作为第二个参数。如果未提供默认值,并且在
Provide
上下文中找不到该属性,则inject
返回undefined
。Lifecycle Hooks
Vue2 与 Vue3 的生命周期勾子对比:
除了 2.x 生命周期等效项之外,
Composition API
还提供了以下调试挂钩:onRenderTracked
onRenderTriggered
这两个钩子都收到一个
DebuggerEvent
,类似于观察者的onTrack
和onTrigger
选项:例子:
最后
本文只列出了笔者觉得会用得非常多的 api,Vue3.0 里面还有不少新特性的,比如
customRef
、markRaw
,如果读者有兴趣可看 Vue Composition API 文档。Vue Composition API 文档: https://composition-api.vuejs.org/api.html#setup
vue-next 地址: https://github.com/vuejs/vue-next
参考文章:
支持一下下👇