Vue3和Vue2相比到底做了那些更新.....

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

一、使用vue-cli 创建

使用webpack vue-cli 进行创建项目

vue -V 必须高于 4.5.0以上
npm install -g @vue/cli 安装或者升级 cli
vue create 项目名称
npm run server 启动

使用最新的 vite 进行创建项目

vite的优势：

开发环境种，无需打包，可以快速冷启动
轻量级快速热重载
按需编译，不用等待整个应用编译完成

使用vite创建步骤：

npm i -g create-vite-app 全局安装
npm init vite-app 项目名称
npm install 依赖
npm run dev 启动

二、常用Composition API

Composition-->组合式API

官方文档地址：v3.cn.vuejs.org/

1、setup函数

setup “表演者舞台”

理解：Vue3.0中的一个新配置，值为一个函数。

组件中的所有用到的：数据、方法等等，都要在setup里面配置。

setup函数的两种返回值：

若是返回对象，则对象中的属性、方法，在模板中可以直接使用。（重点）
复制代码

若是返回一个渲染函数：则可以自定义渲染内容。
复制代码

注意点：

1、尽量不要与vue2.0配置混用

Vue2.x配置（data、methos、computehd..）中可以访问到setup属性、方法，！！！但是在setup中不能访问到Vue2.x里面的配置data、methos、computehd..）

2、如果有重名，setup优先

3、setup不能是一个async函数，因为返回值不再是return的对象，而是 promise，模板看不到return对象中的属性值。（后期也可以返回一个Promise实列，但是想要Suspense和异步组件得配合）

2 、Ref函数（基本数据使用）
作用：ref 作为3.0的响应式核心
语法： const xxx = ref{initValue}
- 创建一个包含响应式数据的引用对象（reference对象）（简称：ref对象）
- JS中操做数据：xxx.value
- 模板中读取数据：不需要.value 直接{{name}}
备注：
- 接收的数据可以是：基本类型、也可以是对象类型
- 基本类型的数据：响应式依然是Object.defieProperty()的get和set完成的
- 对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数（根源是Proxy）
- 他把ES6的Proxy封装到了 reactive函数里面继续使用。
3、reactive函数（对象类型使用）（常用）
作用：定义一个对象类型的响应式数据类型（基本数据类型不要用它，要用ref函数）
语法：const 代理对象，reactive(源对象)，接收一个对象（或者数组），返回一个代理对象（Proxy的实列对象）
reactive定义的响应式数据是：“深层次的”
内部基于ES6的Proxy实现的，通过代理对象操作源对象内部数据进行操作。

4、Vue3.0中的响应式原理

vue2.0的响应式：

实现原理：
- 对象类型：用过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
- 数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹）
- ```
Object.defineProperty(data, 'count',{
    get() {},
    set() {}
})
复制代码
```
存在的问题：
- 新增属性、删除属性、界面不会更新。
- 直接通过下标修改数组，界面不会自动更新。

vue3.0的响应式：

实现原理：
- 通过Prxoy（代理）：拦截对象中任意属性得变化，包括：属性值得读写、属性得添加、属性得删除等
- 通过Refiect（反射）：对被代理对象得属性进行操作。
- MDN看详解（Proxy Reflect）

5、reactive和red的对比

从定义的数据角度对比：

ref用来定义：基本类型数据
reactive用来定义：对象(或数组)类型数据font>
备注：ref也可以用来定义对象（或数组）类型数据，它内部会自动通过reactive转为代理对象

从原理的角度对比：

ref通过Object.definProperty()的get和set来实现响应式（数据劫持）
reactive则是通过使用Proxy来实现数据劫持的，并通过Reflect操作源对象内部的数据。

从使用角度对比：

ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value
reactive定义的数据：操作数据与读取数据：均不需要.value

6、setup的两个注意点

setup执行的时机：
- 在beforeCreate之前执行一次，this是undefined
setup的参数：
- props：值为对象，包含：组件外部传递过来，但是没有在props配置中声明的属性，相当于this.$attrs
- context:上下文对象
  - attrs：值为对象，包含：组件外部传递过来，但是没有在props配置中声明的属性，相当于this.$attrs
  - slots:收到的插槽内容，相当与this.$slots.
  - emit：分发自定义事件的函数，相当于this.$emit

7、计算属性与监视

1、computed函数

与Vue2.x中的computed配置功能一致
写法：

