整理汇总45+个Vue面试题，带你巩固知识点！Vue.js

对应第一个问题我的解决方法是可以通过监听storage事件来清除数据

思路：

先回答答案：在vue2中，v-for的优先级更高但是在vue3中，v-if的优先级更高

拓展：无论什么时候，我们都不应该把v-for和v-if放在一起，怎么解决呢？一是可以定义一个计算属性，让v-for遍历计算属性。二是可以把if移到内部容器里（ulol）或者把v-for移植外部容器(template)中

watch方式，可以以字符串形式监听$store.state.xx;subscribe方法参数是一个回调函数，回调函数接受mutation对象和state对象，可以通过mutation.type判断监听的目标。wtach方法更简单好用，subscribe会略繁琐，一般用vuex插件中（可以提一下vuex的持久化插件vuex-persist、vuex-persistedstate）

vue3+pinia会是更好的组合。

mixins很灵活，但是会冲突很混乱。extends是一个不太常用的选项，更mixins的不同是它只能扩展单个对象，优先级比mixins高。

扩展：Vue.mixin（全局混入）Vue.extend（有点像是类/组件的继承创建一个子类）

不能直接改。

组件化开发中有一个单向数据流原则，不在子组件修改父组件数据是个常识

如果你确实需要改，请通过emit向父组件发送一个事件，在父组件中修改

我么可以在路径中使用一个动态字段来实现，例如/users/:id其中:id就是路径参数。可以通过this.$route.parmas获取，参数还可以有多个，$route对象还公开了其他有用的信息如queryhash等。

问template到render的过程其实是问的vue编译器工作原理。

补充：

如果你说不出来，可以直接举例子。当我开发一个页面时，如果需要显示一个顶部导航栏，通过导航栏跳转到不同的页面，而顶部的导航栏又必须要在每个页面显示时，就可以使用嵌套路由；还可以举例，当我需要查看某个列表的详情页面时，往往需要嵌套路由（detail/:id）

watch方式，可以以字符串形式监听$store.state.xx;subscribe方法参数是一个回调函数，回调函数接受mutation对象和state对象，可以通过mutation.type判断监听的目标。wtach方法更简单好用，subscribe会略繁琐，一般

parentcreated->childcreated->childmounted->parentmounted

原因：Vue创建是一个递归的过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件首次创建时会添加Mounted钩子到队列，等到patch结束再执行它们，可见子组件的mounted钩子是选进入到队列中的，因此等到patch结束执行这些钩子时也先执行。

使用自定义指令分为定义、注册、和使用

API层面

此外，Vue3在框架层面也有很多两点和改进

最大设计目标就是替代Vue2，为了实现这一点，Vue3在以下几个方面做了很大改进，如：易用性，框架性能、扩展性、可维护性、开发体验等

$attrs获取没有在props中定义的属性，v-bind="$attrs"可以用于属性透传$listeners用于获取事件，vue3中已经移除合并到attrs中，使用起来更方便

CompositionAPI更简洁、逻辑复用更高效。解决的过去OptionsAPI中mixins的各种缺点（会冲突很混乱）；另外CompositionAPI更自由，没有OptionsAPI那样固定的写法，并且可以更有效的将逻辑代码组织在一起，而不用东一块西一块搞得很混乱，最后CompositionAPI拥有更好的类型推断，对ts支持友好。

编码风格方面：

性能方面：

mutation用于修改stateaction用于提交一个mutation，而且action可以包含异步操作

实现Store，可以定义Store类，构造函数接受选项options，设置属性state对外暴露状态，提供commit和dispatch修改属性。这里需要设置state为响应式对象，同时将Store定义为一个Vue插件(install方法)。

commit可以获取用户传入mutations并执行它，这样可以按用户提供的方法修改状态，dispatch类似，但是dispatch需要返回一个Promise给用户用于处理异步结果。