# vue3-learn

**Repository Path**: zhangkj001/vue3-learn

## Basic Information

- **Project Name**: vue3-learn
- **Description**: vue3-learn
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-18
- **Last Updated**: 2022-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue 介绍

## 作者：尤雨溪（尤大大）

据说这个人是搞艺术的。果然天才就是天才

## Vue 有什么优点

1、高性能、可组件化的MVVM库 （页面Dom-监控ViewModel+数据Model）

2、响应式、组件化。可以想象一个淘宝网站，有非常多的页面相似，布局类同的地方，如果不是组件化，岂不是要累死人

3、vue是单页面应用。 使页面局部刷新，不用每次跳转页面都要请求所有数据和dom要理解怎么区分于多页面

## Vue核心-数据劫持

### 什么是数据劫持

对属性的读取和修改拦截

### 为什么要数据劫持

简单来说就是数据的任何变化都要能监测到，这样才能根据数据变化做对应操作。实现响应式

### vue2数据劫持 Object.defineProperty(obj,prop,descriptor)

#### 参数

* **obj:指的是目标对象。**
* **key:需要定义的属性或方法名称。**
* **descriptor:目标属性所拥有的特性。**
* **descriptor有以下的属性**
  * **value：属性的值。**
  * **writable：如果为false，属性的值就不能被重写。**
  * **get：一旦目标属性被访问就会调用此方法，并将该方法的运算结果返回给用户。**
  * **set：一旦目标属性被赋值，就会调用这个方法。**
  * **configurable：可否被修改，如果为false。writable、configurable、enumerable 就不能被修改。**
  * **enumerable：可否被枚举，就是在循环或者keys的时候不可以被遍历到。**

#### Object.defineProperty(obj,prop,descriptor) 实现一个新增属性

```
let obj = {
        "name":"yf",
        "sex":"女"
}
console.log(obj)
let result = Object.defineProperty(obj,'age',{
        value:18
})
console.log(obj)
```

打开浏览器F12，在console输入上面代码，可以看出效果

![1645189575399.png](image/README/1645189575399.png)

### vue3数据劫持 new Proxy(target, handler)

#### 参数

* `target` ：需要使用 `Proxy`包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
* `handler`: 一个对象，其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。

一个劫持例子

```
let test = {
    name: "杨帆"
  };
  test = new Proxy(test, {
    get(target, key) {
      console.log('谁要请我吃饭？');
      return target[key];
    }
  });
  console.log(test.name);

```

打开F12 看效果

![1645190051066.png](image/README/1645190051066.png)

可以看到，在获取test.name 属性之前，被get劫持，输出了“谁要请我吃饭?"

# 开发环境

## 安装node

移步 [http://nodejs.cn/](http://nodejs.cn/) 最新版本即可

## npm 包管理器(Package Manager)

npm是随着node一起安装的

## 安装yarn

```
npm install yarn -g
```

安装yarn是个人使用感觉yarn体验更好，当然npm也可以，具体区别可以选择

> [一文看懂npm、yarn、pnpm之间的区别](https://zhuanlan.zhihu.com/p/37653878)

## 检查环境

![1645187509869.png](image/README/1645187509869.png)

出现相应版本号就可以搭建一个简单的vue3项目了

# 搭建第一个 Vite 项目[#](https://www.vitejs.net/guide/#scaffolding-your-first-vite-project)

兼容性注意

Vite 需要 [Node.js](https://nodejs.org/en/) 版本 >= 12.0.0。

使用 NPM:

```
$ npm init vite@latest
```

使用 Yarn:

```
$ yarn create vite
```

使用 PNPM:

```
$ pnpm create vite
```

## 目录结构

```
|-node_modules      -- 项目依赖包的目录
|-public            -- 项目公用文件
  |--favicon.ico    -- 网站地址栏前面的小图标
|-src               -- 源文件目录，程序员主要工作的地方
  |-assets          -- 静态文件目录，图片图标，比如网站logo
  |-components      -- Vue3.x的自定义组件目录
  |--App.vue        -- 项目的根组件，单页应用都需要的
  |--index.css      -- 一般项目的通用CSS样式写在这里，main.js引入
  |--main.js        -- 项目入口文件，SPA单页应用都需要入口文件
|--.gitignore       -- git的管理配置文件，设置那些目录或文件不管理
|-- index.html      -- 项目的默认首页，Vue的组件需要挂载到这个文件上
|-- package-lock.json --项目包的锁定文件，用于防止包版本不一样导致的错误
|-- package.json    -- 项目配置文件，包管理、项目名称、版本和命令

```

## 命令行界面

打开package.json

在安装了 Vite 的项目中，可以在 npm scripts 中使用 `vite` 可执行文件，或者直接使用 `npx vite` 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts：

```
{
  "scripts": {
    "dev": "vite", // 启动开发服务器
    "build": "vite build", // 为生产环境构建产物
    "serve": "vite preview" // 本地预览生产构建产物
  },
 "dependencies": {  // 生产环境中运行需要的安装包
    "vue": "^3.2.25"
  },
  "devDependencies": { //开发环境中需要安装的依赖包
    "@vitejs/plugin-vue": "^2.2.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}
```

可以指定额外的命令行选项，如 `--port` 或 `--https`。运行 `npx vite --help` 获得完整的命令行选项列表。

## 安装相关依赖

```
yarn

```

项目下会有node_modules

## 运行项目

```
yarn dev

```

# 示例demo，移步入口文件src/main