Vue 3Официально еще не выпущен, ноAlphaверсия вышла.

Хотя официальный не рекомендует прямое использование в производственной средеVue 3, но учиться заранее всегда полезно.

Я кричала, что не могу больше учиться, но очень честно раскрыла руки.Vue 3Документация

Создать проект

VueОфициальный представитель очень заботится о том, чтобы предоставить репозиторий github, чтобы мы могли быстро испытатьVue 3Новые возможности:

git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-start
cd vue3-start

npm install or yarn intall

Когда среда разработки будет готова, запустите команду:

npm run dev

открыть в браузереhttp://127.0.0.1:8080, вы можете увидеть простую страницу счетчика:

Откройте package.json, текущая версия vue:3.0.0-beta.2

Что нового в Vue 3

Vue 3Цели дизайна — быть быстрее, меньше и лучше поддерживатьсяTypeScript.

Некоторые из новых функций включают в себя:

1. API композиции 2. Несколько корневых элементов 3. Приостановка 4. Несколько V-моделей 5. Реактивность 6. Телепорт 7. Переход 8. Удалить фильтр 9. Конфигурация приложения

1. API композиции

Vue официально выпущенComposition APIОфициальный плагин , чтобы большинство пользователей моглиVue2.xнаслаждатьсяFunction Baseновый опыт.

пока вvue 3Не нужно устанавливать плагины отдельно, все работает из коробки.

ОткрытьApp.vue,ты увидишьsetup()метод:

<template>
  <img src="./logo.png">
  <h1>Hello Vue 3!</h1>
  <button @click="inc">Clicked {{ count }} times.</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => {
      count.value++
    }

    return {
      count,
      inc
    }
  }
}
</script>

<style scoped>
img {
  width: 200px;
}
h1 {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

Composition APIЕсть два основных преимущества:

1. Четкая структура кода 2. Избавьтесь от повторяющейся логики

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {{ msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
export default {
  setup() {
    /* ---------------------------------------------------- */
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
    /* ---------------------------------------------------- */
    let msg= ref('some text')
    watch(msg, newVal => {
      console.log('msg changed', newVal)
    })
    const changeMessage = () => {
      msg.value = "new Message"
    }
    /* ---------------------------------------------------- */
    return {
      count,
      inc,
      dec,
      countDouble,
      msg,
      changeMessage
    }
  }
}
</script>

Если вы не хотите использоватьComposition API, вы также можете продолжать использовать2.xтрадиционный метод:

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p> Message: {{ msg }} </p>
    <button @click="changeMessage()">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
      msg: 'some message'
    }
  },
  computed: {
    countDouble() {
      return this.count*2
    }
  },
  watch: {
    count(newVal) {
      console.log('count changed', newVal)
    },
    msg(newVal) {
      console.log('msg changed', newVal)
    }
  },
  methods: {
     inc() {
      this.count += 1
    },
    dec() {
      if (this.count !== 0) {
        this.count -= 1
      }
    },
    changeMessage() {
      msg = "new Message"
    }
  }

}
</script>

Приведенные выше два фрагмента кода полностью эквивалентны в листинге эффектов.

использоватьComposition APIПреимущество: позволяет нам лучше организовать наш код (state, methods, computed properties, watcherЖдать).

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

Раньше мы использовалиmixinдля повторного использования кода. Однако,mixinСамая большая боль в том, что нам нужно отслеживать состояния и методы в разных компонентах, что часто вносит определенную умственную нагрузку на разработку.mixinМожет перезаписать существующее состояние или методы в компоненте.

использоватьComposition APIУпростите повторное использование кода.

Мы также можем извлечь код повторяющихся функций:

// message.js
import { ref, watch } from "vue";
export function message() {
  let msg = ref(123);
  watch(msg, (newVal) => {
    console.log("msg changed", newVal);
  });
  const changeMessage = () => {
    msg.value = "new Message";
  };
  return { msg, changeMessage };
}

Используйте вышеуказанный компонент в других компонентах:

