vue3知识点

尤大说的：

www.bilibili.com/video/BV1ke…

vue3 重点

1. 重写 virtual dom 。（可以脱离模板进行相对复杂的渲染逻辑表达
2. 重写服务器渲染，快2~3倍。
3. Tree-shaking（一个简单的 hello world 打包只有13.5kb）
4. 更好的TS支持。
5. 自定义渲染API （Custom Renderer API）

VueConf分享

www.bilibili.com/video/BV1zV…

Vite

开发vite遇到的问题

组合式API

www.bilibili.com/video/BV1x5…

对象式API存在的问题：

• 不利于复用
• 潜在命名冲突
• 上下文丢失
• 有限的类型支持
• 按API类型组织

组合式API提供的能力

• 极易复用（原生JS函数）
• 可灵活组合（生命周期钩子可多次使用）
• 提供更好的上下文支持
• 更好的TS类型支持
• 按功能/逻辑组织
• 可独立于VUE组件使用

不同于React，Vue的setup()只会在组件建立时执行一次，并建立数据与逻辑之间的连结。

• 建立 输入 -> 输出的连结
• 输出会自动根据输入的改变而改变

模式和技巧 -- VueUse 类似 React hooks

• 同时兼容 Vue2 和 Vue3
• Tree-shakeable ESM
• TS
• CDN兼容
• 核心包含110+组合式函数
• 丰富的生态系统8+扩展包

Ref 和 Reactive

1. 两个优先使用哪个？Ref

• Ref需要.value显示调用，不加.value赋值会报错。
• Reactive 在使用 ES6 解构会使响应式丢失；需要使用箭头函数包装才能使用watch。

2. Ref 自动解包（减少使用.value）

• watch 直接接受Ref作为监听对象，并在回调函数中返回解包后的值

const counter = ref(0)
watch(counter, count =>{
    console.log(count) // same as 'counter.value'
})

• Ref 在模板中自动解包

<template>
    <button @click="counter +=1 ">
        {{ counter }}
    </button>
</template>

• 使用Reactive解包嵌套的Ref

const foo = ref('bar')
const data = reactive({foo,id:10})
data.foo    // 'bar'

3. unref - Ref的反操作

• 如果传入一个Ref，返回其值
• 否则原样返回

4. 接受Ref作为函数参数

function add(a: Ref<number> | number,b: Ref<number> | number){
    return computed(() => unref(a) + unref(b))
}
const a = ref(1)
const c = add(a, 5)
c.value // 6

MaybeRef 类型工具

重复使用已有Ref

如果将一个ref传递给ref()构造函数，它将会原样将其返回。

const foo = ref(1)    
const bar = ref(foo)
foo === bar  // true

将 异步操作转换为“同步”

状态共享

vue3中可以使用reactive声明变量 替代vuex不兼容SSR。 兼容SSR需要使用provide和inject来共享应用层面的状态

// shared.js
export const state = reactive({
    foo: 1,
    bar: 'Hello'
})

// A.vue
import { state } from './shared.js'
state.foo += 1

// B.vue
import { state } from './shared.js'
console.log(state.foo) // 2