1.组件之间的通信
2.v-if和v-for
vue2中v-for优先级高，vue3中v-if优先级高
不建议这两个一起使用，因为v-if是修改dom元素，导致性能变低，vue3中直接报错，当我们遍历数据的时候，建议先对数据进行处理，比如用computed处理数据，再用v-for渲染
3.生命周期
常用生命周期钩子函数
1.beforeCreate:组件实例初始化的时候调用
2.Created:组件实例初始化之后调用
3.beforeMount:组件被挂载前
4.Mounted:组件被挂载之后
5.beforeupdate:数据被修改之前
6.updated:数据被修改之后
7.beforeUnmount:组件被卸载前
8.Unmounted:组件被卸载之后
生命周期实践
beforeCreate:通常用于插件开发中执行一些初始化任务
created：组件初始化完毕，可以访问各种数据，获取接口数据
mounted：dom已创建，可用获取访问数据和dom元素，访问子组件等
beforeUpdate：此时view层还未更新，可以获取更新前的各种状态
updated：完成view层的更新，所有状态都是最新的
beforeunmounted：实例被销毁前，可用于一些定时器或订阅的取消
unmountde：销毁一个实例，可以清理与其他实例的连接，解绑他的全部指令和事件监听器
4.双向绑定
v-model是一种语法糖，是input和value组合，绑定一个响应式数据到视图，视图中数据变化也会改变该值
<template>
<div>
<input type="text" @input="ValueChange">
<h2>{{ value }}</h2>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const value = ref('')
const ValueChange = (e) =>{
console.log(e.data);
value.value+=e.data
}
return {
value,
ValueChange
}
}
}
</script>
<style lang="less" scoped></style>
5.nextTick
等待下一次 DOM 更新刷新的工具方法。
<template>
<div>
<h2>{{ num }}</h2>
<button @click="change(1)">+1</button>
<button @click="change(0)">-1</button>
</div>
</template>
<script>
import { ref,nextTick } from 'vue';
export default {
setup() {
const num =ref(0)
const change =async (isadd) =>{
if(isadd){
num.value++
}else {
num.value--
}
// await nextTick()
console.log(document.querySelector('h2').innerHTML);
}
return {
num,
change
}
},
}
</script>
当没有nextTick时，获取dom元素中的数据会慢一拍，而当有nextTick时就不会
6.如何缓存和更新组件
<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
如图所示，有两个组件通过按钮进行切换，当在第一个组件中点击加号的时候，数据会变，如果此时切换组件，在切换回来，那么原来的数据就会变成初始值，因为没有加keep-alive，从而导致没有缓存，如果加了keep-alive，那么当切换组件的时候数据就不会初始化，而是保存是上次的数据
//父组件
<template>
<div>
<template v-for="(item, index) in component">
<button @click="change(index)">{{ item }}</button>
</template>
<KeepAlive>
<component :is="current" />
</KeepAlive>
</div>
</template>
<script>
import { ref } from 'vue'
import Count1 from './page/Count1.vue'
import Count2 from './page/Count2.vue'
export default {
components: {
Count1,
Count2
},
setup() {
const component = ['Count1', 'Count2']
const current = ref(component[0])
const change = (index) => {
console.log(index)
current.value = component[index]
}
return {
current,
change,
component,
Count1,
Count2
}
}
}
</script>
//count组件
<template>
<div>
<h2>Count1</h2>
<h2>{{ num }}</h2>
<button @click="change(true)">+1</button>
<button @click="change(false)">-1</button>
</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const num = ref(0)
const change = (isadd) => {
if (isadd) {
num.value++
} else {
num.value--
}
}
return {
num,
change
}
}
}
</script>
7.vue优化
1.路由懒加载
2.keep-alive
3.使用一些指令（v-show,v-oncee,v-memo）
4.v-for和v-if不一起使用（vue3直接报错）
5.长列表性能优化，只渲染一部分可视区域的数据
6.在befoeunmounted中销毁一些事件（比如settimeout）
7.图片懒加载
8.组件按需引入（element-ui）
8. $route和$router的区别
$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等
9.diff算法
1.vue2 diff算法
双端diff算法：新旧虚拟dom分别有两个指针，头指针和尾指针，分别对比这四个指针指向的dom，如果相同则移动或者指针直接向后移动，直到四个节点都不相同，则进行虚拟节点的创建。
图例：
初始化新旧虚拟dom和指针，并且进行新旧节点的头指针比较，发现是相同的，此时新旧头指针移动
此时在比较新旧头指针指针，发现不同，此时比较新旧尾指针，也不同，在比较旧头指针和新尾指针，发现相同，此时移动相同的节点，并且指针也移动
此时在同理比较新旧头结点，如果相同则指针移动，不同在比较其他指针指向的节点。如果四个节点都不相同，那么此时就需要进行创建新节点。
最后刚好比较完成，新旧节点刚好比较完成是很难得，所以大概率会有剩余的节点，那么就需要对剩余的元素进行操作。
- 旧节点数组遍历结束、新节点数组仍有剩余，则遍历新节点数组剩余数据，分别创建节点并插入到旧末尾索引对应节点之前
- 新节点数组遍历结束、旧节点数组仍有剩余，则遍历旧节点数组剩余数据，分别从节点数组和 dom 树中移除
2.vue3 diff算法
最长递增子序列
10.vue2和vue3的区别
1.双向数据绑定改变，vue2用的是Object.definepropert()，而vue3用的是proxy，vue2用的方式监听不了对象的属性增加和删除，而proxy可以很好的解决这个问题。
2.Api不同，vue2是选项式api，vue3支持composition api
3.生命周期发生了变化，在vue2中是beforeDestroy和destroyed，而在vue3中是beforeUnmount和nmounted，在vue3中没有Created和beforeCreate生命周期
