文章目录
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的使用