搭建一个Vue应用程序
vue2——若依
vue3——若依
vue3——vite
生命周期
概念
生命周期： 在人生这条单行线中，每一个年龄阶段需要做的一些事情，例如3-6上幼儿园、20-30的时候结婚、60岁的时候退休。每一个时间节点都要做固定的事情，把这些事情组合在一起就是生命周期。
在Vue3文档中是这样定义的：每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。
vue2和vue3区别
Vue2の生命周期共分为8个阶段，创建前后，载入前后，更新前后，销毁前后而Vue3の生命周期没有created和beforeCreate。
| vue2 | vue3 | |
|---|---|---|
| 组件创建前 | beforeCreate | -- |
| 组件创建后 | created | -- |
| 组件加载前 | beforeMount | onBeforeMount |
| 组件加载后 | mounted | onMounted |
| 组件更新前 | beforeUpdate | onBeforeUpdate |
| 组件更新后 | updated | onUpdated |
| 组件卸载前 | beforeUnmount | onBeforeUnmount |
| 组件卸载后 | unmounted | onUnmount |
写法区别
beforeMount(){
// vue2 写法
}
onBeforeMount(() => {
// vue3 写法
})
详细用法
实例代码：
组件通信
vue2
vue3
watch监听器
vue2
1.实现打开页面默认自动触发监听器（immediate）和对象深度监听（deep）
data(){
return {
user:{
name:'123',
old:29
}
},
watch(){
user:{
handler(newVal,oldVal){
console.log(newVal);
console.log(oldVal);
},
immediate:true， //immediate为false为打开页面不自动触发一次监听；true为打开页面自动触发一次监听
deep:true //启用深度监听（用于监听对象中某一属性值发生变化，只有有属性变化就触发）
}
}
2.监听对象中某一个指定属性的变化
data(){
return {
user:{
name:'123',
old:29
}
},
watch(){
'user.name'(newVal,oldVal){ //必须用引号包裹起来。（只是监听user中的那么属性）
console.log(newVal);
console.log(oldVal);
}
}
vue3
路由vue-router
vue2——router3
vue3——router4
状态管理
vue2——vuex
这个视频：路由重定向，vuex使用 www.bilibili.com/video/BV1rb…
vue3——pinia
工作遇到的问题
阿里数据地图大屏
vue2 导入外部js文件如何拿到方法的返回值
// vue文件
<script>
import { LastDays } from "@/views/pages/js/time";
export default {
mounted() {
this.time_picker = LastDays() // 获取前2天时间
},
}
</script>
js获取当前日期和前两天日期
// js文件，获取前2天函数
export function LastDays() {
// 当前时间
const now = new Date().getTime()
// 前2天时间
const lastDays = new Date(now - 2 * 24 * 3600 * 1000)
const year = lastDays.getFullYear();
const month = (lastDays.getMonth() + 1).toString().length === 1 ? '0' + (lastDays.getMonth() + 1) : (lastDays.getMonth() + 1)
const day = lastDays.getDate().toString().length === 1 ? '0' + lastDays.getDate() : lastDays.getDate()
// 输入时间，格式 '20240130'
return year + month + day // 返回值
}
js关于小数点失精算法修正0.07*100竟然=7.000000000000001
(0.07 * 100)+'%'
"7.000000000000001%"
// ----
parseInt(0.07 * 100) + '%'
"7%"
// ----
(0.07 * 100).toFixed(2) + '%'
"7.00%"
Vue常见面试题
1.nextTick的使用
概念
/neks'tɪk/ 耐克斯'忒克nextTick主要用于当数据动态变化后，dom还未及时更新的问题
在vue里面，我们的dom更新是异步执行的。它就相当于我们在修改数据的时候，视图层并不能立即更新，而是会监听数据的一个变化，并且缓存在同一个事件循环当中。只有等同一数据循环中的所有数据变化完成之后，才会进行统一的视图更新。我们经常会在dom元素还没更新的时候，就使用了某个元素，这样是拿不到变更后的dom的。为了确保我们能获取到数据循环之后的dom。所以我们设置了nextTick方法。这个api的用处是：在修改了数据以后，立即使用这个方法获取更新后的dom。
nextTick使用的场景
- created组件创建后的生命周期，想要获取dom时
- 获取列表更新后的高度
- 添加input框，并获取焦点
- echarts 图表在饿了吗UI库中时候的 el-dialog 组件会出现dom元素不能及时更新问题
代码示例
// vue官网，vue2写法
<script>
import { nextTick } from 'vue'
export default {
data() {
return {
count: 0
}
},
methods: {
async increment() {
this.count++
// DOM 还未更新
console.log(document.getElementById('counter').textContent) // 0
await nextTick()
// DOM 此时已经更新
console.log(document.getElementById('counter').textContent) // 1
}
}
}
</script>
<template>
<button id="counter" @click="increment">{{ count }}</button>
</template>
// vue3 写法
// 添加input框，并获取焦点
<script setup lang='ts'>
import { nextTick, ref } from 'vue'
const isShow = ref(false)
async function addInput() {
isShow.value = true
await nextTick(() => {
document.getElementById('test')?.focus()
})
}
</script>
<template>
<input v-if="isShow" id='test' />
<button @click="addInput">添加input，获取焦点</button>
</template>
// vue3 写法二
// 获取列表更新后的高度
<script setup lang='ts'>
import { nextTick, ref } from 'vue'
const arr = ref(['AA', 'BB', 'CC'])
async function addEE() {
arr.value.push('EE')
console.log('len数_arr.value.length', arr.value.length) // 4
console.log("len数_nextTick()前", document.getElementById('test')?.children.length) // 3
await nextTick()
console.log("len数_nextTick()后", document.getElementById('test')?.children.length) // 4
}
</script>
<template>
<ul id="test">
<li v-for="(item, index) in arr" :key="index">{{ item }}</li>
</ul>
<button @click="addEE">添加EE</button>
</template>
搭建项目试一下，总结笔记
vue2
this.abc = false
this.$nextTick(() => {
//你要执行的方法
this.abc = true
})
vue3
nextTick(()=>{
otherParam.showA = true
})
