原文链接： https://blog.kelu.org/tech/2022/05/09/vue3.html

上一篇记录了vue2的一些备忘，这一篇记录vue3和2的不同的地方。

2020.09.18发布vuejs 3.0.0，代号 one piece。官网：https://v3.cn.vuejs.org/

官方针对版本3的说明:https://github.com/vuejs/core/releases/tag/v3.0.0

一、更新内容

1. 性能提升
2. 源码升级
   1. tree-shaking
3. 更好支持TS
4. 新特性
   1. composition API

二、安装

配置下代理，备忘

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

   4.5.0版本以上

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

2. vite

   想代替 webpack，由vue团队打造的打包工具。

   HMR

   npm init [email protected] 
   npm init vite-app my-vue-app 
   npm init [email protected] my-vue-app -- --template vue 
       
   cd my-vue-app 
   npm install  
   npm run dev 
   

3. 代码结构对比

   Vue2:

   

   vue3:

   

   createApp 工厂函数，返回的app对象比vm更轻

   

三、入门

1. setup方法

   

2. reactive、ref、watch

   组件中的数据、方法都要配置到setup中(不需要往props和data、func里塞了)。

   创建独立的响应式值作为 refs。

   watch只能监听ref的基本类型，要监听对象就用reactive。watchEffect也不错，但是感觉会影响性能？

   ref类似vue2中get和set来实现响应式。

   reactive是vue3中新增的proxy实例对象来实现响应式，搭配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> 
   

   

   当 ref 作为响应式对象的 property 被访问或更改时，为使其行为类似于普通 property，它会自动解包内部值.

   使用解构的两个 property 的响应性都会丢失。对于这种情况，我们需要将我们的响应式对象转换为一组 ref。这些 ref 将保留与源对象的响应式关联。

   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

   vue3里可以按照vue2的compute使用。不过我们现在搞到setup里了。

   只读computed，接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。

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

   读写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. 生命周期

   可以通过直接导入 onX 函数来注册生命周期钩子：

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

5. 自定义hook

   一般放在hook文件夹里，感觉很不错啊，这种引用方式。

   

   

   

   

6. 其它composition api

   • readonly
   • shallowReadonly
   • toRaw
   • markRaw
   • customRef,注意防抖～
   • provide和inject，祖孙组件通信。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。
   • isRef,isReacrive,isReadonly,isProxy

7. composition api的优势

   就我个人感觉，更像后端的一个class，定义变量和方法都在setup里，改起来舒服。

   配合hook使用就起飞?️。

8. fragment

9. Teleport

   用来UI定位的，舒服舒服，直接把内容传送到任意一个元素去。

10. suspense

本文转自： https://blog.kelu.org/tech/2022/05/09/vue3.html
本站仅做收录，版权归原作者所有。