Original link: https://blog.kelu.org/tech/2022/05/09/vue3.html

The last one recorded some memos of vue2, and this one recorded the differences between vue3 and 2.

2020.09.18 Released vuejs 3.0.0, codenamed one piece. Official website: https://v3.cn.vuejs.org/

Official instructions for version 3: https://github.com/vuejs/core/releases/tag/v3.0.0

1. Update content

1. performance boost
2. Source code upgrade
   1. tree-shaking
3. Better support for TS
4. new features
   1. composition API

2. Installation

Configure the proxy, memo

 npm init npm config set proxy http://10.101.1.1:8118 npm config set https-proxy http://10.101.1.1:8118 npm i -S vue

1. vue-cli

   Version 4.5.0 and above

    npm install -g @vue/cli # 安装/升级vue create xxx cd xxx npm run serve

2. vite

   Want to replace webpack, a packaging tool created by the vue team.

   HMR

    npm init vite@latest npm init vite-app my-vue-app npm init vite@latest my-vue-app -- --template vue cd my-vue-app npm install npm run dev

3. code structure comparison

   vue2:

   

   vue3:

   

   createApp factory function, the returned app object is lighter than vm

   

3. Getting Started

1. setup method

   

2. reactive, ref, watch

   The data and methods in the component must be configured in the setup (no need to plug in props, data, and func).

   Create standalone reactive values ​​as refs .

   watch can only monitor the basic type of ref, to monitor the object use reactive. watchEffect is also good, but it feels like it will affect performance?

   ref is similar to get and set in vue2 to achieve responsiveness.

   Reactive is a proxy instance object newly added in vue3 to achieve responsiveness, which is implemented with toRefs.

    <template> <div> <span>8</span> <button @click="count ++">Increment count</button> <button @click="nested.count.value ++">Nested Increment count</button> </div> </template> <script> import { ref } from 'vue' export default { setup() { const count = ref(0) return { count, nested: { count } } } } </script> 

   

   When a ref is accessed or changed as a property of a reactive object, to make it behave like a normal property, it automatically unwraps the inner value.

   The responsiveness of both properties using destructuring is lost. For this case, we need to convert our reactive object to a set of refs. These refs will keep the reactive association with the source object.

    import { reactive, toRefs } from 'vue' const book = reactive({ author: 'Vue Team', year: '2020', title: 'Vue 3 Guide', description: 'You are reading this book right now ;)', price: 'free' }) let { author, title } = toRefs(book) title.value = 'Vue 3 Detailed Guide' // 我们需要使用.value 作为标题，现在是ref console.log(book.title) // 'Vue 3 Detailed Guide' 

   

   

3. compute

   In vue3, it can be used according to the compute of vue2. But we are now in the setup.

   Read-only computed, accepts a getter function, and returns an immutable reactive ref object based on the return value of the getter.

    const count = ref ( 1 ) const plusOne = computed (() => count . value + 1 ) console . log ( plusOne . value ) // 2

   read and write computed

    const count = ref ( 1 ) const plusOne = computed ({ get : () => count . value + 1 , set : val => { count . value = val - 1 } }) plusOne . value = 1 console . log ( count . value ) // 0

4. life cycle

   Lifecycle hooks can be registered by directly importing onX function:

    import { onMounted , onUpdated , onUnmounted } from ' vue ' const MyComponent = { setup () { onMounted (() => { console . log ( ' mounted! ' ) }) onUpdated (() => { console . log ( ' updated! ' ) }) onUnmounted (() => { console . log ( ' unmounted! ' ) }) } }

5. custom hook

   Generally placed in the hook folder, it feels very good, this way of reference.

   

   

   

   

6. Other composition APIs

   • readonly
   • shallowReadonly
   • toRaw
   • markRaw
   • customRef , pay attention to anti-shake~
   • Provide and inject , grandchildren component communication. A parent component can act as a dependency provider for all its child components, no matter how deep the component hierarchy is. This feature has two parts: the parent component has a provide option to provide data, and the child component has an inject option to start using that data.
   • isRef, isReacrive, isReadonly, isProxy

7. Advantages of composition APIs

   As far as I personally feel, it is more like a class on the back end, where variables and methods are defined in the setup, and it is comfortable to change.

   Take off when used with hook .

8. fragment

9. Teleport

   It is used for UI positioning, comfortable and comfortable, and directly transmits the content to any element.

10. suspense

This article is reprinted from: https://blog.kelu.org/tech/2022/05/09/vue3.html
This site is for inclusion only, and the copyright belongs to the original author.