<template>
  <div class="counter">
    <p>count: {{ count }}</p>
    <p>NewVal (count + 2): {{ countDouble }}</p>
    <button @click="inc">Increment</button>
    <button @click="dec">Decrement</button>
    <p>Message: {{ msg }}</p>
    <button @click="changeMessage()">change message</button>
  </div>
</template>
<script>
import { ref, computed, watch } from 'vue'
import { message } from './common/message'
export default {
  setup() {
    let count = ref(0)
    const countDouble = computed(() => count.value * 2)
    watch(count, newVal => {
      console.log('count changed', newVal)
    })
    const inc = () => {
      count.value += 1
    }
    const dec = () => {
      if (count.value !== 0) {
        count.value -= 1
      }
    }
    let { msg, changeMessage } = message()
    return {
      count,
      msg,
      changeMessage,
      inc,
      dec,
      countDouble
    }
  }
}
</script>

2. Несколько корневых элементов

существуетVue 2, tempalte может принимать только один корневой элемент. Несмотря на то, что у нас всего два тега

, мы должны заключить их в один тег

<template>
  <div class="counter">
    <p> Count: {{ count }} </p>
    <button @click="increment"> Increment </button>
    <button @click="decrement"> Decrement</button>
  </div>
</template>

<template>
  <p> Count: {{ count }} </p>
  <button @click="increment"> Increment </button>
  <button @click="decrement"> Decrement </button>
</template>

<template>
  <Suspense>
    <template #default>
      <div v-for="item in articleList" :key="item.id">
        <article>
          <h2>{{ item.title }}</h2>
          <p>{{ item.body }}</p>
        </article>
      </div>
    </template>
    <template #fallback>
      Articles loading...
    </template>
  </Suspense>
</template>
<script>
import axios from 'axios'
export default {
  async setup() {
    let articleList = await axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        console.log(response)
        return response.data
      })
    return {
      articleList
    }
  }
}
</script>

<template>
  <survey-form v-model:name="name" v-model:age="age">
    {" "}
  </survey-form>
</template>

<template>
    <div>
        <label>Name: </label>
        <input :value="name" @input="updateName($event.target.value)" />
        <label>Age: </label>
        <input :value="age" @input="updateAge($event.target.value)" />
    </div>
</template>
<script>
    export default {
      props: {
        name: String,
        age: Number
      },
      setup(props, { emit }) {
        const updateName = value => {
          emit('update:name', value)
        }
        const updateAge = value => {
          emit('update:age', +value)
        }
        return { updateName, updateAge }
      }
    }
</script>

<template>
  <div class="hello" @click="test">test {{list }} {{ myObj }}</div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [1, 2],
      myObj: { name: "Preetish" }
    };
  },
  watch: {
    list: {
      handler: () => {
        console.log("watcher triggered");
      },
      deep: true
    }
  },
  methods: {
    test() {
      this.list[2] = 4;
      this.myObj.last = "HS";
      delete this.myObj.name;
    }
  }
};
</script>

export default {
  setup() {
    let list = ref([1, 2]);
    let myObj = ref({ name: "Preetish" });
    function myFun() {
      list.value[3] = 3;
      myObj.value.last = "HS";
      delete myObj.value.name;
    }
    return { myFun, list, myObj };
  },
};

<Teleport to="#modal-layer">
  <div class="modal">hello</div>
</Teleport>

<div id="modal-target"></div>

<!-- vue 2.x -->
{{ date | format }}

<!-- vue 3.0 -->
{{ format(date) }}

import Vue from "vue";
import App from "./App";

Vue.use(/* ... */);
Vue.mixin(/* ... */);
Vue.component(/* ... */);
Vue.directive(/* ... */);

new Vue({
  el: "#app",
  template: "<App/>",
  components: {
    App,
  },
});

import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);

app.use(/* ... */);
app.mixin(/* ... */);
app.component(/* ... */);
app.directive(/* ... */);

app.mount("#app");