Vue3基础（黑马笔记）

vue3源码用TS重写

一、vue3优点

- vue2对于新增和删除，有时候监听不到，vue3对此进行了优化

二、vue2选项式API, vue3组合式 API（将同功能的代码放在一起，将数据和方法组合在一起）

例子：

• 代码量变少
• 分散式维护-》集中式维护，更易封装复用

三、create-vue 创建项目

create-vue是Vue官方新的脚手架工具，底层切换到了 vite (下一代构建工具)为开发提供极速响应

1. 创建项目

2. 项目目录和文件

• vue3 通过```createApp（App）.mount('#app')```  创建实例,mount 设置挂载点id为app的盒子
• 将创建实例进行封装，保证每个实例的独立封闭性

四、setup选项的写法和执行时机

1. 执行时机早于beforecreate

2. set up函数中获取不到this

3. 通过setup语法糖简化代码（减少return）

五、reactive()和ref()函数

声明数据

reactive()

接收一个对象类型的数据，返回一个响应式的对象

ref()

接收一个简单类型或者对象类型的数据，返回一个响应式的对象；

是在原有传入数据的基础上，外层包了一层对象，包成复杂类型之后，再借助reactive实现的响应式；

访问数据，脚本中需要通过.value

template中不需要加.value

二者区别：

六、computed

七、watch

侦听一个或多个数据的变化，数据变化时执行回调函数

两个额外参数：1.immediate（立即执行） 2. deep（深度侦听）

侦听单个数据

格式：

watch(ref 对象，(newValue,oldvalue)=>{})

侦听多个数据

immediate

在侦听器创建时立即触发回调，响应式数据变化之后继续执行回调

deep

默认watch进行浅层监视

const ref1=ref（简单类型） 可以直接监视
const ref1=ref（复杂类型） 监视不到复杂类型内部数据的变化

const info=ref({name:lisi,age:15})


watch(info,()=>{
   console.log() 
},{
    deep:true
})

特殊：

八、vue3的生命周期API（选项式 VS 组合式）

九、组件通信

组合式api下的父传子

基本思想：

1. 父组件给子组件绑定属性
2. 子组件内部通过props选项接收

defineProps原理：就是编译阶段的一个标识，实际编译器解析时，遇到后会进行编译转换

组合式api下的子传父

基本思想：

1. 子组件内部通过emit方法触发事件（编译器宏获取）
2. 父组件中通过@绑定事件监听

  

十、模板引用

通过ref标识获取真实dom对象或者组件实例对象

defineExpose()

默认情况下在<script setup> 语法糖下的组件内部的属性和方法是不开放给父组件访问的 

可以通过defineExpose编译宏指定哪些属性和方法允许访问

十一、provided 和inject

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

传递响应式数据

十二、vue3.3新特性 defineOptions

十三、vue3新特性defineModel

vue3中的v-model和defineModel

原来：

现在：（子可以直接改父）

十四、pinia

pinia是vue最新的状态管理工具，是vuex的替代品

可以创建任意store的仓库，并且每一个store是独立的

pinia基本语法

Pinia 中文文档

声明

使用

不要对counterStore进行解构，否则会丢失数据的响应式

action异步实现

编写方式：异步action函数的写法和组件中获取异步数据的写法完全一致

需求：在pinia中获取频道列表数据并把数据渲染app组件的模板中

storeToRefs写法