Vue3学习

create-vue脚手架创建项目

创建命令： npm create vue@latest
项目目录和关键文件

vs-code安装 vue3插件

组合式API- setup选项

1、执行时机，比beforeCreate还要早
2、setup函数中，获取不到this (this是undefined)
3、数据 和 函数，需要在 setup 最后 return，才能模板中应用

是不是觉得每次都要return太麻烦，有没有简单写法？当然有

组合式API- reactive和ref函数

reactive->对象类型

ref: 接收简单类型 或 复杂类型，返回一个响应式的对象
1、脚本中访问数据，需要通过 .value
2、在template中，.value不需要加 (帮我们扒了一层)

组合式API- computed

组合式API- watch

侦听单个数据

侦听单多个数据

组合式API- 生命周期函数

组合式API- 父子通信

父组件传个静态值给子组件

动态传值

组合式API–子传父

组合式API- 模版引用

概念：通过 ref 标识获取真实的dom对象或者组件实例对象
比如下面获取dom对象：

再比如获取组件里面数据或方法，先在子组件进行defineExpose暴露，不然父组件是拿不到的

接下来就可以在父组件中获取了

组合式API- provide和inject

作用和场景：顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
跨层传递普通数据
1.顶层组件通过provide函数提供数据
2.底层组件通过inject函数获取数据

顶层组件向底层组件传值

顶层组件，通过 provider向底层组件传值

App.vue引入了中间层，中间层引入了底层，可以直接在底层组件通过 inject 获取App.vue组件传过来的值

顶层组件向底层组件传方法

比如说底层组件要更新count的值，那么必须底层来触发，顶层来更新(因为count是在顶层定义的嘛)

Vue3.3新特性-defineOptions

Vue3.3新特性-defineModel

Pinia 快速入门

视频地址：https://www.bilibili.com/video/BV1HV4y1a7n4?p=154&spm_id_from=pageDriver&vd_source=c3fc4867486b99c0b85501121f575279