Vue3基础知识

1.vue3社区生态：
ant-design-vue：https://antdv.com/docs/vue/introduce-cn/，蚂蚁金服，ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步
element-plus：https://element-plus.gitee.io/#/zh-CN，Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
vant：https://vant-contrib.gitee.io/vant/v3/#/zh-CN，有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间
Naive UI：https://www.naiveui.com/zh-CN/，一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript。
VueUse：https://vueuse.org/，基于composition组合api的常用集合

2.选项式Api和组合式Api

对比：

image.png

选项式Api版本实现：

组合式API版本实现：

组合式API优化

3.组合式api具体说明：
setup 入口：
a. setup 函数是一个新的组件选项，作为组件中组合式API 的起点（入口）
b. setup函数只会在组件初始化的时候执行一次
c. setup函数在beforeCreate生命周期钩子执行之前执行，实例还没生成，没有this

reactive：
reactive是一个函数，接收一个普通的对象传入，把对象数据转化为响应式对象并返回

import { reactive } from 'vue'

const state = reactive({
      name: 'cp',
      age: 18
    })

ref:
ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

import { ref } from 'vue'
let money = ref(100)

reative 对比 ref:
a. ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题
b. reactive和ref函数都可以提供响应式数据的转换，具体什么时候需要使用哪个API社区还没有最佳实践，暂时可以使用自己熟练的API进行转换
c. **推荐写法 **只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就一律使用ref，从而降低在语法选择上的心智负担

watch:
对响应数据进行监听，可定义是否立即执行一次和是否深度监听，包含三个参数，第一个参数是function，返回值为要监听的数据，注意，要写return！第二个参数也是function，监听到第一个参数返回值变化后，要做什么操作；第三个参数是对象，包含：{
immediate: true，deep: true}，immediate（是否立即执行一次），deep（是否深度监听）

import { reactive, toRefs, watch } from 'vue'
setup() {
    const state = reactive({
      name: 'cp',
      info: {
        age: 18
      }
    })
    watch(() => {
      return state
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    }, {
      deep: true
    })
    return {
      state
    }
  }

toRefs:
toRefs 用于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref。
常用于es6的解构赋值操作，因为在对一个响应式对象直接解构时解构后的数据将不再有响应式，而使用toRefs可以方便解决这一问题

image.png

生命周期函数：

image.png

代码演示：

import { onMounted } from 'vue'
export default {
  setup() {
    // 时机成熟 回调函数自动执行
    onMounted(() => {
      console.log('mounted生命周期执行了')
    })
    onMounted(() => {
      console.log('mounted生命周期函数又执行了')
    })
  }
}

父子通信

1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

provide 和 inject:
通常我们使用props进行父子之间的数据传递，但是如果组件嵌套层级较深，一层一层往下传递将会变的非常繁琐，有没有一种手段可以把这个过程简化一下呢，有的，就是我们马上要学习的provide 和 inject，它们配合起来可以方便的完成从上层组件向任意下层组件传递数据的效果

TemplateRef：

1. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 =>

3. 把hRefreturn出去
4. 使用 => hRef.value

语法兼容问题:

1. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）
2. .sync语法移除 (dialog) （和v-model语法合并）
3. eventBus emit