学会vue3,仅需这一篇

V3-组合式API

setup/reactive/ref/computed/watch/生命周期/父子通信/模板引用/provide和inject数据传输

vue3的优势**

组合式 API (Composition API) 是一系列 API 的集合，使我们可以使用函数而不是声明选项的方式书写 Vue 组件。

使用create-vue搭建Vue3项目

认识create-vue

create-vue是一个脚手架工具，用来快速创建v3的项目。（Vuecli用来创建v2的项目）

https://cli.vuejs.org/zh/guide/

create-vue是Vue官方新的脚手架工具，底层切换到了 vite （下一代前端工具链），为开发提供极速响应

使用create-vue创建项目

前置条件 - 已安装16.0或更高版本的Node.js

执行如下命令，这一指令将会安装并执行 create-vue

npm init vue@latest

效果

V3的项目目录和关键文件

package.json

vue的版本是3 + 依赖vite做底层驱动

vite.config.js

配置文件。类似vue2的vue.config.js。

业务文件夹src/main.js

new Vue() 创建vue的实例对象

createApp也是用来创建vue的实例对象

createApp(App).mount(‘#app’)

mount(‘#app’) 把vue的实例对象挂载在index.html的#app元素上

App.vue

1. script -> template -> style

2. script 上的setup是一个特殊的开关：

3. 1. 打开之后，就可以使用组合式api
   2. 不打开它，就可以继续兼容v2的写法

template中可以不需要唯一的根元素的区别

组合式API - setup选项

1. setup选项的写法和执行时机

格式

类似于生命周期钩子的写法。

<script>
  export default {
    setup(){
      console.log('setup')
    },
    beforeCreate(){
      console.log('beforeCreate')
    }
  }
</script>

执行时机

在beforeCreate钩子之前执行setup函数

2. setup中写代码的特点

在setup函数中写的数据和方法需要在末尾以对象的方式return，才能给模版使用

<script>
  export default {
    setup(){
      const message = 'this is message'
      const logMessage = ()=>{
        console.log(message)
      }
      // 必须return才可以
      return {
        message,
        logMessage
      }
    }
  }
</script>

注意：vue3不再推荐使用this.data去定义和修改数据，在setup中，console.log(this)会得到undefined。

问题：

如果要定义很多的数据，在模板中使用，那是不是要：1. 定义很多个数据。2. 写一个长长return？不需要，在v3中，它提供了setup语法糖

3. script setup 语法糖

script标签添加 setup标记，不需要再写return语句，默认会添加return语句

更改代码如下：

<script setup>
  const message = 'this is message'
  const logMessage = ()=>{
    console.log(message)
  }
</script>

拓展-语法糖

play.vuejs.org

组合式API - reactive和ref函数

1. reactive

作用

接收对象类型数据的参数传入并返回一个响应式的对象

步骤

1. 从vue包中导入reactive函数
2. 在

示例代码 (点击按钮，让数值+1的效果)

<script setup>
 import { reactive } from 'vue'  // 导入
 
 const state = reactive({       // 执行函数 传入参数 变量接收
   count:0
 })
 const add = ()=>{
   state.count++ // 修改数据更新视图
 }
</script>

<template>
  <button @click="add">{{state.count}}</button>
</template>

注意：

1. 普通对象不是响应式的，可以正常访问，但是，不具备响应式的特点：修改数据之后，视图不会更新
2. reactive必须要传入一个类型为对象的数据，不支持基本数据类型。 vue提供了更加适用的ref函数。

2. ref

作用

接收简单类型或对象类型数据的参数传入并返回一个响应式的对象

步骤

1. 从vue包中导入ref函数

2. 在

示例代码

<script setup>
 import { ref } from 'vue' // 导入
 const setCount = ()=>{  // 执行函数 传入参数 变量接收
   console.log(count)
   // 修改数据更新视图必须加上.value
   count.value++
 }
</script>
<template>
  <button @click="setCount">{{count}}</button>
</template>

3. reactive 对比 ref

1. 相同点：都是用来生成响应式数据

2. 不同点

3. 1. reactive不能处理简单类型的数据
   2. ref参数类型支持更好，但是必须通过.value做访问修改
   3. ref函数内部的实现依赖于reactive函数

https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js

function ref -> createRef -> new RefImpl -> constructor -> toReactive -> reactive

1. 在实际工作中的推荐 ：推荐使用ref函数，减少记忆负担

组合式API - computed(计算)

计算属性基本思想和Vue2保持一致，组合式API下的计算属性只是修改了API写法

实现步骤

1. 导入computed函数
2. 执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

格式

<script setup>
// 导入
import { computed } from 'vue'

// 执行函数 变量接收 在回调参数中return计算值
const computedState = computed(() => {
  return 基于响应式数据做计算之后的值
})
</script>

<script setup>
//引入
import { computed, ref } from "vue";

//定义一个响应式数据
const arr = ref([1,2,3,4,5,6,7,8])
const add10 = ()=>{
  arr.value.push(10)
}

const newArr = computed(()=>{
  return arr.value.filter(item=>item>2)
})
</script>

<template>
<div>
  原数据:{{arr}}
  <button @click="add10">加入10</button>
</div>
<div>
  新数据:{{newArr}}
</div>
</template>

组合式API - watch(监听)

作用

侦听一个或者多个数据的变化，数据变化时执行回调函数。

俩个额外参数 immediate控制立刻执行，deep开启深度侦听

基础用法侦听单个数据

步骤：

1. 导入watch函数
2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数

示例

<<template>
  <button @click="add">
    {{ count }}
  </button>
</template>
<script setup>
   // 1. 导入watch
  import {ref, watch } from 'vue'
  const count = ref(0)
  const add = () => count.value++
  // 2. 调用watch 侦听变化
  // count: ref参数不需要加.value
++  watch(count, (newVal, oldVal) => {
++    console.log('旧值为',oldVal,'新值为',newVal )
  })

</script>

侦听多个数据

侦听多个数据，第一个参数可以改写成数组的写法

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  const name = ref('cp')
  // 2. 调用watch 侦听变化
++  watch([count, name], ([newCount, newName],[oldCount,oldName])=>{
++    console.log(`count或者name变化了，[newCount, newName],[oldCount,oldName])
  })
</script>

立即监听 immediate

在侦听器创建时立即出发回调，响应式数据变化之后继续执行回调

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const count = ref(0)
  // 2. 调用watch 侦听变化
  watch(count, (newValue, oldValue)=>{
    console.log(`count发生了变化，老值为${oldValue},新值为${newValue}`)
  },
++   {  immediate: true }
       ) 
</script>

组合式API-watch监听-深度侦听-精准侦听

浅层侦听

通过watch监听的ref对象默认是浅层侦听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state
  watch(state, ()=>{
    console.log('数据变化了')
  })
  const changeStateByCount = ()=>{
    // 直接修改不会引发回调执行
    state.value.count++
  }
</script>

开启deep之后

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  const state = ref({ count: 0 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

开启deep的问题： 它会递归地处理处理所有的值，无论哪个属性被修改都会触发watch回调，这可能会导致不必要的浪费。

<script setup>
  // 1. 导入watch
  import { ref, watch } from 'vue'
  // 这里有两个属性
  const state = ref({ count: 0, age: 18 })
  // 2. 监听对象state 并开启deep
  watch(state, ()=>{
    console.log('数据变化了')
  },{deep:true})
  const changeStateByCount = ()=>{
    // 此时修改可以触发回调
    state.value.count++
  }
</script>

精确监听

watch第一个参数变为回调函数,return处理的是对象.value.属性名

++  watch(()=>state.value.name, (newVal, oldVal) => {
    console.log('name变化了')
  })

组合式API - 生命周期函数

生命周期函数，从组件的创建到销毁阶段，在特定时间被自动调用的函数。

选项式对比组合式

生命周期函数基本使用

1. 导入生命周期函数
2. 执行生命周期函数，传入回调

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})
</script>

执行多次

生命周期函数执行多次的时候，会按照顺序依次执行

<scirpt setup>
import { onMounted } from 'vue'
onMounted(()=>{
  // 自定义逻辑
})

onMounted(()=>{
  // 自定义逻辑
})
</script>

组合式API - 父子通信

父传子

1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项接收数据

父传子时.子组件js代码中使用父组件传入属性,例如:const props = defineProps({num: Number});

props.num

子传父

基本思路

1. 父组件中给子组件标签通过@绑定事件

2. 子组件内部通过 emit 方法触发事件

3. 1. const emit = defineEmits([‘事件名1’, ‘事件名2’])
   2. emit(‘事件名1’, 值1)
      

父组件

<script setup>
import { ref } from 'vue';
import MyCom1 from './MyCom1.vue'

const boolean = ref(true)
const changeBoolean = () => {
  boolean.value = !boolean.value
}

const onMessage = (msg)=>{
  boolean.value = msg
  console.log('收到子组件传入的事件',msg);
}
</script>

<template>
  <div>父组件</div>
  <button @click="changeBoolean">父组件boolean</button>
  <MyCom1 :boolean="boolean" @changeMessage="onMessage"></MyCom1>
</template>

子组件

<script setup>
const emit = defineEmits(['changeMessage'])

const props = defineProps({
    boolean: Boolean
})

const change = ()=>{
    emit('changeMessage',!props.boolean)
}
</script>

<template>
    <div>子组件</div>
    {{boolean}}
    <button @click="change">子组件boolean</button>
</template>

组合式API - 模版引用

定义

通过ref标识获取真实的dom对象或者组件实例对象

之前使用过的应用场景

基本使用-普通元素

实现步骤:

1. 调用ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签
3. 组件挂载完成之后，可以拿到值

<script setup>
    import { onMounted, ref } from 'vue'
    // 1. 调用ref函数得到ref对象
    const refDiv = ref()
    
    // 3. 组件挂载完成之后，可以拿到值
    onMounted(() => {
        console.log(refDiv.value)
    }) 

</script>
<template>
    <!-- 2. 通过ref标识绑定ref对象 -->
    <div ref="refDiv">标题</div>
</template>

注意，只有当组件挂载完成之后，才能获取到值

进阶使用-组件元素

App.vue

<script setup>
		import MyCom2 from './my-com2.vue'
    import { onMounted, ref } from 'vue'
    // 1. 调用ref函数得到ref对象
    const refCom2 = ref(null)
    
    // 3. 组件挂载完成之后，可以拿到值
    onMounted(() => {
        console.log('com2', refCom2.value)
    }) 

</script>
<template>
    <!-- 2. 通过ref标识绑定ref对象 -->
    <MyCom2 ref="refCom2" />
</template>

my-com2.vue

<script setup>
  import { ref } from 'vue'
  const num = ref(100)
  
</script>
<template>
    <div>com2内部的数据{{ num  }}</div>
</template>

注意：默认情况下，我们不能通过对组件的引用拿到组件内部的数据

defineExpose(父组件调用子组件)

默认情况下在 语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法容许访问

说明：指定num属性可以被访问到

组合式API - provide和inject

作用和场景

顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信

跨层传递普通数据

实现步骤

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

跨层传递响应式数据

在调用provide函数时，第二个参数设置为ref对象

跨层传递方法

顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件的数据

vue3生态-router(路由)-pinia(vueX)

vue-router4

官网：https://router.vuejs.org/

安装vue-router

两种情况：

1全新项目

直接在交互工具中选择vue3的版本，再选择vue-router时，就会自动安装并配置vue-router 4

2老项目中额外添加vue-router

手动安装,不加版本号，默认安装最新的。npm i vue-router

使用

基本使用流程与vue-router3一致：

1配置router。导入组件，配置路由规则

2在main.js中使用router

3在App.vue中配置路由出口。

基本目录结构:

src
├── router
│   └── index.js
├── pages
│   ├── Home.vue
│   └── Login.vue
└── main.js

配置router

创建文件router/index.js，内容如下：

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router'

// 1. 创建路由
const router = createRouter({
  // 创建history模式的路由
  // history: createWebHistory(),
  // 创建hash模式的路由
  history: createWebHashHistory(),
  // 配置路由规则
  routes: [
    { path: '/home', component: () => import('../pages/Home.vue') },
    { path: '/login', component: () => import('../pages/Login.vue') },
  ],
})

export default router

在main.js中导入使用

在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

配置路由出口

App.vue中使用

<template>
  
      <router-link to="/home">首页</router-link>
   
      <router-link to="/login">登陆</router-link>
    

  <!-- 路由出口 -->
  <router-view></router-view>
</template>

组件中使用route与router

在v3中，组件中无法访问this，所以也无法像之前在vue2中采用的this.$route与this.$router来操作路由。

对应的调整为：

 vue2          ---->       vue3


this.$route   ---> const route = useRoute()

this.$router  ---> const router = useRouter()

useRoute获取route信息

通过useRoute()可以获取route信息

<script>
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    console.log(route.path)
    console.log(route.fullPath)
  },
}
</script>

useRouter获取router信息

通过useRouter()可以获取router信息

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const login = () => {
    router.push('/home')
}
</script>

Pinia新一代状态管理工具

官方网站：https://pinia.vuejs.org/

中文文档: https://pinia.web3doc.top/introduction.html

vuex的内容：

• state

• mutations

• actions

• getters

• modules

• plugins

pinia的内容

• state
• actions
• getters
• modules
• plugins

pinia基本使用

实现步骤

1. 安装 npm i pinia
2. 在main.js中use
3. 定义模块
4. 使用模块

在main.js中引入pinia

import { createApp } from 'vue'
import App from './App.vue'

++ import { createPinia } from 'pinia'
++ const pinia = createPinia()

++ createApp(App).use(pinia).mount('#app')

定义模块

新建文件src/store/counter.js

import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一标识
// 参数2：回调函数，类似于setup()的功能，可以提供state actions getters
import { ref } from 'vue'
const useCounterStore = defineStore('counter', () => {
  // 数据（state）
	const count = ref(0)

  // 修改数据的方法 (action)
  const addCount = () => {
  	count.value++
	}
  // 以对象形式返回
  return {count, addCount}
})

export default useCounterStore

使用模块

步骤：

1. 在组件中引入模块
2. 调用store函数得到store
3. 使用store

<script setup>
// 1. 在组件中引入模块
import useCounterStore from '@/src/store/counter'
// 2. 调用store函数得到store
const counter = useCounterStore()
console.log(counter)
</script>

<template>
  // 使用store
  count: {{ counter.count }}
  <button @click="counter.addCount">点击增加</button>
</template>

pinia中getters的使用

pinia中的getters直接使用computed函数进行模拟，再把geterrs return出去.

定义getters(计算属性)

import { defineStore } from 'pinia'
// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一表示
// 参数2：回调函数，类似于setup()的功能，可以提供state actions getters
import { ref, computed } from 'vue'
const useCounterStore = defineStore('counter', () => {
  // 数据（state）
	const count = ref(0)

  // 修改数据的方法 (action)
  const addCount = () => {
  	count.value++
	}
  // 计算属性
++  const doubleCount = computed(() => count.value * 2)

  // 以对象形式返回
  return {count, addCount, doubleCount}
})

export default useCounterStore

在组件中使用

<script setup>
  import useCounterStore from '@/stores/counter.js'
  const counterStore = useCounterStore()
  console.log(counterStore)
</script>
<template>
<div>
  {{ counterStore.doubleCount }}
  <button @click="counterStore.addCount">+1</button>
  count: {{ counterStore.count }}
</div>
</template>

pinia中异步actions的使用

import { defineStore } from 'pinia'
import { ref } from 'vue'
++ import axios from 'axios'
export default defineStore('newList', () => {

    const list = ref([])

    const getList = async () => {
++        const res = await axios.get('http://api-toutiao-   web.itheima.net/mp/v1_0/channels')
++        list.value = res.data.data.channels
    }

++    return { list, getList }
})

在组件中使用

<script setup>
  import useCounterStore from '@/stores/counter.js'
  const counterStore = useCounterStore()
  
  import { onMounted } from 'vue';
  const newsListStore = useNewsListStore()

++  onMounted(() => {
++    newsListStore.getList()
++  })

</script>
<template>
  <div>
    {{ newsListStore.list }}
  </div>
</template>

用storeToRefs来优化pinia的使用

使用storeToRefs可以保证解构出来的数据（state + getter）也是响应式的。注意： 不要对action进行结构

storeToRefs的格式

先引入,后使用

import {storeToRefs } from 'pinia'

const { state属性名1， state属性名2 } = storeToRefs(模块名)

持久化

有现成的第三方插件可以使用

https://prazdevs.github.io/pinia-plugin-persistedstate/guide/why.html

1. 安装

npm i pinia-plugin-persistedstate

​ 2.配置

main.js

import { createPinia } from 'pinia'
// 引入持久化插件
++ import piniaPluginPersist from 'pinia-plugin-persistedstate'
++ const store = createPinia()
// 使用该插件
++ store.use(piniaPluginPersist)

app.use(store)

​ 3.在某个store中使用

const useCounterStore = defineStore('counter', () => {

  // 以对象形式返回
  return {count, addCount, doubleCount}
},{
++  persist: {
++    key: 'my-custom-key' // 持久化使用的属性名,默认是 store.$id
++    storage: sessionStorage, //  默认是localStorage
++    paths: ['list', 'type'], // 要持久化的属性
  }
})

{{ newsListStore.list }}

```

用storeToRefs来优化pinia的使用

使用storeToRefs可以保证解构出来的数据（state + getter）也是响应式的。注意： 不要对action进行结构

storeToRefs的格式

先引入,后使用

import {storeToRefs } from 'pinia'

const { state属性名1， state属性名2 } = storeToRefs(模块名)

持久化

有现成的第三方插件可以使用

https://prazdevs.github.io/pinia-plugin-persistedstate/guide/why.html

1. 安装

npm i pinia-plugin-persistedstate

​ 2.配置

main.js

import { createPinia } from 'pinia'
// 引入持久化插件
++ import piniaPluginPersist from 'pinia-plugin-persistedstate'
++ const store = createPinia()
// 使用该插件
++ store.use(piniaPluginPersist)

app.use(store)

​ 3.在某个store中使用

const useCounterStore = defineStore('counter', () => {

  // 以对象形式返回
  return {count, addCount, doubleCount}
},{
++  persist: {
++    key: 'my-custom-key' // 持久化使用的属性名,默认是 store.$id
++    storage: sessionStorage, //  默认是localStorage
++    paths: ['list', 'type'], // 要持久化的属性
  }
})