来自拉勾

名词解释

SFC：single file component

RFCs： request for comments

搭建

• vite(推荐)
• vue-cli4

yarn create vite-app vue3-demo
yarn create v1.22.4
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "create-vite-app@1.20.0" with binaries:
      - create-vite-app
      - cva
Scaffolding project in /Users/zc/workspace/vue3-demo...
Done. Now run:
  cd vue3-demo
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)
✨  Done in 15.54s.

挂载

⚠️ 与vue2有区别

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

vue2.6的挂在方式

import Vue from 'vue'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

vue2.5

new Vue({
  // eslint-disable-line
  render: (h) => h(App)
}).$mount('#app');

组件

ui组件库 element-plus

复合组件

reactive and isReactive

<template>
    <div>
        {{ count }} 
    </div>
</template>
<script>
import { reactive } from 'vue';
export default {
    name: 'Composition',
    setup () {
        const state = reactive({count: 1});
        console.log(isReactive(state)) // true
        console.log(isReactive({ count: 1})) // false
        return state;
    }
}
</script>

readonly and isReadonly

import { reactive, isReactive, readonly, isReadonly } from 'vue';
export default {
    name: 'Composition',
    setup () {
        const state = reactive({count: 1});
        let copy = readonly(state);
        console.log(isReactive(copy)) // true
        console.log(isReadonly(copy)) // true
        console.log(isReadonly(state)) // false
        console.log(isReadonly({count: 1})) // false
        return state;
    }
}

isProxy

import { reactive, isReactive, readonly, isReadonly, isProxy } from 'vue';
export default {
    name: 'Composition',
    setup () {
        const state = reactive({count: 1});
        let copy = readonly(state);
        console.log(isProxy(state)) // true
        console.log(isProxy(copy)) // true
        console.log(isProxy({count: 1})) // false
        return state;
    }
}

源码

export function isProxy(value: unknown): boolean {
  return isReactive(value) || isReadonly(value)
}

声明周期

beforeDestory、destoryed
钩子函数名称替换为beforeUnmount、unmounted

参考：

中文文档

vue-router for vue3

vuex for vue3

https://v3.vuejs.org/guide/typescript-support.html#official-declaration-in-npm-packages

TODO：

【课程】Vue 3响应式原理 (Vue 3 Reactivity) - Vue Mastery

参考：
vue-3-reactivity https://www.bilibili.com/video/BV1SZ4y1x7a9?p=1

Vue 3 Deep Dive with Evan You https://www.bilibili.com/video/BV1rC4y187Vw

https://www.bilibili.com/video/BV1jz411z769?from=search&seid=7130680114124910206

https://composition-api.vuejs.org/zh/api.html#%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9F-api