0


面试必备:VUE面试题(含答案)

1、生命周期都有哪些,以及在这些生命周期中都做过哪些事情

beforeCreate创建之前;无法获取响应数据

created创建之后,可以在这加个loading事件和进行数据请求

beforeMount挂载前 ,在这结束loading,还做一些初始数据的获取,实现函数自执行

mounted挂载后 ,在这发起后端请求,拿回数据,配合路由钩子做一些事情

beforeUpdate数据更新之前

updated数据更新完成之后

beforeDestroy销毁之前 ,你确认删除XX吗?或者确认退出吗?

destroyed销毁之后 ,当前组件已被删除,清空相关内容,在这获取不到dom了


2、组件通信

父传子:props、$attrs/$listeners、$children、$root、provide/inject、$refs

子传父:$emit、$parent、

同级传:eventBus、vuex


3、页面通信

url拼接参数:"/a?a1=a1",接收页面:this.$route.query.a1

query传参:{path: 'a', query: {a2:'a2'}},接收页面:this.$route.query.a2

params传参:{name: 'a', params: {a3:'a3'}},接收页面:this.$route.params.a3

动态路由传参:/path/a4 ,接收页面:this.$route.params.id,路由:path: "/a/:id"


4、$set是干什么的

当数据变化但没有更新视图时使用,例如对象新增加的属性,数组新增加的成员

this.$set(obj,"key","value")

5、$nextTick是干什么的

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

例如:在created生命周期中想要操作dom就可以使用

this.$nextTick(()=>{ ... })可以在mounted之前的生命周期中操作dom


6、mixin是干什么的

提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
​
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

7、简单说说MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在 Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成 UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理 解就是一个同步View 和 Model的对象,连接Model和View。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也 会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起 来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关 注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维 护完全由 MVVM 来统一管理。


8、watch和computed的区别

Watch只能监听data中的数据变化,computed不需要,watch可以进行异步操作, computed不可以,computed不修改原始数据,通过return返回处理的数据,可以包含大 量的逻辑运算


9、v-if和v-show的区别

9.1、v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件为假,元素会被销毁);

9.2、v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多;

9.3、v-if 有更高的切换开销,v-show 切换开销小;

9.4、v-if 有配套的 v-else-if 和 v-else,而 v-show 没有

9.5、v-if 可以搭配 template 使用,而 v-show 不行


10、为什么不能v-for和v-if一起使用

v-for 优先级是比 v-if 高

永远不要把 v-if 和 v-for 同时用在一个元素上,带来性能方面的浪费(每次渲染都会先循环再进行条件判断)

如果避免出现这种情况,则在外层嵌套 template (页面渲染不生成dom节点),再这一层进行 v-if 判断,然后再内部进行 v-for 循环

<template v-if="isShow">
    <p v-for="item in items">
</template>

如果条件出现再循环内部,可通过计算属性 computed 提前过滤掉那些不需要显示的项

computed:{
    items:function(){
        return this.list.filter(function(item){
            return item.isShow
        })
    }
}

11、key的作用是什么,值写index和id哪个更好

key是为每个vnode指定唯一的id,在同级vnode的Diff过程中,可以根据key快速的进 行对比,来判断是否为相同节点, 利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快,指定key后,可以 保证渲染的准确性(尽可能的复用 DOM 元素。)赋值时应优先使用id。


12、过滤器怎么使用

// 全局使用
Vue.filter('globalFilter', function(){
    // ...
})
​
// 局部使用
filters: {
    formatMoney(num) {
        // ...
    },
}
<p>过滤器{{ money | formatMoney }}</p>

13、vuex五大核心分别是干什么的

state:Vuex中的基本数据,辅助函数mapState

getters:即从store的state中派生出的状态,有点类似计算属性,辅助函数mapGetters

mutations:是更改Vuex中的store中的状态的唯一方法,是同步的,辅助函数mapMutations

actions:Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。辅助函数mapActions

Modules:Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutations、actions、getters、甚至是嵌套子模块——从上至下进行类似的分割


14、如何调用mutations和actions的方法

调用mutations:$store.commit('mutations中定义的方法')
​
调用actions:$store.dispatch('actions中定义的方法')
​
actions调用mutations中的方法:
​
fn(context){
​
    context.commit('mutations中定义的方法');
​
}

15、vue-router常写属性都有什么

router-link常用属性:

to表示目标路由的链接

replace设置replace属性的话,当点击时,会调用roter.replace()而不是router.push(),所以导航后不会留下history记录,也就是不能回退到上一个页面

append设置append属性后,则在当前路径前添加基路径,例如,我们从/a导航到一个相对路径b,如果没有配置append,则路径为/b,如果配了,则为/a/b

tag 有时候想要<router-link>渲染成某种标签,例如

  • 。于是我们使用tag prop 类指定何种标签,同样它还是会监听点击,触发导航。

    active-class 设置链接激活时使用的css类名。默认值可以通过路由的构造选项linkActiveClass来全局配置, 默认值为 ‘router-link-active‘

    exact "是否激活",默认是false 。

    vue-router常用属性:

    path路由路径

    name路由名字

    component导入路由组件

    redirect路由重定向

    mode路由模式

    children子路由

    meta路由元信息


    16、路由守卫都有哪些以及都做过哪些事情,三个参数分别是干什么的

    全局守卫:beforeEach(登录拦截)、afterEach

    路由独享守卫:beforeEnter(部分路由的登录拦截)

    组件内守卫:beforeRouteEnter(权限管理)、beforeRouteUpdate、beforeRouteLeave

    路由全局解析守卫:beforeResolve(这里根据单页面name的指向不同,去访问的接口域名也不同)

    三个参数:to:去哪,from:从哪来,next:下一步

    当从a页面离开进入b页面时触发的生命周期
        1.beforeRouteLeave:路由组件的组件离开路由前钩子,可取消路由离开。
        2.beforeEach: 路由全局前置守卫,可用于登录验证、全局路由loading等。
        3.beforeEnter: 路由独享守卫
        4.beforeRouteEnter: 路由的组件进入路由前钩子。
        5.beforeResolve:路由全局解析守卫
        6.afterEach:路由全局后置钩子
        7.beforeCreate:组件生命周期,不能访问this。
        8.created:组件生命周期,可以访问this,不能访问dom。
        9.beforeMount:组件生命周期
        10.deactivated: 离开缓存组件a,或者触发a的beforeDestroy和destroyed组件销毁钩子。
        11.mounted:访问/操作dom。
        12.activated:进入缓存组件,进入a的嵌套子组件(如果有的话)。
        13.执行beforeRouteEnter回调函数next。
    

    17、hash和history模式的区别

    hash模式就是url后面写#锚点,由于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,所以人们在 html5 的 history 出现前,基本都是使用 hash 来实现前端路由的

    history模式:hash 能兼容到IE8, history 只能兼容到 IE10;hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。其次,hash 的传参是基于 url 的,如果要传递复杂的数据,会有体积的限制,而 history 模式不仅可以在url里放参数,还可以将数据存放在一个特定的对象中。history api可以分为两大部分:切换(back、forward、go)和修改(pushState

    ,
    

    replaceState)。history模式的问题:就怕刷新,


    18、说说常用指令有哪些,如何自定义指令

    v-if :如果是真则渲染节点,否则不渲染节点

    v-if、v-else 和 v-else-if :类似js的if...else判断语句

    v-show :通过display:none;控制元素显示隐藏

    v-for :循环,v-for的优先级高于v-if,不推荐一起使用

    v-bind :绑定属性,

    v-on :绑定事件,

    .stop 阻止事件继续传播

    .prevent 事件不再重载页面

    .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理,然后才交由内部元素进行处理

    .self 只当在 event.target 是当前元素自身时触发处理函数

    .once 事件将只会触发一次

    .passive 告诉浏览器你不想阻止事件的默认行为

    v-model :数据双向绑定

    .lazy 默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。

    .number 自动将用户的输入值转化为数值类型

    .trim 自动过滤用户输入的首尾空格

    v-text 和 v-html :用来更新textContent和输出真正的html结构

    v-pre :主要用来跳过这个元素和它的子元素编译过程。

    v-cloak :保持在元素上直到关联实例结束时进行编译。

    v-once :关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。

    // 自定义指令 v-focus
      directives: {
        focus: {
          // 指令的定义
          inserted: function(el) {
            el.focus();
          },
        },
      },
    

    19、vue插槽如何使用

    // 比如新建一个<base-layout> 组件
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
    // 使用插槽
    <base-layout>
      <template v-slot:header> // 或者 <template #header>
        <h1>Here might be a page title</h1>
      </template>
    ​
      <template v-slot:default>
        <p>A paragraph for the main content.</p>
        <p>And another one.</p>
      </template>
    ​
      <template v-slot:footer>
        <p>Here's some contact info</p>
      </template>
    </base-layout>
    ​
    // 作用域插槽,比如新建一个<current-user>组件
    <span>
      <slot v-bind:user="user">
        {{ user.lastName }}
      </slot>
    </span>
    // 使用插槽
    <current-user>
      <template v-slot:default="slotProps">
        {{ slotProps.user.firstName }}
      </template>
    </current-user>
    // 或者缩写
    <current-user v-slot="slotProps">
      {{ slotProps.user.firstName }}
    </current-user>
    ​
    ​
    

    20、vue单页应用优缺点

    优点:Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组 件,核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、 快速、模块友好。 只关心数据,不关心DOM。插件众多。维护状态方便。

    缺点:不支持低版本的浏览器,最低只支持到IE9;不利于SEO的优化(如果要支持 SEO,建议通过服务端来进行渲染组件);第一次加载首页耗时相对长一些;不可以使用浏 览器的导航按钮需要自行实现前进、后退。


    21、为什么做SSR,如何实现

    更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

    更快的内容到达时间,特别是对于缓慢的网络情况或运行缓慢的设备。通常 可以产生更好的用户体验。

    开发条件所限。浏览器特定的代码,只能在某些生命周期钩子函数中使用; 一些外部扩展库可能需要特殊处理,才能在服务器渲染应用程序中运行。

    涉及构建设置和部署的更多要求。与可以部署在任何静态文件服务器上的完 全静态单页面应用程序 (SPA) 不同,服务器渲染应用程序,需要处于 Node.js server 运行环境

    更多的服务器端负载

    通过后端返回html结构,在前端进行渲染展示,可使用Nuxt实现。


    22、如何实现路由懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。

    可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力

    减少首页加载用时。

    component: () => import('./Foo.vue')
    // 或者
    component: resolve => require(['@/components/home'],resolve)
    

    23、less如何设置全局样式

    // vue.config.js 中
    function addStyleResource(rule) {
      rule
        .use("style-resource")
        .loader("style-resources-loader")
        .options({
          patterns: [path.resolve(__dirname, "./src/assets/less/global.less")],
        });
    }
    // module.export 中 使用less
      css: {
        loaderOptions: {
          less: {
            lessOptions: {
              javascriptEnabled: true,
              globalVars: {
                primary: "#fff",
              },
            },
          },
        },
      },
    // less全局变量
      chainWebpack: (config) => {
        const types = ["vue-modules", "vue", "normal-modules", "normal"];
        types.forEach((type) =>
          addStyleResource(config.module.rule("less").oneOf(type))
        );
      },
    

    24、scoped的作用是什么

    scoped的意思是下面的样式的作用域就是当前这个组件,不会影响全局的样式


    25、$router和$route的区别

    $router是路由跳转,$route是路由信息


    26、data:{}和data(){return {}} 的区别

    因为不使用return包裹的数据会在项目的全局可见,会造成变量污染,使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。起到保护源数据的效果。


    27、axios的配置、封装、拦截和跨域

    // 跨域:在config文件夹中的index.js中的devServe中填写
    proxyTable:{ // cli3.0+  是在vue.config.js中配置proxy
        '/api':{
            Target:’代理服务器的目标地址’,
            changeOrigin: true,
            PathRewrite: {“^/api”:” ”}
        }
    }
    
    // 封装和拦截
        import axios from "axios";
    ​
        const http = axios.create({
          baseURL: "/api",
          timeout: 5000,
          headers: {
            "Context‐Type": "application/json",
          },
        });
        // 请求拦截
        http.interceptors.request.use(
          (res) => {
            // const token = sessionStorage.getItem('token') ? sessionStorag.getItem('token') : '';
            // if(token){给headers添加token}
            return res;
          },
          (err) => {
            return err;
          }
        );
        // 响应拦截
        http.interceptors.response.use(
          (res) => {
            // const code = res.code
            // if(code === 404){router.replace()}
            // if(code === 200){router.replace()}
            return res;
          },
          (err) => {
            return err;
          }
        );
    ​
        function get(url, params = {}) {
          return new Promise((resolve, reject) => {
            http
              .get(url, params)
              .then((res) => resolve(res))
              .catch((err) => reject(err));
          });
        }
    ​
        function post(url, params = {}) {
          return new Promise((resolve, reject) => {
            http
              .post(url, params)
              .then((res) => resolve(res))
              .catch((err) => reject(err));
          });
        }
    ​
        export { get, post };
    

    28、cli各版本构建项目的命令和启动命令

    创建项目: cli2.0:vue init webpack 项目名 cli3.0+:vue create 项目名 启动项目: cli2.0:npm run dev cli3.0+:npm run serve


    29、简单谈谈你对vue3.0的理解

    29.1、vue3.0和vue2.0最大的区别就是api从原来的options API 变成了 composition API + options API ,编写代码更灵活、复用率更高。

    29.2、vue3.0比vue2.0快2倍,Tree-shaking 更友好

    29.3、vue3.0支持TypeScript以及PWA

    29.4、数据双向绑定从Object.defineProperty变成了 new Proxy,不用再使用$set了

    29.5、其他方面的更改:支持自定义渲染器、支持 Fragment和 Protal组件等。


    30、简单说说双向绑定的原理

        // 发布订阅模式实现的数据依赖采集器
        class Dep {
          constructor() {
            this.subs = [];
          }
          addSub(sub) {
            this.subs.push(sub);
          }
          notify() {
            this.subs.forEach((sub) => sub.update());
          }
        }
        Dep.depTargets = null;
    ​
        class Watcher {
          constructor(data, getter) {
            this.getter = getter;
            this.value = this.get();
          }
          get() {
            Dep.depTargets = this;
            let value = this.getter();
            Dep.depTargets = null;
            return value;
          }
          update() {
            this.value = this.get();
          }
        }
    ​
        const typeTo = (val) => Object.prototype.toString.call(val);
    ​
        // 观察者模式监听所有属性的变化
        function defineReactive(obj, key, value) {
          let dep = new Dep();
          Object.defineProperty(obj, key, {
            set(newValue) {
              if (newValue === value) return;
              value = newValue;
              dep.notify();
            },
    ​
            get() {
              const topTarget = Dep.depTargets;
              dep.addSub(topTarget);
              return value;
            },
          });
        }
    ​
        function walk(obj) {//监听所有属性
          Object.keys(obj).forEach((key) => {
            if (typeTo(obj[key]) === "[object Object]") {
              walk(obj[key]);
            }
            defineReactive(obj, key, obj[key]);
          });
        }
    ​
        function observe(value) {
          if (typeTo(value) !== "[object Object]") return null;
          walk(value);
        }
    ​
        observe(this.data);
        new Watcher(this.data, () => {
          this.$mounte(this.el);
        });
    

    31、做过哪些vue的性能优化

    31.1、长列表性能优化:可以通过 Object.freeze 方法来冻结一个对象,一旦被冻结的对象就再也不能被修改了。

    export default {
      data: () => ({
        books: []
      }),
      async created() {
        const books = await axios.get("/api/books");
        this.books = Object.freeze(books);
      }
    };
    

    31.2、优化无限列表性能:如果应用存在非常长或者无限滚动的列表,那么需要采用“窗口化”的技术来优化性能,只需要渲染少部分区域的内容,减少重新渲染组件和创建 dom 节点的时间。window.requestAnimationFrame方法可以设置延迟加载的功能

        setTimeout(() => {
            // 插入十万条数据
            const total = 100000;
            // 一次20条,可根据性能问题自己调整
            const MAX_ONCE = 20;
            // 渲染数据需要的次数
            const loopCount = total / MAX_ONCE;
            let countOfRender = 0;
            let el = document.querySelector("ul");
            function add() {
              // 优化,不允许插入数据引起回流
              const fragment = document.createDocumentFragment();
              for (let i = 0; i < MAX_ONCE; i++) {
                const li = document.createElement("li");
                li.innerText = `${i} + ${Math.floor(Math.random() * total)}`;
                fragment.appendChild(li);
              }
              el.appendChild(fragment);
              countOfRender += 1;
              loop();
            }
    ​
            function loop() {
              if (countOfRender < loopCount) {
                window.requestAnimationFrame(add);
              }
            }
            loop();
          }, 0);
    

    32、vue的diff算法和虚拟dom

    虚拟DOM就是为了解决浏览器性能问题而被设计出来的。若一次操作中有N次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这N次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性添加到DOM树上,再进行后续操作,避免大量无谓的计算量。所以,用JS对象模拟DOM节点的好处是,页面的更新可以先全部反映在JS对象(虚拟DOM)上,操作内存中的JS对象的速度显然要更快,等更新完成后,再将最终的JS对象映射成真实的DOM,交由浏览器去绘制。

    vue的diff算法:只进行同层级比较,忽略跨级操作,从两头向中间进行对比。

    //diff时调用patch函数,patch接收两个参数vnode,oldVnode,分别代表新旧节点。
    function patch (oldVnode, vnode) {
        if (sameVnode(oldVnode, vnode)) {
            patchVnode(oldVnode, vnode)
        } else {
            const oEl = oldVnode.el
            let parentEle = api.parentNode(oEl)
            createEle(vnode)
            if (parentEle !== null) {
                api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl))
                api.removeChild(parentEle, oldVnode.el)
                oldVnode = null
            }
        }
        return vnode
    }
    // patch函数内第一个if判断sameVnode(oldVnode, vnode)就是判断这两个节点是否为同一类型节点
    function sameVnode(oldVnode, vnode){
      //两节点key值相同,并且sel属性值相同,即认为两节点属同一类型,可进行下一步比较
        return vnode.key === oldVnode.key && vnode.sel === oldVnode.sel
    }
    //也就是说,即便同一个节点元素比如div,他的className不同,Vue就认为是两个不同类型的节点,执行删除旧节点、插入新节点操作。这与react diff实现是不同的,react对于同一个节点元素认为是同一类型节点,只更新其节点上的属性。
    ​
    //对于同类型节点调用patchVnode(oldVnode, vnode)进一步比较
    patchVnode (oldVnode, vnode) {
        const el = vnode.el = oldVnode.el  //让vnode.el引用到现在的真实dom,当el修改时,vnode.el会同步变化。
        let i, oldCh = oldVnode.children, ch = vnode.children
        if (oldVnode === vnode) return  //新旧节点引用一致,认为没有变化
        //文本节点的比较
        if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
            api.setTextContent(el, vnode.text)
        }else {
            updateEle(el, vnode, oldVnode)
            //对于拥有子节点(两者的子节点不同)的两个节点,调用updateChildren
            if (oldCh && ch && oldCh !== ch) {
                updateChildren(el, oldCh, ch)
            }else if (ch){  //只有新节点有子节点,添加新的子节点
                createEle(vnode) //create el's children dom
            }else if (oldCh){  //只有旧节点内存在子节点,执行删除子节点操作
                api.removeChildren(el)
            }
        }
    }
    // 更新vnode:updateChildren
    function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
        var oldStartIdx = 0;
        var newStartIdx = 0;
        var oldEndIdx = oldCh.length - 1;
        var oldStartVnode = oldCh[0];
        var oldEndVnode = oldCh[oldEndIdx];
        var newEndIdx = newCh.length - 1;
        var newStartVnode = newCh[0];
        var newEndVnode = newCh[newEndIdx];
        var oldKeyToIdx, idxInOld, vnodeToMove, refElm;
    ​
        // removeOnly is a special flag used only by <transition-group>
        // to ensure removed elements stay in correct relative positions
        // during leaving transitions
        var canMove = !removeOnly;
    ​
        {
          checkDuplicateKeys(newCh);
        }
        // 如果索引正常
        while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
            // 当前的开始旧节点没有定义,进入下一个节点
          if (isUndef(oldStartVnode)) {
            oldStartVnode = oldCh[++oldStartIdx]; // Vnode has been moved left
            // 当前的结束旧节点没有定义,进入上一个节点
          } else if (isUndef(oldEndVnode)) {
            oldEndVnode = oldCh[--oldEndIdx];
            // 如果旧的开始节点与新的开始节点相同,则开始更新该节点,然后进入下一个节点
          } else if (sameVnode(oldStartVnode, newStartVnode)) {
         // 更新节点
            patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
            oldStartVnode = oldCh[++oldStartIdx];
            newStartVnode = newCh[++newStartIdx];
            // 如果旧的结束节点与新的结束节点相同,则开始更新该节点,然后进入下一个节点
          } else if (sameVnode(oldEndVnode, newEndVnode)) {
            patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
            oldEndVnode = oldCh[--oldEndIdx];
            newEndVnode = newCh[--newEndIdx];
            // 如果旧的开始节点与新的结束节点相同,更新节点后把旧的开始节点移置节点末尾
          } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
            patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
            canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm));
            oldStartVnode = oldCh[++oldStartIdx];
            newEndVnode = newCh[--newEndIdx];
            // 如果旧的结束节点与新的开始节点相同,更新节点后把旧的结束节点移置节点开头
          } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
            patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
            canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
            oldEndVnode = oldCh[--oldEndIdx];
            newStartVnode = newCh[++newStartIdx];
          } else {
              // 如果旧的节点没有定义key,则创建key
            if (isUndef(oldKeyToIdx)) { oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx); }
            idxInOld = isDef(newStartVnode.key)
              ? oldKeyToIdx[newStartVnode.key]
              : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx);
            // 如果没有定义index,则创建新的新的节点元素
            if (isUndef(idxInOld)) { // New element
              createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm);
            } else {
              vnodeToMove = oldCh[idxInOld];
              if (sameVnode(vnodeToMove, newStartVnode)) {
                patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue);
                oldCh[idxInOld] = undefined;
                canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm);
              } else {
                // same key but different element. treat as new element
                createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm);
              }
            }
            newStartVnode = newCh[++newStartIdx];
          }
        }
        // 如果旧节点的开始index大于结束index,则创建新的节点  如果新的开始节点index大于新的结束节点则删除旧的节点
        if (oldStartIdx > oldEndIdx) {
          refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
          addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
        } else if (newStartIdx > newEndIdx) {
          removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
        }
      }
    

    33、vuex页面刷新后数据丢失?和history模式刷新404问题?

    //   在页面加载时读取sessionStorage里的状态信息
    if ( sessionStorage.getItem('state') ) {
      this.$store.replaceState( Object.assign( {}, this.$store.state,
      JSON.parse(sessionStorage.getItem('state') ) ) )
    }
    ​
    //   页面刷新时将state数据存储到sessionStorage中
    window.addEventListener('beforeunload',()=>{
      sessionStorage.setItem('state',JSON.stringify(this.$store.state) )
    })
    ​
    // history模式刷新404问题   在vue.config.js中配置
    module.exports = {
        publicPath: '/',   //这个必须,引入静态资源需要从根路径引入,否则会找不到静态资源
        devServer: {
            // history模式下的url会请求到服务器端,但是服务器端并没有这一个资源文件,就会返回404,所以需要配置这一项
            historyApiFallback: {
                index: '/index.html' //与output的publicPath
            },
          },
    }
    

    34、Vue 开发中如何使用全局状态常量?你都用这个状态常量做什么事情

    比如最常见的全局状态常量就是process.env.NODE_ENV

    它的值可能是:production、development

    就是webpack.config.js中的mode。

     {
        mode: "",
        entry: "",
        output: {}
     }
    ​
     // 比如现在是开发模式,我就显示一个某某功能按钮。
    <button v‐if="process.env.NODE_ENV === 'develpment'">
    测试按钮
    </button>
    npm run serve 的时候看的见这个按钮
    npm run build 的时候看不见这个按钮
    

    35、动态路由

    通过addRoutes() 动态添加路由信息

  • 标签: 前端 面试 vue.js

    本文转载自: https://blog.csdn.net/xiaozgm/article/details/125677842
    版权归原作者 小赵爱吃烤串 所有, 如有侵权,请联系我们删除。

    “面试必备:VUE面试题(含答案)”的评论:

    还没有评论