1. Создание проекта

1. Проверьте версию скаффолдинга vue-cli (vue -V) и обновите более раннюю версию (npm install @vue/cli -g)

2. Создайте проект (vue create vue3test)

Выберите значение по умолчанию (непосредственно нажмите Enter), чтобы инициализировать проект.

3. Войдите в папку проекта и обновите версию vue (vue add vue-next)

4. Запустите проект (npm run serve)

5, войдите в браузер (http://localhost:8081) для инициализации отображения страницы

2. API Vue3

    vue3主要是低侵入式的、函数式的 API，需要用到的函数都必须提前引入。例如：引入ref函数：import { ref} from 'vue'

1. функция настройки

Возвращает объект, свойства которого будут объединены с контекстом рендеринга шаблона компонента. Все остальные импортированные функции должны выполняться внутри него. Создайте экземпляр компонента, затем инициализируйте реквизиты, а затем вызовите функцию настройки. С точки зрения хуков жизненного цикла, он будет вызываться перед хуком beforeCreate.

<script>
export default {
    setup(){
        console.log("steup")
    },
    beforeCreate(){
        console.log("beforeCreate")
    },
    created(){
        console.log("created")
    }

}
</script

Порядок печати браузера:

2. Отзывчивый системный API

(1), исх.

Принимает значение параметра и возвращает реактивный и изменяемый объект ссылки. Объект ref имеет единственное свойство .value, которое указывает на внутреннее значение. В основном используется для создания чисел и строк. При динамическом изменении значения объекта ref вам необходимо использовать .value для его изменения. Но ссылка, возвращаемая установкой, будет автоматически развернута в шаблоне, не нужно писать .value. Нажмите кнопку, значение отображаемого числа станет 9999

<template>
  <div class="hello">
      <p>{{num}}</p>
      <p>{{str}}</p>
    <button @click="onChange">修改num</button>
  </div>
</template>
<script>
  import {ref} from 'vue'
export default {
    setup(){
        let num = ref(333)
        let str = ref('fffff');
        let onChange = ()=>{
            num.value = 9999;
        }
        return{
            num,
            str,
            onChange
        }
    }
}
</script>

(2), реактивный

Принимает простой объект и возвращает реактивный прокси для этого простого объекта.

<template>
  <div class="hello">
    <p>{{obj.name}}</p>
    <button @click="onChange">修改name</button>
  </div>
</template>
<script>
    import {reactive} from 'vue'
    export default {
        setup(){
            let obj = reactive({
                name:'tom',
                age:20
            });
            let onChange = ()=>{
                obj.name = "Json";
            }
            return{
                obj,
                onChange
            }
        }
    }
</script>

(3), рассчитано

Передайте функцию получения, которая возвращает объект ref, который по умолчанию нельзя изменить вручную. При нажатии кнопки proNum не изменяется, и браузер выдает сообщение «Операция записи не удалась: вычисленное значение доступно только для чтения».

<template>
  <div class="hello">
    <p>{{proNum}}</p>
    <button @click="onChange">修改proNum</button>
  </div>
</template>
<script>
    import {ref,computed} from 'vue'
    export default {
        setup(){
            const num = ref(5)
            const proNum = computed(() => num.value + 1)
            let onChange = ()=>{
                proNum.value += 10;
            }
            return{
                proNum,
                onChange
            }
        }
    }
</script>

Если вы можете изменить вычисленное значение, вам нужно получить входящий объект и иметь набор функций для создания состояния, которое может быть рассчитано вручную измененным.

<template>
  <div class="hello">
    <p>{{num}}</p>
    <button @click="onChange">修改proNum</button>
  </div>
</template>
<script>
    import {ref,computed} from 'vue'
    export default {
        setup(){
            const num = ref(1)
            const proNum = computed({
                set:(val)=>{
                    num.value = val+10
                },
                get:()=>num.value
            })
            let onChange = ()=>{
                proNum.value = 10;
                console.log(num)
            }
            return{
                num,
                onChange
            }
        }
    }
</script>

(4), только для чтения

Передача объекта (реактивного или простого) или ref возвращает доступный только для чтения прокси исходного объекта. Прокси-сервер только для чтения является «глубоким», и любые вложенные свойства внутри объекта также доступны только для чтения. Нажмите кнопку, браузер предложит «Установить операцию по ключу «значение» не удалось: цель доступна только для чтения»

<template>
  <div class="hello">
    <p>{{readNum}}</p>
    <button @click="onChange">修改readNum</button>
  </div>
</template>
<script>
    import {ref,readonly} from 'vue'
    export default {
        setup(){
            const num = ref(1)
           let readNum = readonly(num)
            let onChange = ()=>{
                readNum.value = 10;
            }
            return{
                readNum,
                onChange
            }
        }
    }
</script>

(5), смотреть

Необходимо прослушивать определенный источник данных и выполнять побочные эффекты в функции обратного вызова. По умолчанию используется отложенное выполнение, что означает, что обратный вызов выполняется только при изменении источника прослушиваемых данных.

<template>
  <div class="hello">
    <p>{{num}}</p>
    <p>{{state.name}}</p>
    <button @click="onChange">修改num-name</button>
  </div>
</template>
<script>
    import {ref,reactive,watch} from 'vue'
    export default {
        setup(){
            // 侦听一个 reactive  一个数据源
            const state = reactive({ name: 'tom' });
            watch(
                () => state.name,
                (name, prevName) => {
                    console.log(prevName,name)
                }
            );
            // 直接侦听一个 ref   一个数据源
            const num = ref(1);
            watch(num, (num, prevNum) => {
               console.log(prevNum,num)
            });

            // 侦听多个数据源
            watch([num,state], ([num,name], [prevNum,prevName]) => {
                console.log(prevNum,num+"-----"+prevName.name,name.name)
            });
            let onChange = ()=>{
                state.name = 'Json';
                num.value =  10;
            };
            return{
                state,
                num,
                onChange
            }
        }
    }
</script>

(6), смотретьЭффект

Немедленно выполняет переданную функцию, реактивно отслеживает ее зависимости и повторно запускает функцию при изменении ее зависимостей.

<template>
  <div class="hello">
    <p>{{num}}</p>
  </div>
</template>
<script>
    import {ref,watchEffect} from 'vue'
    export default {
        setup(){
            const num = ref(1);
            const stop = watchEffect(()=>{
                console.log(num.value)
            })
            setTimeout(()=>{
                num.value = 10
            },2000)
            
            // 停止侦听  调用stop 浏览器上不会打印 10
            stop();
            return{
                num
            }
        }
    }
</script>

3. Функция хука жизненного цикла

与 2.x 版本生命周期相对应的组合式 API
beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted

Эти функции регистрации ловушки жизненного цикла могут использоваться только синхронно во время установки (), поскольку они полагаются на внутренние глобальные состояния для определения местонахождения текущего экземпляра компонента (при вызове экземпляра установки ()), а не в текущем компоненте, эти функции будут выдавать ошибку . Контекст экземпляра компонента также устанавливается во время синхронного выполнения хуков жизненного цикла, и поэтому при удалении компонентов слушатели и статус вычислений, созданные во внутреннем синхронном хуке внутри жизненного цикла, также будут автоматически удалены.

<template>
  <div class="hello">
    <p>{{num}}</p>
    <button @click="onChange">修改num</button>
  </div>
</template>
<script>
    import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
    export default {
        setup(){
            onBeforeMount(() => {
                console.log('onBeforeMount!')
            });
            onMounted(() => {
                console.log('mounted!')
            });
            onBeforeUpdate(() => {
                console.log('onBeforeUpdate!')
            });
            onUpdated(() => {
                console.log('updated!')
            });
            onBeforeUnmount(() => {
                console.log('onBeforeUnmount!')
            });
            onUnmounted(() => {
                console.log('unmounted!')
            });
            const num = ref(1);
            let onChange = ()=>{
                num.value = 10;
            };
            return{
                num,
                onChange
            }
        }
    }
</script>

Добро пожаловать, чтобы обратить внимание на общедоступный номер (веб-обучение), учитесь и развивайтесь вместе: