面试题

作者: _韩小妖 | 来源:发表于2022-10-19 16:56 被阅读0次

    1、vuex刷新页面后数据不能保存?

    因为store里的数据是保存在运行内存中,当页面刷新时,页面会重新加载Vue实例,store里面的数据就会被重新赋值初始化。
    解决:将state存在localstorage或者sessionstorage中

    2、es6新特性

    let、const、剪头函数、默认参数、map、set、promise、class、
    模板字符串:${vraible}
    扩展运算符: ...
    解构赋值 :let {a,b,c} = {a:1,b:2,c:3}、

    3、vu3和vue2哪些不同

    场景一:父子组件数据传递

    1)在<script setup> props需要defineProps()这个宏函数来进行声明,它的参数和vue2 props的选项值是一样的

    2)vue2中子组件传递数据到父组件用emit来触发一个自定义事件来进行传递; 但emit无法在 <script setup>中使用,这时候需要使用defineEmits()

    3)在<script setup>中,组件的属性和默认方法都是私有的,父组件无法访问到子组件中的任何东西,除非子组件通过defineExpose 显示的暴露出去
    defineExpose({msg,change})

    场景二:组件之间双向绑定

    场景三:路由跳转,获取路由参数

    vue2中使用this.router 或 this.router进行路由的跳转和参数获取,
    在<script setup>中无法使用,
    需要使用vue-router提供的useRouter方法跳转路由;
    vue-router提供的useRoute方法获取参数;

    场景四:获取上下文对象

    vue3的setup中无法使用this获取上下文,可以通过getCurrentInstance方法获取上下文对象,这样就可以使用parent、refs等
    `
    以下两种方法都可以获取到上下文对象

    const { ctx } = getCurrentInstance()
    const { proxy } = getCurrentInstance()
    `

    场景五:插槽的使用

    vue3中通过v-slot获取模板的位置,同时获取插槽的数据

    场景六:缓存路由组件

    缓存一般的动态组件vue2和vue3都是使用 KeepAlive 包裹 Component,但缓存路由组件,Vue3需要节后插槽一起使用

    场景七:逻辑复用

    vue2 用mixins ,但mixin会使数据来源不明,引起命名冲突;
    vue3 更推荐全新Compositon Api

    场景八:生命周期

    1)vue3中的生命周期都以on开头,并且需要在组件中手动导入
    2)vue3取消了beforeCreate和created,如果需要在组件创建前注入逻辑,直接在<script setup>中编写同步代码就可以了
    3)组件卸载的钩子名称有变化,beforeDestroy 改为 onBeforeUnmount
    destroyed改为onUnmonted

    场景九:全局API

    vue2是在构造函数的原型对象上添加的Vue.prototype.$axios = axios;
    vue3需要在app上添加:app.config.globalProperties.$axios = axios

    场景十:与TypeScript结合使用

    <script setup lang="ts">

    相关文章

      网友评论

          本文标题:面试题

          本文链接:https://www.haomeiwen.com/subject/idyezrtx.html