# vue3基础

**Repository Path**: syriansoldier/vue3base

## Basic Information

- **Project Name**: vue3基础
- **Description**: vue3基础语法的总结与实例代码


- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-04
- **Last Updated**: 2022-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 一: setUp函数

1. setUp优势
   - setUp组织代码的方式称为composionAPI
   - composionAPI比optionsAPI易于维护
2. setUp函数
   - 执行时机在beforeCreate之上
3. setUp中的this
   - 没有this
4. setUp中的返回值
   - 必须返回一个对象
   - 对象中的属性可以直接在模板中使用(消费)

# 二: 响应式数据

1. reactive
   - reactive只能定义响应式的 复杂数据类型, 定义响应式基本数据类型不生效
2. ref
   - 在setUp函数中需要通过 .value获取, 在模板中直接使用/消费
   - 既可以定义复杂数据类型,也可以定义基本数据类型
3. 使用reactive or ref ?
   - vue@3.2.0 版本后(^vue@3.2.0), ref比reactive效率高的多



# 三: script-setup 

1. 什么是script-setup
   - `<script setup></script>`
2. script-setup的特点
   - script-setup标签内, 在全局作用域下, 所有变量/函数, 均可在模板中直接消费, 不用return对象
   - script-setup标签内的函数作用域内的变量, 不能在模板中直接消费



# 四: 计算属性-computed

语法

1. 引入computed
   - `import {computed} from 'vue'`


1. 函数式conputed
   - `const 计算属性名 = computed(计算函数)`
   - 计算函数返回值, 作为计算属性的值
2. 对象式conputed
   - ` const 计算属性名 = computed(计算属性配置项)`
   - 计算属性配置项
     - 计算属性配置项可配置set/get函数
     - set函数接受一个参数, value, value是修改计算属性时的修改值

# 五: 监视属性 - watch

语法

1. 基本语法

   - watch(监视的数据, 数据变化后的处理函数, 配置项)

2. 监视ref定义的数据的特别之处

   - 监视的是ref数据的value属性 `watch(ref(0).value,()=>{})`

   - 监视ref定义的复杂数据类型的两种写法

     - 监视ref对象本身, 并开启deep:true

       ```js
       const person = ref({
         name:'zhangsan',
         age:18
       })

       watch(person,()=>{},{deep:true}) //不同处
       ```

       ​

     - 监视ref对象的value  

       ```js
       const person = ref({
         name:'zhangsan',
         age:18
       })

       watch(person.value,()=>{})//不同处
       ```

3. 监视响应式对象的某个属性值

   - ```js
     const person = ref({
       name:'张三',
       age:18
     })
     // 只监视name的变化,age变化不会触发处理函数

     watch(()=>person.value.age,()=>{})

     ```

   - ​



# 六: 生命周期钩子

vue3生命周期钩子与vue2的变换

1. 取消beforeCreate和created 替换为setUp函数
2. update系列和mount系列前加on
   - beforeUpdate --> OnBeforeUpdate
   - 其他的以此类推
3. detroyed 更名为 unMount. 并在前加on
   - beforeDetroyed ---> onBeforeUnMounted 

# 七: 组件传值

## 父传子

1. 定义子组件

2. 在父组件引入子组件

   - 不需要使用components注册便可直接在模板中消费

3. 在父组件内, 通过v-bind给子组件绑定数据

4. 子组件通过defineProps接受

   - defineProps不需要引入

   - ```js
     // defineProps 返回一个props对象
     const props = defineProps({
       msg: {
         type: String,
         required: true
       }
     })

     // 在模板中直接使用, 在setup函数中需要props. 使用
     console.log(props.msg)
     ```

   - ​

## 子传父

1. 在父子组件同时约定暗号(自定义事件)
   - 父组件通过 @事件名约定暗号
   - 子组件通过 defineEmits([事件名])约定暗号
2. defineEmits返回emit函数, 通过emit函数触发自定义事件
   - `emit(事件名, 参数)`

# 八: 依赖注入 provide/inject

1. provide和inject是什么
   - 当前组件提供方法/函数, 其子孙组件都可以获取/消费
2. provide/inject语法
   - provide(数据名, 数据)
   - conat 数据 = inject(数据名)

# 九: ref 绑定dom与组件

1. 绑定ref
   1. 在setup中定义ref容器 `const anyRef = ref(null)`
   2. 在模板中绑定ref  <标签 ref="anyRef"></标签>
2. ref获取组件实例的方法/属性
   1. 在父组件内完成绑定ref
   2. 在子组件内通过 defineExpost({}) 暴露数据
   3. 在父组件内通过 ref.数据/方法 消费

# 十: toRefs

1. toRefs是干什么的
   - 解决本来响应式数据, 结构赋值后数据不响应的问题
2. 怎么用
   - const { 解构属性 } = refs(复杂数据类型响应式对象)