开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue3前置 -> 正文阅读

[JavaScript知识库]vue3前置

文章目录

vue3前置

vue3前置

为什么学vue3

目标：了解vue3现状，以及它的优点，展望它的未来

Vue3现状：

vue-next 2020年09月18日，正式发布vue3.0版本。但由于刚发布周边生态不支持，大多数开发者处于观望。
现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。
- element-plus 基于 Vue 3.0 的桌面端组件库
- vant vant3.0版本，有赞前端团队开源移动端组件库
- ant-design-vue Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发

Vue3优点：

最火框架，它是国内最火的前端框架之一，官方文档中文文档
性能提升，运行速度事vue2.x的1.5倍左右
体积更小，按需编译体积比vue2.x要更小
类型推断，更好的支持Ts（typescript）这个也是趋势（js的超集）
高级给予，暴露了更底层的API和提供更先进的内置组件
★选项API-----组合API (composition api) ，能够更好的组织逻辑，封装逻辑，复用逻辑

Vue3展望：

这是趋势，越来越多的企业将来肯定会升级到Vue3.0
大型项目，由于对Ts的友好越来越多大型项目可以用Vue3.0

总结：

vue3依赖的相关第三方包有针对性（包的名称发生变化）
vue3性格更好，编程体验更好
这是未来的趋势，未来已来。

创建vue应用

目标：掌握如何创建vue3应用实例

基于Vue脚手架创建项目

# 1. 安装脚手架
npm i @vue/cli -g
# 2. 创建vue3项目（选项中选择v3版本，其他和之前一样）
vue create 项目名称
# 3、切换路径
cd 项目名称
# 4、运行项目
npm run serve

项目代码结构分析

入口文件main.js

import { createApp } from 'vue'
// 导入根组件
import App from './App.vue'
// 导入路由对象
import router from './router/index.js'
// 导入store实例对象
import store from './store/index.js'

// app相当于之前Vue2中new Vue()的实例对象vm
// app.use() 表示配置插件
// Vue.use(router) Vue2插件配置
const app = createApp(App)
app.use(store).use(router).mount('#app')
// createApp(App).use(store).use(router).mount('#app')

// Vue2
// import Vue from 'vue'
// const vm = new Vue({
//   router,
//   store,
//   redner: h => h(App)
// }).$mount('#app')

总结：

Vue的实例化方式发生变化：基于createApp方法进行实例化
router和store采用use方法进行配置
Vue3的典型API风格：按需导入，为了提升打包的性能

根组件结构

<template>
  <!-- Vue2中组件的模板必须有唯一的根节点 -->
  <!-- Vue3中组件的模板可以没有根节点 -->
  <div id="nav">
    <router-link to="/">主页</router-link> |
    <router-link to="/about">关于</router-link>
  </div>
  <!-- 路由组件的填充位置 -->
  <router-view />
</template>

总结：Vue3中组件的模板可以没有根节点（Vue2中组件的模板必须有唯一的根节点）

路由模块分析

import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

// Vue2创建实例对象
// const router = new VueRouter({
//   routes
// })

// Vue3创建实例对象
const router = createRouter({
  // 采用历史API路由模式
  // history: createWebHistory()
  // 采用hash的路由模式
  history: createWebHashHistory(),
  routes
})

export default router

总结：

创建路由实例对象采用createRouter方法，Vue3的典型风格
采用hash和history的方式有变化

Vue2采用mode选项：hash/history
Vue3采用方法：createWebHashHistory()/createWebHistory()

Vuex模块

import { createStore } from 'vuex'

// Vue2实例化
// new Vuex.Store({})

// Vue3实例化
export default createStore({
  // 状态
  state: {
  },
  // 修改状态
  mutations: {
  },
  // 异步操作
  actions: {
  },
  // 模块化拆分
  modules: {
  },
  // 类似于组件的计算属性
  getters: {
  }
})

总结：创建store对象采用createStore方法，而不是new.

选项API和组合API

目标：理解什么是选项API写法，什么是组合API写法。

选项API与组合API对比分析

在这里插入图片描述

什么是选项API写法：Options ApI

