1、Vue3的生态与优势

   1-1、Vue3的社区生态：

  •  社区生态 - 逐步完善
  • 整体优化 - 性能优化/TS支持优化/组合式API加持
  • 市场使用 - 部分技术选型激进的公司已经在生产环境使用了vue3

社区生态

组件（插件）名称

官方地址

简介

ant-design-vue

Ant Design Vue

ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步

element-plus

A Vue 3 UI Framework | Element Plus

Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库

vant

Vant - Mobile UI Components built on Vue

有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间

Naive UI

https://www.naiveui.com/zh-CN/

一个 Vue 3 组件库比较完整，主题可调，使用 TypeScript，不算太慢，有点意思

VueUse

VueUse

基于composition组合api的常用集合，小兔仙项目会部分使用

 1-2、Vue3的整体优化

1. 性能提升

  •   首次渲染更快
  • diff算法更快
  •  内存占用更少
  •  打包体积更小 

2. 更好的Typescript支持
3. Composition API （重点）

Vue3 中文文档 Vue3

2、组合式API

2-1、setup入口函数

setup 函数在beforeCreate生命周期钩子执行之前执行，实例还没生成，没有this

代码演示：

export default {
  setup () {
    console.log('setup执行了')
    console.log(this)
  },
  beforeCreate() {
    console.log('beforeCreate执行了')
    console.log(this)
  }
}

2-2、响应式API - ref

作用：ref是一个函数，接受一个简单类型或者复杂类型的传入并返回一个响应式且可变的 ref 对象

简单来说，给ref传入一个初始数据，返回给你一个响应式数据。vue2中在data中定义数据，vue3使用ref来定义数据

使用步骤：

  1. 从vue中导入ref的包
  2. 在steup调用ref并传入初始数据
  3. 在setup函数中把ref函数调用完毕的返回值以对象的形式返回出去
  4. 在setup函数中使用ref需要加上.value进行访问，模板中不需要加.value

代码演示

<template>
  <div>{{ money }}</div>
  <button @click="changeMondy">改值</button>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let money = ref(100)
    console.log(money.value)
    return {
      money
    }
  }
}
</script>

 2-3、响应式API - computed

    使用步骤：

  1. 从vueu框架中导入computed
  2. 在setup函数中执行computed函数，并传入一个函数，在函数中计算公式
  3. 接受computed的返回值，并return出去

代码演示：

<template>
  {{ list }}
  {{ filterList }}
  <button @click="changeList">change list</button>
</template>

<script>
import { computed, ref } from 'vue'
export default {
  setup() {
    const list = ref([1, 2, 3, 4, 5, 6])
    // 输入大于2的数字
    const filterList = computed(() => {
      return list.value.filter(item => item > 2)
    })
    // 修改list的函数
    function changeList() {
      list.value.push(6, 7, 8)
    }
    return {
      list,
      filterList,
      changeList
    }
  }
}
</script>

2-4、响应式API - watch

作用：基于响应式的数据执行回调，没有返回值，和vue2中的watch基本一致.他又三个参数（前两个为函数，最后一个为配置对象）

使用步骤：

  1. 从vue中导入watch
  2. 在setup函数中执行watch函数开启对响应数据的监听
  3. 使用watc可传入三个参数
  1. 第一个参数为函数，return的结果就是你需要监听的数据项
  2. 第二个参数为响应式的数据变化之后执行回调函数
  3. 第三个参数为参数对象，可以设置立即侦听，深度监听

代码演示

普通监听

<template>
  {{ age }}
  <button @click="age++">change age</button>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const age = ref(18)
    watch(() => {
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    })
    return {
      age
    }
  }
}
</script>

深度监听并开启立即执行和深度监听

<template>
  {{ age }}
  <button @click="age++">change age</button>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  setup() {
    const age = ref(18)
    watch(() => {
      // 返回你想要监听的响应式属性(ref产生的对象必须加.value)
      return age.value
    }, () => {
      // 数据变化之后的回调函数
      console.log('age发生了变化')
    },{ 
immediate: true,
deep:true})
    return {
      age
    }
  }
}
</script>

