体验Vue3

vue-cli

1
2
3
4
5
npm install -g @vue/cli
vue create cue3-cli
cd cue3-cli
vue add vue-next
npm run serve

webpack

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

vite

拦截 import 发送 http 请求加载文件，进行预编译

1
2
3
4
5
npm install -g create-vite-app
create-vite-app vue3-vite
cd vue3-vite
npm install
npm run dev

Composition api

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
26
27
28
29
30
31
<template>
  <h1>{{state.count}} * 2={{double}}</h1>
  <h2>{{num}}</h2>
  <button @click="add">累加</button>
</template>
<script>
import {reactive,computed,ref,onMounted} from 'vue'


export default {
  setup(){
    const state = reactive({
      count:1
    })
    const num = ref(2)

    function add(){
      state.count++
      num.value+=10
    }
    const double = computed(()=>state.count*2)

    onMounted(()=>{
      console.log('mouted')
    })
    

    return {state,add,double,num}
  }
}
</script>

setup

composition 入口，函数在 beforecreate 前调用，函数返回值作为模板渲染上下文

reactive

等同于 Vue.observerable 产生响应式数据

computed

计算属性

全局 import

vue2 data、methods、computed 挂载在 this 上的缺点：
1、不利于类型推导
2、没办法做到按需加载，没有使用的功能代码也会被打包

ref

将基本数据包装成响应式，模板中直接使用，JS 中使用 .value

新组件

Fragment

vue 组件不需要一个根节点

好处：
1、少了很多无意义节点
2、组件递归可以实现平级递归

Teleport

等同于 React[Protal]，可以渲染 vue 组件内容到指定 dom 节点

Suspense

异步组件

1
2
3
4
5
6
7
8
<Suspense>
  <template #default>
    异步的组件
  </template>
  <template #fallback>
    加载状态的组件
  </template>
</Suspense>

稳定 RFC

  • v-slot：合并slot、slot-scope，# 缩写
  • directive：动态调用
  • 全局 import
  • v-model:title 取代 v-bind.sync，支持多个 v-model
  • 函数式组件必须写成函数
1
2
3
4
5
import { h } from 'vue'

const FunctionalComp = props => {
  return h('div', `Hello ${props.name}`)
}
  • 全局 api 不在挂在到 Vue，现在挂在 app 实例
  • 自定义 directive api 重新设计
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const mDirective = {
  bing(el, binding, vnode, prevVnode){},
  inserted(){},
  update(){},
  componentUpdated(){},
  unbind(){}
}

更新为：

{
  beforeMount(el, binding, vnode, prevVnode){},
  mounted(){},
  beforeUpdate(){},
  updated(){},
  beforeUnmount(){},
  unmounted(){}
}
  • 删除 filter，method、计算属性取代
  • 删除内联模板
  • Events 支持变化

删除 $on、$once、$off，$emit 促发 emit配置

  • defineAsyncComponent 创建异步组件

vue2\3对比

vue3 内置 @vue/server-renderer （服务器渲染解析） @vue-compiler-ssr (解析 template 为 render 函数)

在 setup 中不可以调用 getCurrentInstance().ctx 来获取组件内部数据，因为在 prod 环境会被干掉

Vue 3.0 新特性

  • 易维护，基于 TS 更好的数据类型推到
  • 更快，基于 Proxy 数据代理，更好的虚拟 DOM 和 SSR 渲染
  • 更小，Tree-Shaking、时间切片
  • 更好的规划，CompositionApi
  • Better DX，组件改进

参考地址