Vue3与Vue2的区别
Vue3组合式API与Vue2选项式API的区别
- this问题：
- 选项式API需要依赖this上下文对象访问属性
- 组合式API没有this，script setup中的模版会被编译为一个内联函数，代码位于同一个作用域
- 代码逻辑清晰
- 选项式API中，组件是按照data、methods、computed、watch等分块写的，代码分散
- 组合式API将有关的逻辑组合在一起，代码更清晰
- 逻辑复用
- 选项式API中，复用逻辑，使用mixin，但mixin存在作用域不清晰、命名冲突的问题
- 组合式API提供compoable（可组合函数）的概念，将逻辑抽取成独立的函数，复用性更强、代码更清晰
v-if和v-for哪个优先级更高？
- vue2中v-for的优先级> v-if。先执行循环再判断条件，浪费性能
- vue3中v-if的优先级>v-for。v-if执行时，调用的变量还不存在，导致异常
两种情况下导致的问题可以这样解决
- 过滤列表：先对数据进行计算属性处理，返回过滤后的数据
- 避免渲染本应该被隐藏的列表。把v-if移动到容器元素上或者外面包一层template即可
vue如何扩展一个组件
逻辑扩展有:mixins、extends、composition API 内容扩展：slots
子组件可以直接改变父组件的数据么？
父子之间传递使用props形成一个单向下行绑定：父级prop的更新会向下流动到子组件中，反过来则不行，防止从子组件意外变更父组件的状态。父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器控制台中发出警告。
实际开发过程中有两个场景会想要修改一个属性
- 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data，并将这个 prop 用作其初始值：
const props = defineProps(['initialCounter'])
const counter = ref(props.initialCounter)
- prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
const props = defineProps(['size'])
// prop变化，计算属性自动更新
const normalizedSize = computed(() => props.size.trim().toLowerCase())
**** 实践中如果确实想要改变父组件属性应该emit一个事件让父组件去做这个变更。注意虽然我们不能直接修改一个传入的对象或者数组类型的prop，但是我们还是能够直接改内嵌的对象或属性。***
vue组件为什么只能有一个根元素
-
vue2中组件确实只能有一个根，但vue3中组件已经可以多根节点了。 -
之所以需要这样是因为
vdom是一颗单根树形结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也会转换为一个vdom，自然应该满足这个要求。 -
vue3中之所以可以写多个根节点，是因为引入了Fragment的概念，这是一个抽象的节点，如果发现组件是多根的，就创建一个Fragment节点，把多个根节点作为它的children。将来patch的时候，如果发现是一个Fragment节点，则直接遍历children创建或更新。
