# vue3Study

**Repository Path**: china__zzm/vue3-study

## Basic Information

- **Project Name**: vue3Study
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-08
- **Last Updated**: 2025-02-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# git 常用命令

```
    git add . //将代码提交到暂存区
    git commit -m "具体注释" //将代码提交到本地仓库
    git status //查看状态
    git push origin 分支名字 //将本地代码推送的远程仓库
    git pull origin 分支名字 //将远程仓库的代码拉取到本地
    git checkout 分支名字 //切换分支
    git branch 分支名字 //创建分支
    git merge 分支名字 //合并分支
    git log 查看提交历史
    git clone 克隆一个远程仓库到本地。

```

# vue3 基础

## vue2 和 vue3 区别

### 响应式原理不一样 v2 Object.defineProperty v3 Proxy

=======

### 响应式原理不一样 v2 object.defineProperty v3 Proxy

### v3 setup 替代了创建前后的生命周期

### v3 去掉了 this.$children

## Object.defineProperty Proxy 使用方法 和区别

### 一个是 绑定的是对象当中的属性 一个是 绑定的整个对象【需要写例子 自己测试一下】

<!-- Object.defineProperty -->

```
 const user = {
  _name: 'Kimi'
};

Object.defineProperty(user, 'name', {
  get: function() {
    return this._name;
  },
  set: function(value) {
    this._name = value;
  },
  enumerable: true,
  configurable: true
});

console.log(user.name); // 输出: Kimi
user.name = 'Moonshot AI';
console.log(user.name); // 输出: Moonshot AI

<!-- proxy -->
<!-- const handler = {
  deleteProperty(target, prop) {
    if (prop === 'name') {
      throw new Error('Cannot delete name property');
    }
    return Reflect.deleteProperty(target, prop);
  }
};

const proxy = new Proxy(target, handler);

delete proxy.age; // 成功删除 age 属性
console.log(proxy); // 输出: { name: 'Kimi' }
delete proxy.name; // 抛出错误: Cannot delete name property -->
```

## ref 和 reactive 的区别

<!--
1 reactive 定义基本数据类型不具备响应式
2 reactive 只能定义 复杂数据类型才具备响应式
3 ref 定义的变量 必须使用.value进行获取和设置 值
4 ref 还可以找对象 DOM
-->

## 事件循环机制

 <!-- Event Loop -->

## 微任务都包含哪些内容

<!-- Promise任务中的(.then .catch .finally .all .race ...) async await -->

## 宏任务都包含哪些内容

<!-- dom 渲染，请求队列，定时器相关 -->

## 父子组件传值 defineProps 和 defineExpose provide inject 样式穿透 v-bind="$attrs"

## 每个生命周期执行时机（前四个）

<!-- 创建前 beforeCreate 后 created 挂载前 beforeMounted 挂在后 Mounted -->

## 深浅拷贝

=======

### Object.defineProperty Proxy 使用方法 和区别

````
一个是 绑定的是对象当中的属性 一个是 绑定的整个对象【需要写例子 自己测试一下】
```

```

Object.defineProperty 方法可以用于定义对象的属性，并为该属性添加 getter 和 setter,从而实现对属性的响应式监测
let data = {
name: 'Vue'
};

Object.defineProperty(data, 'name', {
get() {
console.log('获取属性');
return name;
},
set(newValue) {
console.log('设置属性', newValue);
name = newValue;
}
});
Proxy 是 ES6 引入的特性，可以直接建立整个对象的代理，从而拦截对象的操作
let data = {
name: 'Vue'
};

let proxy = new Proxy(data, {
get(target, prop) {
console.log(`获取属性: ${prop}`);
return target[prop];
},
set(target, prop, value) {
console.log(`设置属性: ${prop}, 新值: ${value}`);
target[prop] = value;
return true;
}
});

proxy.name; // 获取属性: name
proxy.name = 'Vue3'; // 设置属性: name, 新值: Vue3

````

### ref 和 reactive 的区别

```
1 reactive 定义基本数据类型不具备响应式
2 reactive 只能定义 复杂数据类型才具备响应式
3 ref 定义的变量 必须使用.value 进行获取和设置值
4 ref 还可以找对象 DOM

```

## 事件循环机制

### 微任务都包含哪些内容

```

1. 微任务（.then .catch .finally .all .race ... async await）

```

### 宏任务都包含哪些内容

```

1.  宏任务 (dom 渲染，请求队列，定时器相关)

```

### 父子组件传值 defineProps 和 defineExpose provide inject 样式穿透 v-bind="$attrs"

### 每个生命周期执行时机（前四个）

```
创建前 beforeCreate 即将转变options
创键后 created 将options对象准备完成
挂载前 beforeMount 即将实例化vue
挂载后 mounted 实例化vue完成 render函数 返回

```

### 深浅拷贝

```
深拷贝 复制了 栈内存的内容
浅拷贝 复制了 栈内存的内容
//  定义一个变量的时候  变量名 指针 值
//  基本数据类型        栈内存
 复杂数据类型      变量名和指针存栈内存 值存在堆内存
```

```


深拷贝：有指针和值（长）
浅拷贝：只有有值（短）

```

## 子父传值 defineEmits defineModel parent 子组件调用父组件的方法

## 插槽 匿名 和具名 作用域（没讲）

## 组件的 v-model defaultmodel

## 封装 button 组件 input

```

```