# vue3-vite-todomvc

**Repository Path**: baiyeyue/vue3-vite-todomvc

## Basic Information

- **Project Name**: vue3-vite-todomvc
- **Description**: 使用vue3.0 + composition Api + vite实现经典案例todomvc，学习vue3.0 composition Api
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-02-18
- **Last Updated**: 2021-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-vite-todomvc
## 介绍
使用vue3.0 + composition Api + vite实现经典案例todomvc，学习vue3.0 composition Api
## 安装依赖
```
yarn
```
## 启动服务
```
yarn dev
```


# 1.Vue2.0和Vue3.0响应式原理对比



## 1.1.Vue2.0响应式原理

1. Vue2.0中使用ES5中的Object.defineProperty方法实现响应式数据

   ```js
   const data = {
         name: 'hy',
         age: 18
       }
       for(let i in data){
         let temp = data[i]
         Object.defineProperty(data, i, {
           get(){
             console.log(`我劫持了${i}的获取`)
             return temp
           },
           set(val){
             console.log(`我劫持了${i}的设置，值${val}`)
             temp = val
           }
         })
       }
   ```

   

2. 缺点

   * 无法检测到对象属性的动态添加和删除
   * 无法检测到数组的下标和length属性的变更     $set  $delete

3. 解决方案

   * Vue2.0提供Vue.set方法用户动态给对象添加属性
   * Vue2.0提供Vue.delete方法用户动态删除对象的属性
   * 重写vue中数组的方法，用于检测数组的变更

## 1.2.Vue3.0响应式原理

1. Vue3.0中使用ES6中的proxy语法实现响应式数据

   ```js
   const data = {
         name: 'hy',
         age: 18
       }
       //能够检测到对象动态新增的属性一及删除的属性
       //proxy
       const proxyData = new Proxy(data,{
         get(target, name){
           console.log(`检测到${name}的获取`)
           return target[name]
         },
         set(target, name, value){
           console.log(`检测到${name}的设置，值为${value}`)
           target[name] = value
         },
         deleteProperty(target, key){
           consle.log(`检测到删除${key}`)
           return delete target[key]
         }
       })
   ```

   

2. 优点

   * 可以检测到代理对象属性的动态添加和删除
   * 可以检测到数组的下标和length属性的变更

3. 缺点

   * ES6的proxy语法对于低版本浏览器不支持，IE11
   * Vue3.0会针对IE11出一个特殊的版本用于支持IE11

# 2.创建Vue3.0项目

## 2.1.使用vue-cli创建vue3.0项目

1. 安装vue-cli到最新版本(必须高于4.5.0)

   ```js
   yarn global add @vue.cli
   #如果已经安装了vue-cli
   yarn global upgrade @vue/cli
   ```

2. 如果创建的是vue2项目，可以直接升级

   ```js
   yarn add vue-next
   ```

3. 可以直接创建vue3项目

   vue create vue3-project

   选择vue3.0

## 2.2.使用vite创建vue3.0项目

1. Vite 是一个由原生ESM驱动的Web开发构建工具，在开发环境下基于浏览器原生ES imports开发，在生产环境下基于Rollup打包

2. Vite目前仅支持vue3.x，不兼容vue2.x项目

3. Vite基本使用

   ```
   npm init vite-app <项目名>
   ```

   

# 3.Composition API的使用

## 3.1.composition API vs options API

1. Options API选项 api
   * Options API的优点是容易学习和使用，代码有明确的书写位置
   * Options API的缺点就是相似逻辑不容易复用，在大项目中尤为明显
   * Options API可以通过mixins提取相同的逻辑，但是容易发生命名冲突且来源不清晰
2. Compositon API 组合API
   * Composition API是根据逻辑功能来组织代码的，一个功能所有的api放到一起
   * 即便项目很大，功能很多，都能够快速的定位到该功能所有的API
   * Composition API提高了代码的可读性和可维护性
3. Vue3.0中推荐使用composition API，也保留了option API

## 3.2. setup

1. Setup函数是一个新的组件选项，作为组件中composition API的起点
2. 从生命周期钩子的角度来看，setup会在beforeCreate钩子函数之前执行
3. Setup中不能使用this，this指向undefined

## 3.3.reactive

reactive 函数接受一个普通对象，返回该对象的响应式代理

```js
import { reactive } from 'vue'
export default {
  setup(){
    //1.setup需要返回值，setup中返回的值才能在模板中使用
    //2.reactive中传入一个普通对象，返回一个代理对象
    const car = reactive({
      brand: '宝马',
      price: 100
    })
    //模板中访问的数据需要在setup中返回
    return {
      car
    }
  }
}
```

## 3.5 ref

1. ref函数接受一个简单类型的值，返回一个可以改变的ref对象。返回的对象有唯一的属性value
2. 在setup函数中，通过ref对象的value属性可以访问到值
3. 在模板中，ref属性会自动解套，不需要额外的.value
4. 如果ref接受的是一个对象，会自动调用reactive

## 3.5.toRefs

1. 把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref
2. Reactive的响应式功能是赋予给对象的，但是如果给对象解构或者展开的时候，会让数据丢失响应式的能力
3. 使用toRefs可以保证该对象展开的每一个属性都是响应式的

## 3.6.readOnly

1. 传入一个对象（响应式或普通）或ref，返回一个原始对象的只读代理
2. 一个制度的代理是“深层的”，对象内部任何嵌套的属性也都是只读的
3. 可以防止对象被修改

## 3.7.computed

1. Computed函数用于创建一个计算属性
2. 如果传入的是一个getter函数，会返回一个不允许修改的计算属性
3. 如果传入的是一个带有getter和setter函数的对象，会返回一个允许修改的的计算属性

## 3.8.watch

1. Watch函数接受3个参数
   * 参数1：数据源，可以是ref或者getter函数
   * 参数2：回调函数
   * 参数3：额外选项，immediate和deep
2. Watch可以监听一个ref或者一个带有返回值的getter函数
3. Watch可以监听单个数据源，也可以监听多个数据源
4. Watch函数会有返回值，用于停止监听

## 3.9.生命周期钩子函数

1. Vue3提供的生命周期钩子注册函数只能在setup()期间同步使用
2. Vue3生命周期钩子函数与Vue2对比
   * ~~beforeCreate~~ -> 使用 setup()
   * ~~created~~ -> 使用 setup()
   * beforeUpdate -> onBeforeMount
   * mounted -> onMounted
   * beforeUpdate -> onBeforeUpdate
   * updated -> onUpdated
   * beforeDestory -> onBeforeUnmount
   * destroyed -> onUnmounted
   * errorCaptured -> onErrorCaptured

## 3.10.依赖注入

1. Vue3中提供了provide和inject提供依赖注入，用以实现组件之间的通讯。类似月vue2中的provide和inject
2. Vue3提供的provide和inject可以用于跨多级组件进行通讯

##  3.11.模板refs

1. 为了获得对模板内元素