Быстро освойте основные новые функции Vue3.0, выполнив 10 небольших упражнений.

Vue.js
Быстро освойте основные новые функции Vue3.0, выполнив 10 небольших упражнений.

Vue3.0 уже некоторое время находится в бета-версии, и официальная версия не за горами, поэтому мне действительно нужно изучить синтаксис Vue3.0.

Адрес блога на GitHub:GitHub.com/Tablesink нужно…

Строительство окружающей среды

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

После завершения загрузки открываем код и open sourceMap:

  • tsconfig.json измените поле sourceMap на true:"sourceMap": true

  • rollup.config.js В rollup.config.js введите вручную:output.sourcemap = true

  • Создайте глобальный файл vue:yarn dev

  • Создайте демонстрационный каталог в корневом каталоге для хранения примера кода, создайте html-файл в демонстрационном каталоге и импортируйте созданный файл vue.

Использование API очень просто Следующее содержание можно понять, посмотрев пример кода, поэтому следующий пример не объяснит слишком много.

reactive

реактивный: создавать реактивные объекты данных

Функция настройки — это новая функция входа, эквивалентная функции beforeCreate и созданная в vue2.x, в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 : Проверяет, является ли значение ссылочным объектом ссылки.

<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 : преобразует реактивный объект данных в один реактивный объект.

Выровняйте реактивный прокси-объект и преобразуйте его в ссылочный прокси-объект, чтобы свойства объекта можно было использовать непосредственно в шаблоне.

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

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-модель: двусторонняя привязка

<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.xprovide / 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 установка (альтернативный вариант)
created установка (альтернативный вариант)
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/Tablesink нужно….

В этой статье перечислены только те API, которые, как я думаю, будут часто использоваться.В Vue3.0 есть много новых функций, таких какcustomRef,markRaw, если читателям интересно, см. документацию по Vue Composition API.

Справочная статья:

Категории