3、生命周期函数

要想了解vue3中的生命周期首先得回顾下vue的生命周期流程，下面我放置了一张vue官网的生命周期流程图

应用 & 组件实例 | Vue.js

3-1、 在 setup 函数中使用生命周期钩子函数

 使用步骤：

代码演示：

  1. 先从vue中导入以on打头的生命周期钩子函数
  2. 在setup函数中调用生命周期函数并传入回调函数
  3. 生命周期钩子函数可以调用多次

代码演示：

<template>
  <div>生命周期函数</div>
</template>

<script>
import { onMounted } from 'vue'
export default {
  setup() {
    // 时机成熟 回调函数自动执行
    onMounted(() => {
      console.log('mouted生命周期执行了')
    })
    onMounted(() => {
      console.log('mouted生命周期函数又执行了')
    })
  }
}
</script>

3-2、vue3对应vue2的生命周期钩子函数：

选项式API下的生命周期函数使用

组合式API下的生命周期函数使用

beforeCreate

不需要（直接写到setup函数中）

created

不需要（直接写到setup函数中）

beforeMount

onBeforeMount

mounted

onMounted

beforeUpdate

onBeforeUpdate

updated

onUpdated

beforeDestroyed

onBeforeUnmount

destroyed

onUnmounted

3-3、生命周期钩子函数使用场景

生命周期钩子函数

应用场景

created

发送ajax请求 / 挂载共用属性

mounted

发送ajax请求 / 依赖于dom的业务，比如地图，图表

destroyed

销毁操作，比如定时器

4、组件通信

在vue3的组合式API中，父传子的基础套路完全一样，基础思想依旧为：父传子是通过prop进行传入，子传父通过调用自定义事件完成

子传父实现步骤：

  1. setup函数提供俩个参数，第一个参数为props，第二个参数为一个对象context
  2. props为一个对象，内部包含了父组件传递过来的所有prop数据，context对象包含了attrs，slots， emit属性，其中的emit可以触发自定义事件的执行从而完成子传父

父组件

<template>
    //传入自定义属性
  <son :msg="msg" @get-msg="getMsg"></son>
</template>

<script>
import { ref } from 'vue'
import Son from './components/son'
export default {
  components: {
    Son
  },
  setup() {
    const msg = ref('this is msg')
    function getMsg(msg) {
      console.log(msg)
    }
    return {
      msg,
      getMsg
    }
  }
}
</script>

子组件：
 

<template>
  <div>
    {{msg}}
    <button @click="setMsgFromSon">set</button>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String
    }
  },
  对context进行结构， 拿到emit方法
  setup(props,{emit}) {
    function setMsgFromSon(){
      emit('get-msg','这是一条来自子组件的新的msg信息')
    }
    return {
      setMsgToSon
    }
  }
}
</script>

5、TemplateRef获取dom元素

  1. 使用ref函数传入null创建 ref对象 => const hRef = ref(null)
  2. 模板中通过定义ref属性等于1中创建的ref对象名称建立关联 => <h1 ref="hRef"></h1>
  3. 把hRefreturn出去
  4. 使用 => hRef.value

代码演示：

<template>
  <h1 ref="h1Ref">我是普通dom标签</h1>
  <ref-component ref="comRef"></ref-component>
</template>

<script>
import { onMounted, ref } from 'vue'
import RefComponent from '@/components/RefComponent'
export default {
  components: {
    RefComponent
  },
  setup() {
    const h1Ref = ref(null)
    const comRef = ref(null)
    onMounted(() => {
      console.log(h1Ref.value)
      console.log(comRef.value)
    })
    // 必须return
    return {
      h1Ref,
      comRef
    }
  }
}
</script>

6.vue3中废弃的语法

1.实例方法$on移除

2.过滤器filter移除

3..sync语法移除