Vue2.0和Vue3.0响应式原理对比以及Vue3.0的项目创建和composition Api的使用

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

1.1.Vue2.0响应式原理

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

   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语法实现响应式数据

   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)

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

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

   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 函数接受一个普通对象，返回该对象的响应式代理

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. 为了获得对模板内元素