經過10個實例小練習，快速熟練 Vue3.0 核心新特性

時間  2020-05-14
標籤 經過 實例 練習 快速 熟練 vue3.0 vue 核心 特性 简体版
原文   原文鏈接

Vue3.0 發 beta 版都有一段時間了，正式版也不遠了，因此真的要學習一下 Vue3.0 的語法了。javascript

GitHub 博客地址: github.com/biaochenxuy…css

環境搭建

$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn
複製代碼

下載完成以後打開代碼， 開啓 sourceMap :html

  • tsconfig.json 把 sourceMap 字段修改成 true: "sourceMap": truevue

  • rollup.config.js 在 rollup.config.js 中，手動鍵入： output.sourcemap = truejava

  • 生成 vue 全局的文件：yarn devreact

  • 在根目錄建立一個 demo 目錄用於存放示例代碼，並在 demo 目錄下建立 html 文件，引入構建後的 vue 文件git

api 的使用都是很簡單的，下文的內容，看例子代碼就能懂了的，因此下面的例子不會作過多解釋。github

reactive

reactive: 建立響應式數據對象json

setup 函數是個新的入口函數，至關於 vue2.x 中 beforeCreate 和 created，在 beforeCreate 以後 created 以前執行。api

<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 的引用對象。

<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: ` <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

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

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 & 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

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

使用 readonly 函數，能夠把 普通 object 對象、reactive 對象、ref 對象 返回一個只讀對象。

返回的 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

provide 和 inject 啓用相似於 2.x 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。

Lifecycle Hooks

Vue2 與 Vue3 的生命週期勾子對比：

Vue2 Vue3
beforeCreate setup(替代)
created setup(替代)
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured
空 onRenderTracked
空 onRenderTriggered

除了 2.x 生命週期等效項以外，Composition API 還提供瞭如下調試掛鉤：

  • onRenderTracked
  • onRenderTriggered

這兩個鉤子都收到一個 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>
複製代碼

最後

GitHub 博客地址: github.com/biaochenxuy… 。

本文只列出了筆者以爲會用得很是多的 api，Vue3.0 裏面還有很多新特性的，好比 customRef、markRaw ，若是讀者有興趣可看 Vue Composition API 文檔。

參考文章：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程