vue3
如何让组件的样式不会影响全局
<style scope></style>
如何覆盖子组件的样式
- v-deep(){}
父子组件如何通信？
- defineProps() , defineEmits() ,emit()
- ref $parent
- pinia
定义响应式数据的方法
- ref,reactive
ref 和 reactive 的区别
- ref 定义的响应式对象，可以将基本类型数据转换为响应式数据。
- rective 定义的响应式对象，可以将引用类型数据转换为响应式数据。
组件的生命周期流程是怎样的？
setup()
beforeCreate()
init options api: 为了兼容 vue2 写法
created()
是否有预编译的模板，没有，开始编译
onBeforeMount()
initial render create & insert dom node
data changes
re-render & patch
initial render create & insert dom node
onMounted()
data changes
onBeforeUpdate()
re-render & patch
onUpdated()
onBeforeUnmount()
onUnmounted()
什么是 mvvm,mvvm 在 vue 中如何实现？
mvvm 是一种架构模式，核心思想是通过 vm 将 m 和 v 进行绑定，当 m 更新时 vm 主动刷新 v，v 更新时 vm 主动更新 m
View 表示当前页面所渲染的 DOM 结构。
Model 表示当前页面渲染时所依赖的数据源。
ViewModel 表示 vue 的实例，它是 MVVM 的核心。
单项数据流，双向数据绑定，单向数据绑定
- 数据只能通过组件的的 props 属性，从父组件中，传到子组件中，不可反向
- ui 发生变更，
触发绑定的响应式数据的更新，响应式数据的更新，引起依赖数据的 ui 的重新渲染 - ui 变化只能更新 model,model 变化只能更新 ui,两者不同时存在
keep-alive 是什么，有什么作用，针对它新增的生命周期有哪些，用法是什么？
- 虚拟组件，对动态切换的组件进行缓存
- onActivated()，onDeactivated()
<KeepAlive>
<component :is="view"></component>
</KeepAlive>
<KeepAlive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</KeepAlive>
include="a,b" :max="10"
如何让自定义组件可以实现双向数据绑定,即就是如何让 v-model 在组件上起作用？
- const props = defineProps(['modelValue']);
- const emit = defineEmits(['update:modelValue']);
- emit('update:modelValue', value);
Vue 中的性能优化
组件中响应式对象
- vue 重写对象的 getter,setter 导致重写属性调用栈变长；
- 不该作为响应式对象的不要放到 data 中；
v-if v-show
- v-if 每次切换都会重新渲染；执行大量脚本；