import {reactive, computed} from 'vue'

 setup() {
    let person = reactive({
      firstName: '徐',
      lastName: '名字',
    })

    //计算属性  3.0写法一  (没有考虑计算属性被修改的情况) 只读情况
    /*  person.funllNmae = computed(() => {
      return person.firstName + person.lastName
    })*/

    //完整写法   3.0写法二   考虑了读和写
    person.funllNmae = computed({
      get(){
        return person.firstName +'-'+ person.lastName
      },
      set(value){
       const  nameArr = value.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

    return {
      person
    }
  }
复制代码

2、watch函数

与Vue2.x中watch配置功能一样
两个小 ” 坑 “：
- 监视reactive定义的响应式数据时：oldValue（更新之前）无法正确获取、前置开启了深度监听（deep配置失效）
- 监视reactive定义的响应式数据中的某一个属时：deep配置有效

  // watch  3.0  可以传递三个参数  (第一个是数据源  第二个是监听的结果  第三个是配置(深度监听、立即监听))

    //情况一：监视ref所定义的一个响应式数据
    /* watch(sum, (newValue, oldValue) => {
       console.log('sum值变化了', newValue, oldValue)
     }, {immediate: true})*/

    //deep: true 目前不知道 还有没有问题

    //情况二：监视ref所定义的多个个响应式数据
    /*  watch([sum, msg], (newValue, oldValue) => {
        console.log('sum或msg变化了', newValue, oldValue)
      })*/

    //情况三：监视reactive所定义的一个响应式数据.  (最长用得)
    /*问题一 ：此处无法正确获取oldValue（修改之前的值无法正确获取）
    解决方式： 就是把 reactive里面的对象 单独拿出去 给ref，然后你再操作，可以避免这个情况。
             ref 监测到你是对象时,还是会调用reactive,所有单独在源数据哪里无法去避免这个小问题
    问题二 ：强制开启了深度监听(并且无法关掉)*/
    /*  watch(person, (newValue, oldValue) => {
        console.log('person值变化了', newValue, oldValue)
      })*/

    //情况四:监视reactive所定义的一个响应式数据中的某一个属性
    /* watch(()=>person.age, (newValue, oldValue) => {
       console.log('person值变化了', newValue, oldValue)
     })*/

    //情况五:监视reactive所定义的一个响应式数据中的多个属性
    /*watch([()=>person.age,()=>person.name], (newValue, oldValue) => {
      console.log('person值变化了', newValue, oldValue)
    })*/


    //特殊情况  深度监视对象里面套对象的值 需要开启deep
    /*  watch([()=>person.obj,()=>person.name], (newValue, oldValue) => {
        console.log('person值变化了', newValue, oldValue)
      },{deep:true})  //此处监听的是reactive定义对象中的某一个属性 所以得配置 deep*/


    //监听ref 的对象
    //如果想监听ref下的对象值， 因为red会监测是不是基本数据类型，如果是对象的话，则去调用 reactive 会在value里面生产proxy函数
    //所以当你想监听的时候，需要写 personRef.value
    //或者开启深度监听 deep：true
    // RefImpl --->    value ---> obj  + name  等属性
    //一个注意点 如果在 ref的基本类型值，写了.value  watch(msg.value, () => {}  他则会监听的是 值的本身，所以这样并并可行

    watch(personRef.value, (qian, hou) => {
      console.log('person值变化了', qian, hou)
    })

复制代码

3、watchEffect函数

watch的套路：既要指明监视属性，也要指明监视的回调。
watchEffect的套路是：不用指明监视的那个属性，监视的回调函数中用到哪个属性，那就监视那个属性
watchEffect有点想computed： (重点,面试可以聊)
- 但computed的计算出来的值（回调函数的返回值），所以必须要写返回值
- 而watchEffect更注重的过程（回调函数的函数体），所以不用写返回值

8、生命周期

vue3.0中可以继续使用vue2.x中的生命周期函数,但有两个被更名 (销毁的生命周期变成取消挂载)

beforeDestroy ====> beforeUnmount ( 卸载 )
destroyed =======> unmounted
vue3.0也提供了组合式api ( 使用是需要引入 ) ,与vue2.x对应关系如下
beforeCreate ====> setup ( 创建 )
Created ====> setup
beforeMount ===> onbeforeMount ( 绑定 )
mounted =======>onmounted
beforeUpdate ===>onbeforeUpdate ( 修改 )
updated ========>onupdated
beforeUnmount ====> onbeforeUnmount ( 卸载 )
unmounted =======> onunmounted

9、自定义hook函数（重点）

什么是hook？本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.0中的mixin。
自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂

10、toRef （重点）

作用：创建一个ref对象，其中value值指向另一个对象中的某一个属性
语法：const name = toRef(person, 'name')
应用：要将响应式对象中的某一个属性单独提供给外部使用时
扩展：toRefs与toRef功能一致，但是可以批量创建多个ref对象，语法：toRefs（person）

下一篇，我们继续来更新其他的API和新写法！喜欢的话点个赞吧~