咱们在vue2.x项目中使用的就是 选项API 写法
- 代码风格：data选项写数据，methods选项写函数…，一个功能逻辑的代码分散。
- 优点：易于学习和使用，写代码的位置已经约定好
- 缺点：代码组织性差，相似的逻辑（功能）代码不便于复用，逻辑复杂代码多了不好阅读。

什么是组合API：Composition API

以功能为单位组织代码结构，后续重用功能更加方便。

总结：组合API的最大好处就是以功能为单位组织代码结构，有利于代码的复用

组合API-setup函数

目标：掌握setup函数的基本使用

使用细节：

setup 是一个新的组件选项，作为组件中使用组合API的起点。
从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
在模版中需要使用的数据和函数，需要在 setup 返回。

演示代码：

<template>
  <div>
    <div>setup函数用法</div>
    <hr>
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  // Vue3依然可以使用data中的数据，但是不建议使用（这是选项API）
  data () {
    return {
      info: 'nihao'
    }
  },
  setup () {
    // 触发时机在beforCreate/created生命周期之前
    // Vue3中beforCreate/created声明周期函数已经废弃了，其实已经被setup替代了

    // 此时无法访问this，因为组件实例此时尚未创建
    // console.log(this)

    // 定义事件函数
    const handleClick = () => {
      console.log('click')
    }

    // 这里返回的数据用于给模板使用：类似于之前data中提供的数据
    return {
      msg: 'hello',
      handleClick
    }
  }
}
</script>

<style lang="less">
</style>

总结：

setup选项是实现组合API的基础
触发的时机在beforeCreate之前
Vue3中beforCreate/created声明周期函数已经废弃了，其实已经被setup替代了
此时无法访问this，因为组件实例此时尚未创建
setup的返回值用于给模板提供数据和方法
模板依然可以从data获取数据，但是不建议使用data了。

组合API-生命周期

目标：掌握使用组合API写法的生命周期钩子函数

回顾vue2.x生命周期钩子函数：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

认识vue3.0生命周期钩子函数

setup 创建实例前
onBeforeMount 挂载DOM前
onMounted 挂载DOM后
onBeforeUpdate 更新组件前
onUpdated 更新组件后
onBeforeUnmount 卸载销毁前
onUnmounted 卸载销毁后

演示代码：

<template>
  <div class="container">
    container
  </div>
