上一篇记录了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 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. 代码结构对比

   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

四、原理精进

1. vue3如何做到交互性？

   参考vue2的内容，原理是一样的，只不过换了一个方法实现——ES6的Proxy Reflect对象。

   它们的区别仅在于：

   • Proxy返回的是bool值，defineProperty返回的是原始对象。
   • ES6语法更严格。

   通过ES6的 new Proxy()，可以创建一个代理用来代替另一个对象，实现基本操作的拦截和自定义。这个代理与目标对象表面上可以被当作同一个对象来看待。