vue3入门

# 1-vue3 新特性

vue3 与 2 的最大的区别有俩个 响应式系统和组合式 api

# 响应式系统

Vue 2 的响应式机制是基于 Object.defineProperty () 这个 API 实现的，此外，Vue 还使用了 Proxy，这两者看起来都像是对数据的读写进行拦截，但是 defineProperty 是拦截具体某个属性，Proxy 才是真正的 “代理”。

怎么理解这两者的区别呢？我们首先看 defineProperty 这个 API，defineProperty 的使用，要明确地写在代码里，下面是示例代码：

Object.defineProperty(obj, 'title', {
  get() {},
  set() {},
})

1
2
3
4

  当项目里“读取 obj.title”和“修改 obj.title”的时候被 defineProperty 拦截，但 defineProperty 对不存在的属性无法拦截，所以 Vue 2 中所有数据必须要在 data 里声明。而且，如果 title 是一个数组的时候，对数组的操作，并不会改变 obj.title 的指向，虽然我们可以通过拦截.push 等操作实现部分功能，但是对数组的长度的修改等操作还是无法实现拦截，所以还需要额外的 $set 等 API。而 Proxy 这个 API 就是真正的代理了，我们先看它的用法

new Proxy(obj, {
  get() { },
  set() { },
})

1
2
3
4

  需要注意的是，虽然 Proxy 拦截 obj 这个数据，但 obj 具体是什么属性，Proxy 则不关心，统一都拦截了。而且 Proxy 还可以监听更多的数据格式，比如 Set、Map，这是 Vue 2 做不到的。当然，Proxy 存在一些兼容性问题，这也是为什么 Vue 3 不兼容 IE11 以下的浏览器的原因，还好现在 IE 用的人不多了。

  **proxy用法详细**：[https://es6.ruanyifeng.com/#docs/proxy](https://es6.ruanyifeng.com/#docs/proxy)

  ### Composition API 组合语法

  Composition API 是 Vue 3 中的一个新特性，我们也叫它组合 API。

  先举个 Vue 2 中的简单例子，一个累加器，并且还有一个计算属性显示累加器乘以 2 的结果。

<div id="app">

  <h1 @click="add">{{count}} * 2 = {{double}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
let App = {
  data(){
    return {
      count:1
    }
  },
  methods:{
    add(){
      this.count++
    }
  },
  computed:{
    double(){
      return this.count*2
    }
  }
}
Vue.createApp(App).mount('#app')
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

  在 Vue 3 中，除了上面这种这个写法，我们还可以采用下方的写法，新增一个 setup 配置

<div id="app">
  <h1 @click="add">{{state.count}} * 2 = {{double}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {reactive,computed} = Vue
let App = {
  setup(){
    const state = reactive({
      count:1
    })
    function add(){
      state.count++
    }
    const double = computed(()=>state.count*2)
    return {state,add,double}
  }
}
Vue.createApp(App).mount('#app')
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

  #### 使用 Composition API 后，代码看起来很烦琐，没有 Vue 2 中 Options API 的写法简单好懂，但 Options API 的写法也有几个很严重的问题

  1. 由于所有数据都挂载在 this 之上，因而 Options API 的写法对 TypeScript 的类型推导很不友好，并且这样也不好做 Tree-shaking 清理代码。
  2. 新增功能基本都得修改 data、method 等配置，并且代码上 300 行之后，会经常上下反复横跳，开发很痛苦。
  3. 代码不好复用，Vue 2 的组件很难抽离通用逻辑，只能使用 mixin，还会带来命名冲突的问题。

  #### 我们使用 Composition API 后，虽然看起来烦琐了一些，但是带来了诸多好处：

  1. 所有 API 都是 import 引入的。用到的功能都 import 进来，对 Tree-shaking 很友好，没用到功能，打包的时候会被清理掉 ，减小包的大小。
  2. 不再上下反复横跳，我们可以把一个功能模块的 methods、data 都放在一起书写，维护更轻松。
  3. 代码方便复用，可以把一个功能所有的 methods、data 封装在一个独立的函数里，复用代码非常容易。
  4. Composotion API 新增的 return 等语句，在实际项目中使用 <script setup> 特性可以清除。

  **Composition API 对我们开发 Vue 项目起到了巨大的帮助**。下面这个示例图很好地说明了问题：每一个功能模块的代码颜色一样，左边是 Options API，一个功能的代码零散的分布在 data，methods 等配置内，维护起来很麻烦，而右边的 Compositon API 就不一样了，每个功能模块都在一起维护。


  ### 新组件

  Vue 3 还内置了 Fragment、Teleport

   和 Suspense 三个新组件

  1. ragment: Vue 3 组件不再要求有一个唯一的根节点，清除了很多无用的占位 div。 
  2. Teleport: 允许组件渲染在别的元素内，主要开发弹窗组件的时候特别有用。
  3. [https://www.jianshu.com/p/30dd9ba787c8](https://www.jianshu.com/p/30dd9ba787c8)
  4. Suspense: 异步组件，更方便开发有异步请求的组件。

  详细可查看文档：[https://v3.cn.vuejs.org/api/built-in-components.html#teleport](https://v3.cn.vuejs.org/api/built-in-components.html#teleport)

  ### 新一代工程化工具 Vite

  [https://vitejs.cn/guide/](https://vitejs.cn/guide/)

  ### 自定义渲染器

  ### 全部模块使用 TypeScript 重构

  类型系统带来了更方便的提示，并且让我们的代码能够更健壮

let name:string = '我是个靓仔'
name = 1 // 报错
interface Person {
    name: string;
    age: number;
}
let me:Person = {
  name:'靓仔圣',
  age:18
}

me.age = '整条街' // 报错

1
2
3
4
5
6
7
8
9
10
11
12

  **简而言之，Vue 3 带给我们的就是更快、更强且更易于扩展的开发体验，我们也可以用下面这个图来做个总结**

文档摘自极客时间：http://gk.link/a/111Td (opens new window) 玩转 vue3 全家桶

编辑

#Vue3

上次更新: 5/25/2022, 6:17:07 AM

← 移动端适配 TypeScript入门→

vue3入门

# 1-vue3 新特性

# 响应式系统