</template>
<script>
import { onBeforeMount, onMounted } from 'vue'
export default {
  setup () {
    onBeforeMount(()=>{
      console.log('DOM渲染前',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后1',document.querySelector('.container'))
    })
    onMounted(()=>{
      console.log('DOM渲染后2',document.querySelector('.container'))
    })
  },
}
</script>

总结：

Vue3生命周期的函数发生了变化
去掉两个：beforeCreate和created，添加了setup
方法名称发生变化：方法名称前面多了个on，中间是驼峰式的
卸载组件的生命周期变化：onBeforeUnmount 、onUnmounted
同一个生命周期可以触发多次

组合API-reactive函数

目标：掌握使用reactive函数定义响应式数据

reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <div>{{obj.msg}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'App',
  setup () {
    // 数据响应式：数据的变化导致视图自动变化
    // let msg = 'hello'
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    const handleClick = () => {
      // msg = 'nihao'
      // console.log(msg)
      obj.msg = 'nihao'
    }
    return { obj, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：

setup默认返回的普通数据不是响应式的
如果希望数据是响应式，有一种做法就是给数据包裹reactive方法即可

组合API-toRef函数

目标：掌握使用toRef函数转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

定义响应式数据：

toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <!-- <div>{{obj.msg}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRef } from 'vue'

export default {
  name: 'App',
  setup () {
    // 需求：模板中必须有添加对象obj前缀,而是直接获取属性
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi'
    })
    // 把对象中的单个属性取出并且保证数据的响应式
    const msg = toRef(obj, 'msg')
    const info = toRef(obj, 'info')
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'coniqiwa'
    }
    // reactive中的对象属性如果重新赋值会失去响应式能力
    return { msg, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：toRef方法可以把对象中的单个属性取出并且保证响应式能力

组合API-toRefs函数

目标：掌握使用toRefs函数定义转换响应式中所有属性为响应式数据，通常用于解构|reactive定义对象。

toRefs是函数，转换响应式对象中所有属性（可以是一部分）为单独响应式数据，对象成为普通对象，并且值是关联的

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <!-- <div>{{obj.msg}}</div> -->
    <div>{{msg}}</div>
    <div>{{info}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  name: 'App',
  setup () {
    // 需求：模板中必须有添加对象obj前缀,而是直接获取属性
    // reactive方法包裹的对象中的数据都是响应式的
    const obj = reactive({
      msg: 'hello',
      info: 'hi',
      abc: 'abc'
    })
    // 把对象中的单个属性取出并且保证数据的响应式
    // const msg = toRef(obj, 'msg')
    // const info = toRef(obj, 'info')

    // 把obj对象中的属性结构出来，保证响应式能力
    const { msg, info } = toRefs(obj)
    const handleClick = () => {
      obj.msg = 'nihao'
      obj.info = 'aligotogozayimasi'
    }
    // reactive中的对象属性如果重新赋值会失去响应式能力
    return { msg, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：toRefs方法可以批量转换对象中的属性为独立的响应式数据

组合API-ref函数

目标：掌握使用ref函数定义响应式数据，一般用于简单类型数据

ref函数，常用于简单数据类型定义为响应式数据
- 在修改值和获取值的时候，需要.value
- 在模板中使用ref申明的响应式数据，可以省略.value

演示代码：

<template>
  <div>
    <div>数据的响应式</div>
    <hr>
    <div>{{count}}</div>
    <div>
      <button @click='handleClick'>点击</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // ref主要（也可以是对象和数组）用于定义基本类型的数据并保证响应式能力
    const count = ref(0)
    const obj = ref({ msg: 'hello' })
    const handleClick = () => {
      // ref定义的数据，在js中操作时需要通过value属性进行
      // 但是模板中访问不需要value
      count.value += 1
      console.log(obj.value.msg)
    }
    return { count, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结

如果是基本类型数据，可以使用ref进行定义
ref其实也可以定义对象，但是访问时需要value属性

数据响应式
- setup中直接返回的普通数据不是响应式的
- 通过reactive包裹对象可以成为响应式数据
- 为了简化对象的访问（去掉前缀），可以使用toRef进行优化
- 为了获取对象中多个属性，可以使用toRefs进一步简化
- 如果是简单数据类型，其实使用ref定义更加合适

知识运用案例

目标：利用所学知识完成组合API实例

基本步骤：

记录鼠标坐标
- 定义一个响应式数据对象，包含x和y属性。
- 在组件渲染完毕后，监听document的鼠标移动事件 mousemove
- 指定move函数为事件对应方法，在函数中修改坐标
- 在setup返回数据，模版中使用
累加1功能
- 定义一个简单数据类型的响应式数据
- 定义一个修改数字的方法
- 在setup返回数据和函数，模板中使用

落的代码：

<template>
  <div>
    <div>案例实战</div>
    <hr>
    <!-- (123, 456) -->
    <div>坐标信息：{{'(' + position.x + ',' + position.y + ')'}}</div>
    <hr>
    <div>总数：{{count}} <button @click='handleCount'>点击</button></div>
  </div>
</template>

<script>
import { reactive, onMounted, onUnmounted, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 功能1：监听鼠标移动的坐标并展示
    const position = reactive({
      x: 0,
      y: 0
    })

    const move = (e) => {
      position.x = e.clientX
      position.y = e.clientY
    }

    onMounted(() => {
      // 监听鼠标移动事件
      document.addEventListener('mousemove', move)
    })

    onUnmounted(() => {
      // 组件卸载时解绑事件
      document.removeEventListener('mousemove')
    })

    // -----------------------------------
    // 功能2：点击按钮控制数据的累加操作
    const count = ref(0)

    const handleCount = () => {
      count.value += 1
    }

    return { position, count, handleCount }
  }
}
</script>

<style lang="less">
</style>

总结：代码的组织形式以功能为单位放到一块

setup方法中的多个功能代码可以拆分为单独的模块，然后再导入，方便代码的复用。

<template>
  <div>Vue3基础-案例</div>
  <div>坐标{{'(' + x + ',' + y + ')'}}</div>
  <hr>
  <div>{{count}}</div>
  <button @click='handleCount'>点击</button>
</template>
<script>
import m1 from '@/module/m1.js'
import m2 from '@/module/m2.js'
import { onMounted, onUnmounted } from '@vue/runtime-core'

export default {
  name: 'App',
  setup () {
    // 功能1：监听鼠标移动的坐标并展示
    onMounted(() => m1.bindEvent())
    onUnmounted(() => m1.unbindEvent())
    // -----------------------------------
    // 功能2：点击按钮控制数据的累加操作
    return { ...m1, ...m2 }
  }
}
</script>

// 功能1：监听鼠标移动的坐标并展示
import { reactive } from 'vue'

const position = reactive({
  x: 0,
  y: 0
})

const move = (e) => {
  position.x = e.clientX
  position.y = e.clientY
}

const bindEvent = () => {
  // 监听鼠标移动事件
  document.addEventListener('mousemove', move)
}

const unbindEvent = () => {
  // 组件卸载时解绑事件
  document.removeEventListener('mousemove')
}

export default {
  position,
  bindEvent,
  unbindEvent
}

// 功能2：点击按钮控制数据的累加操作
import { ref } from 'vue'

const count = ref(0)

const handleCount = () => {
  count.value += 1
}

export default {
  count,
  handleCount
}

总结：将来随着业务量的增加，复杂的功能可以单独拆分为独立的模块，然后导入使用，并且方便复用和后期维护。

组合API-computed函数

目标：掌握使用computed函数定义计算属性

computed函数，是用来定义计算属性的，计算属性不能修改。

基本使用：只读

<template>
  <div>
    <div>计算属性</div>
    <hr>
    <button @click='age=25'>点击</button>
    <div>今年：{{age}}岁了</div>
    <div>明年：{{nextAge}}岁了</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18)

    // 计算属性基本使用
    const nextAge = computed(() => {
      // 回调函数必须return，结果就是计算的结果
      // 如果计算属性依赖的数据发生变化，那么会重新计算
      return age.value + 1
    })

    return { age, nextAge }
  }
}
</script>

<style lang="less">
</style>

总结：Vue3中计算属性也是组合API风格

回调函数必须return，结果就是计算的结果
如果计算属性依赖的数据发生变化，那么会重新计算
不要在计算中中进行异步操作

高级用法：可读可写

<template>
  <div>
    <div>计算属性</div>
    <hr>
    <button @click='age=25'>点击</button>
    <button @click='nextAge=28'>点击修改</button>
    <div>今年：{{age}}岁了</div>
    <div>明年：{{nextAge}}岁了</div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'App',
  setup () {
    // 计算属性：简化模板
    // 应用场景：基于已有的数据，计算一种数据
    const age = ref(18)

    // // 计算属性基本使用
    // const nextAge = computed(() => {
    //   // 回调函数必须return，结果就是计算的结果
    //   // 如果计算属性依赖的数据发生变化，那么会重新计算
    //   return age.value + 1
    // })

    // 修改计算属性的值
    const nextAge = computed({
      get () {
        // 如果读取计算属性的值，默认调用get方法
        return age.value + 1
      },
      set (v) {
        // 如果要想修改计算属性的值，默认调用set方法
        age.value = v - 1
      }
    })

    return { age, nextAge }
  }
}
</script>

<style lang="less">
</style>

总结：

计算属性可以直接读取或者修改
如果要实现计算属性的修改操作，那么computed的实参应该是对象

读取数据触发get方法
修改数据触发set方法，set函数的形参就是你赋给他的值

组合API-watch函数

目标：掌握使用watch函数定义侦听器

watch函数，是用来定义侦听器的

监听ref定义的响应式数据

// 1、侦听器-基本类型
const count = ref(10)
// 侦听普通值基本使用
watch(count, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})

总结：侦听普通数据可以获取修改前后的值；被侦听的数据必须是响应式的。

监听reactive定义的响应式数据

const obj = reactive({
  msg: 'tom'
})

// 侦听对象
// watch(obj, (newValue, oldValue) => {
watch(obj, () => {
  // console.log(newValue === oldValue)
  console.log(obj.msg)
})

const handleClick = () => {
  obj.msg = 'jerry'
}

总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时，也可以直接读取被侦听的对象，那么得到的值也是最新的。

监听多个响应式数据数据

// 3、侦听器-侦听多个数据
const n1 = ref(1)
const n2 = ref(2)

watch([n1, n2], (v1, v2) => {
  // v1和v2都是数组
  // v1表示被监听的所有值的最新值
  // v2表示被监听的所有值的原有值
  console.log(v1, v2)
})

总结：可以得到更新前后的值；侦听的结果也是数组，数据顺序一致

监听reactive定义的响应式数据的某一个属性

// 4、侦听对象中的某个属性
// 如果侦听对象中当个属性，需要使用函数方式
watch(() => obj.age, (v1, v2) => {
  console.log(v1, v2)
})

总结：如果侦听对象中当个属性，需要使用函数方式，侦听更少的数据有利于提高性能。

配置选项用法

// watch方法的配置选项
// immediate: true 表示，组件渲染后，立即触发一次
watch(() => stuInfo.friend, () => {
  console.log('sutInfo')
}, {
  immediate: true,
  // 被侦听的内容需要是函数的写法 () => stuInfo.friend
  deep: true
})

总结：

immediate: true,表示组件渲染时立即调用
deep:true，表示深度监听对象里面的子属性（被侦听的内容需要是函数的写法）

组合API-ref属性

目标：掌握使用ref属性绑定DOM或组件

获取DOM或者组件实例可以使用ref属性，写法和vue2.0需要区分开

基于Vue2的方式操作ref-----数组场景

<ul>
  <li v-for="(item, index) in list" ref="fruits" :key="index">{{ item }}</li>
  <!-- <my-com :key='index' v-for='index in 8' ref='info'></my-com> -->
</ul>
<button @click="handleClick">点击</button>

methods: {
  handleClick () {
    const fruits = this.$refs.fruits
    console.log(fruits[1].innerHTML)
  }
}
// 批量绑定同名的ref （主要就是v-for场景中使用 ref）,此时通过[this.$refs.名称]访问的值应该是一个数组，数组中包含每一个DOM元素
// ref绑定组件的用法与之类似

总结：

Vue2中可以通过ref直接操作单个DOM和组件 this.$refs.info.innerHTML
Vue2中可以批量通过ref操作DOM和组件 this.$refs.fruit[0].innerHTML

ref操作单个DOM元素----Vue3的规则

<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li ref='fruit' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // this.$refs.info.innerHTML
    // this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
    // this.$refs.fruit[0].innerHTML ---> apple
    // -----------------------------------------
    // Vue3中通过ref操作DOM
    // 1、定义一个响应式变量
    const info = ref(null)

    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'orange'
    }])

    const handleClick = () => {
      // 4、此时可以通过info变量操作DOM
      console.log(info.value.innerHTML)
    }

    // 2、把变量返回给模板使用
    return { fruits, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

总结：操作单个DOM或者组件的流程

定义一个响应式变量
把变量返回给模板使用
模板中绑定上述返回的数据
可以通过info变量操作DOM或者组件实例

获取v-for遍历的DOM或者组件

<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li :ref='setFruits' v-for='item in fruits' :key='item.id'>{{item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // this.$refs.info.innerHTML
    // this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
    // this.$refs.fruit[0].innerHTML ---> apple
    // -----------------------------------------
    // Vue3中通过ref操作DOM
    // 1、定义一个响应式变量
    const info = ref(null)

    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'orange'
    }, {
      id: 3,
      name: 'pineapple'
    }])

    // 定义操作DOM的函数
    const arr = []
    const setFruits = (el) => {
      // 参数el表示单个DOM元素
      arr.push(el)
    }

    const handleClick = () => {
      // 4、此时可以通过info变量操作DOM
      // console.log(info.value.innerHTML)
      console.log(arr)
    }

    // 2、把变量返回给模板使用
    return { fruits, info, handleClick, setFruits }
  }
}
</script>

<style lang="less">
</style>

总结：ref批量操作元素的流程

定义一个函数
把该函数绑定到ref上（必须动态绑定）
在函数中可以通过参数得到单个元素，这个元素一般可以放到数组中
通过上述数组即可操作批量的元# 系列文章目录
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用