V3-入门知识点介绍

1.创建App 实例并挂载

（directive相关， plugin相关）

import { createApp } from 'vue'
// App-根组件
import App from './App.vue'
const app = createApp(App)
app.config = {} // 全局属性 方法配置相关
app.component(‘全局组件名’， 定义的组件)
app.directive('自定义指令名'， 指令方法体) // [详细用法有讲](https://juejin.cn/post/7282605849700073512)
app.use(plugins) // 插件的使用 自定义plugin [有讲](https://juejin.cn/post/7282605849700368424)
app.mount('#app') // 挂载实例

2. app.config 相关用法（app.config.globalProperties 相关）

app.config.errorHandler //用来捕获所有子组件上的错误
app.config.warnHandler // 捕获警告， dev 环境有效

// 全局属性 方法挂载，filters globalData 等
app.config.globalProperties // 同vu2 中的 vue.prototype.$xxxx 
// 类似有讲[：](https://juejin.cn/post/7280746697848537151)
// 例如
app.config.globalProperties.xxx = 'xxxx'
app.config.globalProperties.fn = {
    fn1:()=>{}
}
app.config.optionMergeStrategies // 不常用
// 例如;
const app = createApp({ 
    mounted() { 
        console.log(this.$options.hello)
    } 
}) 
app.config.optionMergeStrategies.hello = (parent, child) => { 
    return Hello, ${ child } 
} 
app.mixin({ hello: 'Vue' }) // 'Hello, Vue'

3.模板语法:(基本同vue2,跳过)

4. 响应式数据相关 vue2 与 vue3 响应数据区别

ref全家桶相关

reactive相关

reactive 底层简单实现

toRaw相关

5. computed() 与 watch() , watchEffect()相关用法（已经讲解）

6. v-model 和 v-model:[update:xxxx] 相关用法

7. vue3的生命周期执行

setup(props, context) {} 组件创建之前执行(初始化 data 和 methods 方法)，早于beforeCreate() created()
onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('onMounted')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
// onUpdated | onBeforeUpdated
onUpdated(() => {
  console.log('onUpdated')
})
onActivated(() => {
  console.log('onActivated')
}) // <keep-alive></keep-alive> 中使用

8.异步组件的使用

import { defineAsyncComponent } from 'vue'

const AsyncCompLyon = defineAsyncComponent(() =>
  import('./components/Lyon.vue')
)

<template> <AsyncCompLyon /> </template>

9.# 内置组件 Teleport dom传送门

const num = ref(1)
const box = ref('#box1')
const clickBtn = function() {
  num.value = Math.ceil(Math.random()*3) // 随机1-3号门传送
  box.value = `#box${num.value}`
}

// template 组件
  <div id="box1"></div>
  <div id="box2"></div>
  <div id="box3"></div>
  <!-- 传送到某个dom 节点 -->
  <Teleport :to='box'>
    <div>teleport</div>
  </Teleport>
  <button @click= "clickBtn">传送到{{box}}</button>
  
 //  style 样式
 <style lang="scss" scoped>
#box1 {
  height: 100px;
  border: 1px solid red;
}
#box2 {
  height: 100px;
  border: 1px solid blue;
}
#box3 {
  height: 100px;
  border: 1px solid pink;
}
</style>

# 实验内置组件 Suspense 异步依赖树渲染（跳过）

9. 常用的工具函数

// isProxy 检查一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理
console.log(isProxy(srt)) // true
console.log(isRef(num)) // true
console.log(isReactive(rt)) // true 

10. provide | inject 依赖注入（基本同vue2）

11. mixins 同vue2

12.渲染函数 官网介绍

import {h} from 'vue'
h: () => App