vue3的认识

1.基本介绍

1.1目前已支持 vue3 的UI组件库

• ant-design-vue
  Ant Design Vue
  ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步
  目前支持 Vue 3.0 的 2.0.0 测试版 已发布
• element-plus
  Element Plus - The world's most popular Vue 3 UI framework
  Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库
• vant
  Vant - Mobile UI Components built on Vue
  轻量、可靠的移动端 Vue 组件库
  Vant 是有赞前端团队开源的移动端组件库，于 2016 年开源，已持续维护 4 年时间
  目前 Vant 已完成了对 Vue 3.0 的适配工作，并发布了 Vant 3.0 版本
• VueUse
  VueUse
  基于composition组合api的常用集合，小兔仙项目会部分使用

1.2vue3的新变化

1. 性能提升

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

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

1.3破坏性语法更新

vue3.0对于2.0版本的大部分语法都是可以兼容的，但是也有一些破坏性的语法更新，这个大家要格外注意

1. 实例方法$on移除   （eventBus现有实现模式不再支持 可以使用三方插件替代）
2. 过滤器filter移除 （插值表达式里不能再使用过滤器 可以使用methods替代）
3. .sync语法移除  （和v-model语法合并）

更多阅读：介绍 | Vue.js

2.setup入口函数

1.是一个新的组件选项,作为组件中组合式API的入口

2.不能使用this, this指向的是undefined

3.在组件初始化的时候只会执行一次

4.在beforeCreate生命周期钩子执行之前执行

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

3.组合式API

3.1 reactive函数

使用步骤:

1.从vue框架中导出

2.在setup函数中调用reactive函数并传入一个对象

3.在setup函数中reactive函数调用完成后的返回值是以对象的形式返回的

<template>
  <div>{{ state.name }}</div>
  <div>{{ state.age }}</div>
  <button @click="state.name = 'pink'">改值</button>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup () {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      state
    }
  }
}
</script>

3.2 ref函数

使用步骤:

1.从vue框架中导出

2.在setup函数中调用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>

总结:

1.ref 函数可以接收一个简单类型的值，返回一个可改变的 ref 响应式对象，从而弥补reactive函数不支持简单类型的问题

2.reactive和ref函数都可以提供响应式数据的转换

3.比较推荐一种写法：只有我们明确知道要转换的对象内部的字段名称我们才使用reactive，否则就使用ref

3.3 toRefs函数

使用场景:

经过reactive函数处理之后返回的对象,如果给这个对象解构或者展开,在模板中使用,会让数据失去响应式的能力,所以需要用使用toRefs函数,可以保证展开的每一个属性都是响应式的

toRefs包裹处理

<template>
  <div>{{ name }}</div>
  <div>{{ age }}</div>
  <button @click="name = 'pink'">改值</button>
</template>

<script>
import { reactive,toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'cp',
      age: 18
    })
    return {
      ...toRefs(state)
    }
  }
}
</script>

3.4 computed计算属性

作用:已有的数据经过一定的计算得到全新的数据

使用步骤

1. 从vue框架中导入computed 函数
2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
3. 把computed函数调用完的执行结果放到setup的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])
    // 输入大于3的数字
    const filterList = computed(() => {
      return list.value.filter(item => item > 3)
    })
    // 修改list的函数
    function changeList() {
      list.value.push(6, 7, 8)
    }
    return {
      list,
      filterList,
      changeList
    }
  }
}
</script>

3.5watch侦听器

作用: 基于响应式数据发生变化时的回调,与vue2中的watch功能一样

1. 普通监听  监听的数据发生变化执行回调

2. 立即执行  在watch初始化的时候立刻执行一次回调函数

3. 深度监听  想对一个对象进行深度监听 deep

使用步骤

1. 从vue框架中导入watch函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
3. watch函数接收三个常规参数

1. 1. 第一个参数为函数，返回你要监听变化的响应式数据
   2. 第二个参数为响应式数据变化之后要执行的回调函数
   3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听

语法形式:

watch(
    () => {return 想要监听的数据},
  () => { 每次数据变化要执行的回调函数},
  {
    deep:true  //深度侦听
    immediate: true  //立即执行
  }
)

注意:

绝大多数情况下,最好是直接精确到要侦听谁,尽量不使用深度侦听, 这样性能会高一些

4.生命周期函数

使用步骤:

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>

选项式API	组合式API
beforeCreate	不需要（直接写到setup函数中）
created	不需要（直接写到setup函数中）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted

5.组件通信

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

实现步骤

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

父组件

子组件

6.provide 和 inject

使用场景:

跨组件通信,顶层组件提供数据,所有的底层组件都可以使用

1. 顶层组件 通过provide 提供数据
2. 底层组件 通过inject 获取数据

顶部组件

中间的父组件

孙组件

7.模板中 ref 的使用

在模板中使用ref，我们都很清楚，它一般有三种使用场景

1. ref + 普通dom标签  获取真实dom对象
2. ref + 组件标签  获取组件实例对象
3. ref + v-for 获取由dom对象（实例对象）组成的数组  （不经常使用）

使用步骤:

1. setup函数中调用  const domRef = ref(null)
2. 在模板区域 在你想要获取的标签或者组件身上 放置一个ref="domRef"
3. 通过domRef.value就可以拿到一个真实的dom元素对象或者是组件实例对象