精华内容
下载资源
问答
  • 转眼2019又要过去了,作为一名前端码农,又熬过一个没日没夜的年头,头发又少了不少,去年的学习计划一半也没完成,唉。。。现在为大家总结一下这一年面试的几家公司的关于前端面试题
  • 由于疫情原因,原本每年的“金三银四”仿佛消失,随之而来的是找工作的压力,这里给要面试的小伙伴们总结了到目前为止我遇到的前端面试题,仅供参考哦,第一次写博客,如有错误之处,还请指出。 一. vue方面 1.vue-...
  • 1. router-link 2. this.$router.push( (函数里面调用) 3. this.Srouter.replace() (用法同push) 4. this.$router.go(n) ....router-link 跳转前提是在router.js 中配置了要跳转到目的的to是要跳转要地方 ...

    1. router-link

    2. this.$router.push( (函数里面调用)

    3. this.Srouter.replace() (用法同push)

    4. this.$router.go(n)

    .区别:

    router-link 跳转前提是在router.js 中配置了要跳转到目的的 to是要跳转要地方 

     

    this.$router.push跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面

     

    this.$router.replace跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上个页面(就是直接替换了当前页面)

     

    this.$router.go(n)向前或者向后跳转n个页面,n可为正整数或负整数

    当n为0时就是强制刷新页面

    展开全文
  • 这时候可以使用通用的组件通讯方案:事件总线(event-bus) 按照我的习惯,我会将事件总线创建到 main.js 中,这个使用原理是将bus挂载到Vue原型上,这样就可以保证所有的组件都能通过 this.bus 访问到事件总线,从而通过...

    目录

    一, 简单介绍组件通信

    二, 详解传值方法

    1.父传子 props

    2.子传父 $emit

    3.跨组件通信 event-bus


    一, 简单介绍组件通信

            我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动

            我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值

            下面就来分别介绍一下 我常用的这三种传值方法

    二, 详解传值方法

            父子组件的确认方法:我将 B 组件import引入到 A 组件中,那么 B 就是 A 的子组件,A 就是 B 的父组件

    1.父传子 props

            简而言之,父传子就是父组件把数据传给子组件,具体就是如下,在子组件的props中定义自定义属性来待接收父组件的数据,有两种方法 如下:

            第一种,也是最推荐用的一种,以复杂类型的方式进行声明,这样存储的便是一个地址,可以和父组件的数据进行双向绑定,同步数据,虽然可以双向绑定,但是在Vue2.0中还是不可以直接在子组件中更改父组件的数据,需要用到子传父才行,这点等下会写到

            这里只是用 text 举个栗子,具体叫什么都可以哈,只是父子里面需要对应上相同

            这个 text 接收到数据后的使用方法和一般data中声明的变量一样,只是不能再子组件中改变他

    子组件中:        props 定义属性接收

    <template>
      <div>
        <h2>son组件</h2>
        <p>props:{{ text }}</p>
      </div>
    </template>
    
    <script>
    export default {
      // 在此处定义props
      props: {
        // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
        text: {
          type: String,    // type 是用来规定此属性接收到的数据的数据类型
          default: "未传递时默认的文字"    // 这个default是当这个 text 没有接收到传递的数据时的默认值
        }
      }
    }
    </script>
    

    父组件中:        标签内 传递数据

    <template>
      <div id="app">
        <!-- 
          这里的text就是子组件props里定义的text,这两个名字得一致
          并且传递的数据也要符合 type 规定的数据类型
          text就是传递字符串,:text就是传递动态数据
          -->
        <Son text="我是大娃 传给子啦" />
        <Son :text="wenzi" />
      </div>
    </template>
    
    <script>
    import Son from './components/son.vue';
    export default {
      data () {
        return {
          wenzi: '我是二娃 传给子啦'
        }
      },
      components: {
        Son
      }
    }
    </script>
    

            如上 虽然我的注释写的很清楚了,但是还是在介绍一下, <Son/> 是子组件的标签,在此标签的基础上书写 子组件props 定义的属性名,并且传递参数具体对应关系和效果如下:

            如上就是第一种我最常用的父传子,其实还有一种方法,但是我一般也不用,很不方便,也贴到下边了,这个是以数组方式声明

    export default {
      // 在此处定义props
      props: ['text']
    }
    </script>
    
    ​

     

    2.子传父 $emit

            刚刚说到了在 Vue2.0 子组件不能直接改父组件的数据,否则会报错,这个解决方法就是在子组件中发起一个 自定义事件 ,在父组件监听这个事件,并且定义一个函数来改变数据,具体操作如下:

    子组件:        发起一个自定义事件,等待父组件监听到执行函数

    <template>
      <div>
        <h2>son组件</h2>
        <p>props:{{ text }}</p>
        <button @click="changeTextFn">改变文字</button>
      </div>
    </template>
    
    <script>
    export default {
      // 在此处定义props
      props: {
        // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
        text: {
          type: String,    // type 是用来规定此属性接收到的数据的数据类型
          default: "未传递时默认的文字"    // 这个default是当这个 text 没有接收到传递的数据时的默认值
        }
      },
    
      methods: {
        // 按钮点击事件
        changeTextFn () {
          // 发起自定义事件,名字叫什么都行,第一个参数是事件名,之后再跟着的都是传递的参数
          this.$emit('changeFn', '我想变成三娃')
        }
      }
    }
    </script>
    

            我先在原有的代码上添加了一个<button>按钮,在点击调用的函数中,通过 $emit 来发起事件并且可以传递参数

    格式:        this.$emit('changeFn', '我想变成三娃') 

    格式:        this.$emit('自定义事件名', 传递的参数) 

     

    父组件:        行内监听子组件的 自定义事件名(函数上不用写参数,在 methods 中直接写形参就行)

    <template>
      <div id="app">
        <Son :text="wenzi" @changeFn="changeFn" />
      </div>
    </template>
    
    <script>
    import Son from './components/son.vue';
    export default {
      data () {
        return {
          wenzi: '我是二娃 传给子啦'
        }
      },
    
      components: {
        Son
      },
    
      methods: {
        // 监听子组件自定义事件
        changeFn (newText) {
          // 这里的形参接受到的就是子组件中 第二个参数传递的数值
          this.wenzi = newText
        }
      }
    }
    </script>
    

    对应关系和效果图如下:

     

     

     

    3.跨组件通信 event-bus

            如果两个组件的关系非常的复杂或者没有未产生直接联系,那么通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案:事件总线(event-bus)

            按照我的习惯,我会将事件总线创建到 main.js 中,这个使用原理是将bus挂载到Vue原型上,这样就可以保证所有的组件都能通过 this.bus 访问到事件总线,从而通过同一个事件总线监听同一个事件,具体原理和父子传参差不多,都是 $emit 传递数据, 只不过接收变成了$on 

            我这次以送礼物举例用了两个关系不大的组件 分别是 男组件女组件 (随便起的名)具体如下图:

    发送数据 男组件:   

        this.bus.$emit('自定义事件名',传递的参数) 

    <template>
      <div>
        <h1>男组件</h1>
        <button @click="sendGiftFn">送礼物</button>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          gift: '玫瑰花'
        }
      },
    
      methods: {
        sendGiftFn () {
          // 通过 bus 事件总线发起 自定义事件,并且传递参数(第一个是事件名,第二个开始是参数)
          this.bus.$emit('sendMessage', this.gift)
        }
      }
    }
    </script>
    

    接收数据 女组件:         

     this.bus.$on('监听的事件名',(e)=>{ e这个形参所接收的就是监听事件所携带的参数数据 }) 

    <template>
      <div>
        <h1>女组件</h1>
        <p>来自男组件的礼物:{{ info }}</p>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          info: ""
        }
      },
    
      created () {
        // e 就是 sendMessage 这个事件所传递的数据
        this.bus.$on("sendMessage", (e) => {
          this.info = e;
        });
      }
    }
    </script>
    
    <style>
    </style>

    具体效果如下:

     

    综上所述,就是我在工作中总结出来的一些组建通信的方法,希望您看到这里会有所收获

    展开全文
  • 总结vue前端面试题

    2020-10-27 15:52:46
    本人总结前端vue面试,包含vue的基础,以及vue的高级和组件话开发,和vue的2.0 版本,包含vue指令,插槽路由vuex等
  • 看了很多关于vue组件传值的文章,于是想把文章总结一下,把关于vue组件传值好好聊聊,欢迎大家指正。 组件之间传值主要分两种 1、父子组件:props方法、ref方法、children和parent方法、 emit方法 2、非父子组件:...
  • vue-router实现原理 ...在正常路径后跟一个 # 号,匹配 # 后边的路径为前端路由,通过window.onhashchange方法来操控路由改变的时候切换内容 2.history模式 H5新增的 history API,相对hash而言,不会显示#号,...

    vue-router实现原理

    vue-router提供三种路由模式
    1.hash模式
    默认模式,通过路径中的hash值来控制路由跳转,不存在兼容问题
    hash模式实现原理
    在正常路径后跟一个 # 号,匹配 # 后边的路径为前端路由,通过window.onhashchange方法来操控路由改变的时候切换内容
    2.history模式
    H5新增的 history API,相对hash而言,不会显示#号,但是需要服务器端配置
    history模式实现原理
    看起来与后端路由没有任何区别,在window.history这个对象中,包含浏览器的历史,而在HTML5中,新增了pushState和replaceState,通过这两个API可以改变url地址且不会发送请求,同时还有popstate事件,实现原理与hash相似,只不过因为没有了 # 号,所以刷新页面还是会向服务器发送请求,而后端没有对应的处理措施的话,会返回404,所以需要后端配合
    3.abstract模式
    abstract模式实现原理
    支持javascript的所有运行环境,常指Node.js服务器环境
    abstract模式是不依赖于浏览器环境的一种模式,它是VueRouter内部使用数组进行模拟了路由管理,在node环境,或者原生App环境下,都会默认使用abstract模式,VueRouter内部会根据所处的环境自行判断,默认使用hash模式,如果检测到没有浏览器API的时候,就会使用abstract模式

    Vue响应式原理

    当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty 将它们转为
    getter/setter并且在内部追踪相关依赖,在属性被访问和修改时通知变化。
    每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,
    之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

    SPA路由history刷新404问题

    • 在配置config里路径找不到 添加一个点
    • SPA 路由History模式

    刷新404,为什么,因为本地路径中没有这个真实资源存在,这些访问资源都是在js里渲染的。
    我们只需要在服务器配置如果URL匹配不到任何静态资源,就跳转到默认的index.html
    解决方案:在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html
    页面,这个页面就是你 app 依赖的页面。同时这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回
    index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。或者,如果是
    用 Node.js 作后台,可以使用服务端的路由来匹配 URL,当没有匹配到路由的时9候返回 404,从而实现后退。

    展开全文
  • 前端框架vue面试题.pdf

    2021-07-16 17:44:14
    前段VUE面试题
  • 大厂前端面试题总结(Vue篇)

    千次阅读 2021-02-02 14:20:39
    大厂前端面试题总结(CSS篇) 大厂前端面试题总结(ES6篇) 大厂前端面试题总结(浏览器篇) 大厂前端面试题总结(性能优化篇) 大厂前端面试题总结(Web安全篇) 大厂前端面试题总结(JS理论篇) 大厂前端面试题...

    注: 目录带*号的是已经有答案的,没有带*的是暂时还没有答案的。
    双击标题可快速上下切换内容呦!
    本文内容持续更新中,如果您认为不错,还请点赞收藏下哦!

    系列文章

    目录

    VUE

    1、Vue有哪些指令

    • v-text:更新元素的textContent
    • v-html:更新元素的innerHTML注意:不会编译成Vue模板
    • v-show:根据表达式的结果,切换元素display: block or none
    • v-if:根据表达式的结果,选择性的渲染元素节点。注意:当和v-for一起使用时,v-for的优先级高
    • v-for:基于元素多次渲染元素或者模板快
    • v-on:缩写@,事件监听器,用在普通元素上,只能监听原生DOM事件,用在自定义元素上,可以监听字定义事件
    • v-model:在表单控件或者组件上创建双向绑定
    • v-bind:缩写:,动态绑定一个或者多个attribute,或者一个组件prop到表达式
    • v-slot:提供具名插槽或需要接收 prop 的插槽
    • v-else-ifv-else

    2、v-if和v-show有什么区别

    • v-show:仅仅控制元素的显示方式,将 display 属性在 block 和 none 来回切换;
    • v-if:会控制这个 DOM 节点的存在与否。

    当我们需要经常切换某个元素的显示/隐藏时,使用 v-show 会更加节省性能上的开销;当只需要一次显示或隐藏时,使用 v-if 更加合理。

    3、Vue响应式原理

    当一个 vue 实例创建时,vue 会遍历 data 选项的属性,用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖,在属性被访问和修改时通知变化。

    每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

    注意:在 Vue3.0 中使用的是 ES6 的 Proxy 代理 data 选项的属性,而不是Object.definedProperty

    4、Vue生命周期

    一、单组件

    它可以总共分为8个阶段:

    • beforeCreate(创建前):进行数据和方法的初始化
    • created(创建后):已经完成数据和方法的初始化
    • beforeMount(载入前):开始渲染 DOM
    • mounted(载入后):DOM 渲染完成
    • beforeUpdate(更新前):data 中的数据即将被更新
    • updated(更新后):data 中的数据更新完毕
    • beforeDestroy(销毁前):实例即将销毁
    • destroyed(销毁后):实例已被销毁
      在这里插入图片描述

    二、多组件

    TIP:直接上结论,参考文章

    1.创建与渲染

    创建实例是从外到内的,渲染是从内到外的:

    父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate ->子 created -> 子 beforeMount -> 子 mountd -> 父 mountd

    2.更新

    index 里面的 data 先被修改,先执行 before update 开始发出数据更新,更新的是 list , list 开始更新,list 把数据更新完,这时候 index 才能说更新完了。

    父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

    3.销毁

    同(update)。

    父 beforeDestory -> 子 beforeDestory -> 子 destoryed -> 父 destoryed

    5、Vue中Computed和Watch的使用和区别

    1、计算属性 computed 适用的情形

    我们可能会有这样的需求,一个数据属性在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性。

    2、监听器 watch 适当的情形

    watch 函数适用于,当数据发生变化时,执行异步操作或较大开销操作的情况。

    6、Vue和React的区别和选型

    vue

    1. API 设计上简单,语法简单,学习成本低
    2. 构建方面不包含路由和 ajax 功能,使用 vuex, vue-router
    3. 指令(dom)和组件(视图,数据,逻辑)处理清晰
    4. 性能好,容易优化
    5. 基于依赖追踪的观察系统,并且异步队列更新
    6. 独立触发
    7. v-model 实时渲染
    8. 适用于:模板和渲染函数的弹性选择
    9. 简单的语法及项目搭建
    10. 更快的渲染速度和更小的体积

    react

    1. 利用 jsx 创建虚拟 dom
    2. 是一种在内存中描述 dom 树状态的数据结构
    3. 函数式的方法描述视图
    4. 使用虚拟 dom 作为模板
    5. 程序片段
    6. 不好控制 dom
    7. 生命周期
    8. 服务端渲染:react 的虚拟 dom 的生成可以在任何支持js的环境生成的,所以可以在 node 环境生成,直接转为 string, 然后插入到 html 文件中输出浏览器便可
    9. 适用于:大型应用和更好的可测试性;同时适用于 web 端和原生 app
    10. 更大的生态圈

    优点

    React 伟大之处就在于,提出了 Virtual Dom 这种新颖的思路,并且这种思路衍生出了 React Native,有可能会统一 Web/Native 开发。在性能方面,由于运用了 Virtual Dom 技术, Reactjs 只在调用 setState 的时候会更新 dom,而且还是先更新 Virtual Dom,然后和实际 Dom 比较,最后再更新实际 Dom。这个过程比起 Angularjs 的 bind 方式来说,一是更新 dom 的次数少,二是更新 dom 的内容少,速度肯定快

    ReactJS 更关注 UI 的组件化,和数据的单向更新,提出了 FLUX 架构的新概念,现在React可以直接用 JS ES6 语法了,然后通过 webpack 编译成浏览器兼容的 ES5,开发效率上有些优势。

    React Native 生成的 App 不是运行在 WebView 上,而是系统原生的 UI,React 通过jsx生成系统原生的 UI,iOS 和 Android 的 React UI 组件还是比较相似的,大量代码可以复用维护 UI 的状态,Angular 里面使用的是 $scope,在 React 里面使用的是 this.setState。 而 React 的好处在于,它更简单直观。所有的状态改变都只有唯一一个入口 this.setState(),
    同构的 JavaScript 单页面 JS 应用程序的最大缺陷在于对搜索引擎的索引有很大限制。React 对此有了解决方案。React 可以在服务器上预渲染应用再发送到客户端。它可以从预渲染的静态内容中恢复一样的记录到动态应用程序中。
    因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行,预渲染你的应用有助于搜索引擎优化。

    缺点

    React 是目标是 UI 组件,通常可以和其它框架组合使用,目前并不适合单独做一个完整的框架。React 即使配上 redux 的组合,也不能称之一个完整的框架,比如你想用 Promise 化的 AJAX ?对不起没有,自己找现成的库去。而且第三方组件远远不如 Angular 多。React本身只是一个 V 而已,所以如果是大型项目想要一套完整的框架的话,也许还需要引入 Redux 和 Route 相关的东西。

    vue/react 共性

    1. 虚拟 dom 实现快速渲染
    2. 轻量级响应式组件
    3. 服务端渲染易于集成路由工具,打包工具及状态管理工具

    7、Vue自定义指令

    v-modelv-onv-bind 这一类的指令很经常使用,但有时候也不能满足我们的需求,比如我们想要通过 v-focus (这个指令是 vue 不提供的)实现表单的焦点获取,就会遇到无指令提供的窘况。

    这个时候我们可以自定义指令,有个地方要注意下,如果使用了未定义的指令,vue 会提出警告,程序依然会正常运行。

    • 比如定义一个全局可用的 focus 实现 input 选中,全局的东西如 JS 中的全局变量,一般不会用。
      在这里插入图片描述
    • 定义局部指令,局部指令只在组件内部有效,超出组件范围则无效,类似局部变量的作用。
      在这里插入图片描述
    • vue给自定义指令提供了几个函数钩子,用于实现自定义指令的功能
      • bind: 指令第一次绑定到元素时调用,
      • inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
      • update:被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。
      • componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
      • unbind: 指令与元素解绑时调用。

    8、xxxx

    9、vue的compiler是如何实现的

    参考链接

    10、Vue2.0中的$router和$route的区别

    • router 是 VueRouter 的一个对象,通过 Vue.use(VueRouter) 和 VueRouter 构造函数得到一个 router 的实例对象,这个对象中是一个全局的对象,它包含了所有路由许多关键的对象和属性。
      举例:history 对象

    • $router.push({path:‘home’}); 本质是向 history 栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录
      方法:
      $router.replace({path:‘home’});//替换路由,没有历史记录

    • route 是一个跳转的路由对象,每一个路由都会有一个 route 对象,是一个局部的对象,可以获取对应的 name,path,params,query 等

    我们可以从vue devtools中看到每个路由对象的不同

    11、Vue的nextTick实现原理以及应用场景

    参考文章

    12、Vue组件间通信

    • 父组件->子组件
      使用props,使用时直接:this.$refs.dataList 。

    1.创建子组件,在src/components/文件夹下新建一个Child.vue
    2.Child.vue的中创建props,然后创建一个名为message的属性在这里插入图片描述
    3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

    • 子组件->父组件 在这里插入图片描述
      父组件在使用子组件处用v-on监听,子组件通过$emit触发。

    1.在子组件中创建一个按钮,给按钮绑定一个点击事件
    在这里插入图片描述
    2.在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数在这里插入图片描述
    3.在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法在这里插入图片描述
    4.保存修改的文件,在浏览器中点击按钮

    • 非父子组件
      简单用bus;复杂用vuex
      第一步,在main.js中新new一个Vue对象
      
      var bus = new Vue()
      export default bus
      第二步:在组件中引入bus的引用
      
      import bus from '../../main'
      第三步:通过emit触发事件传值,在另一个组件中的mounted中用emit触发事件传值,
      在另一个组件中的mounted中用emit触发事件传值,
      在另一个组件中的mounted中用on监听事件从而获取值
      组件1:
      
      bus.$emit(‘clickPtest’,‘rrrrrrrrrrrrrr’)
      
      组件2:
      
      mounted () {
      bus.$on(‘clickPtest’,function (msg) {
      console.log(msg)
      })
      },
      

    13、Virtual Dom有哪些好处

    参考链接

    14、Vue3 Proxy解决了哪些问题

    参考链接

    15、Vuex数据流动过程

    参考链接

    16、xxxx(待填充)

    17、Vuex介绍

    在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理,个人的理解是全局状态管理更合适;简单的理解就是你在state中定义了一个数据之后,你可以在所在项目中的任何一个组件里进行获取、进行修改,并且你的修改可以得到全局的响应变更。

    核心概念1: State
    state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

    核心概念2: Getters
    我将getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    核心概念3: Mutations
    我将mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

    核心概念4: Actions
    actions 类似于 mutations,不同在于:actions提交的是mutations而不是直接变更状态,actions中可以包含异步操作, mutations中绝对不允许出现异步actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

    18、vue的路由实现

    hash模式

    在浏览器中符号“#”,#以及#后面的字符称之为hash,用window.location.hash读取;

    特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。

    hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

    history模式

    history采用HTML5的新特性;且提供了两个新方法:pushStatereplaceState可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。

    history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。

    Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果
    URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。”

    展开全文
  • 生命周期函数 又叫 钩子函数, 像它的名字一样,这也是个函数,与其他 methods 中定义的函数不同的是,Vue 中已经规定好了他的触发条件,而这些不同的触发条件就是 一个 Vue 文件从初始化到删除关闭必定经历的一些时间点...
  • 前端面试题-Vue

    千次阅读 2021-05-13 13:45:58
    前端面试题-Vue
  • 「2021」高频前端面试题汇总之Vue

    千次阅读 多人点赞 2021-01-19 16:09:59
    一、Vue 基础 1. Vue的基本原理 当一个Vue实例创建时,vue会遍历data选项的属性,用 Object.defineProperty(vue3.0使用proxy )将它们转为 getter/setter 并且在内部追踪相关依赖,在属性被访问和修改时通知变化。 ...
  • 2021前端面试题和笔试题——Vue

    万次阅读 多人点赞 2020-06-02 17:59:32
    对 MVVM 的理解 ...Vue 实现数据双向绑定的原理 采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发...
  • 说一下VueRouter 的 hash 模式和 history的区别 VueRouter 路由的存在是因为出于对单页面应用的开发,需要引入前端路由系统。它的实现实际上是利用浏览器自身的 hash 和 history 两种模式,核心就在于改变页面视图的...
  • 2021Vue前端面试题总结(含答案)

    千次阅读 2021-05-26 20:35:13
    面试官:JavaScript中什么是基本数据类型什么是引用数据类型?以及各个数据类型是如何存储的?⭐⭐⭐⭐⭐ 答: 基本数据类型有 Number String Boolean Null Undefined Symbol(ES6新增数据类型) bigInt ...
  • 35道常见的前端vue面试题

    万次阅读 多人点赞 2021-03-06 00:04:32
    来源 | https://segmentfault.com/a/1190000021936876今天这篇文章给大家分享一些常见的前端vue面试题。有一定的参考价值,有需要的朋友可以参考一下...
  • 2021 前端 VUE 面试题总汇

    千次阅读 多人点赞 2021-05-25 10:35:19
    一、vue面试题 1、vue的生命周期 beforeCreate:实例初始化之后;数据观测和事件配置之前调用,组件的选项对象还没有创建,el挂载和data都没有初始化,无法访问方法和数据。 created:实例创建完成之后调用;已经...
  • 2021前端面试题Vue

    2021-03-02 09:25:45
    Vue2框架核心,响应式原理 Vue3做了哪些优化改动,watch与watchEffect的区别,依赖注入,响应式相互转换 介绍完整的生命周期,render会在哪几个周期执行 自定义指令 插件开发 vue.use()背后的逻辑 data为什么...
  • 前端面试题Vue

    2021-05-20 09:33:25
    前端面试题Vue篇 核心问题概述: vue生命周期 生命周期是什么? 有什么内容? 你是怎么用的? vue生命周期是组件从创建到销毁的全部过程,在整个过程中会触发11个生命周期函数。 new Vue()初始化创建vue实例,...
  • 前端面试题整理(vue/js/css)

    千次阅读 2021-03-21 14:23:03
    产生的问题:闭包会导致内存泄漏 解决办法: 尽量避免,如果不能避免,使用完后手动释放,让变量等于null 断掉指引 举例:页面上li输出相对应的索引值,经典的面试题。 for (var i = 0; i ; i++) { lis[i].onclick =...
  • VUE面试题系列02,前端面试题

    千次阅读 2020-12-27 21:23:28
    VUE面试题系列02 16、动态路由传参2种方式params与query 1)、params 传 声明式: <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link> 编程式: $router.push({ name:...
  • 前端面试题vue 系列 v-if和v-show的区别 原理如下:优缺点:v-if:v-show:适应场景:v-if:v-show: v-if和v-show都是vue框架内部的指令。都可以实现代码块(元素)的在页面是否显示 原理如下: v-if:是根据条件...
  • 由于本人使用的技术是以vue为主,所以面试官相应的会以vue为开始提问 Vue生命周期 答:Vue有四个生命周期,分别是beforeCreatecreated (创建前后)beforeMountmounted(挂载前后)beforeUpdateupdated (更新前后)...
  • Vue-loader 是 Webpack 的加载模块,它使我们可以用 Vue 文件格式编写单文件组件。 单文件组件文件有三个部分,(模板、脚本和样式)。 vue-loader 模块允许 webpack 使用单独的加载模块 (例如 SASS 或 SCSS 加载器) ...
  • 前端面试题(适合vue

    万次阅读 多人点赞 2018-06-28 14:41:49
    面试题集合1、v-model是什么? vue中标签怎么绑定事件?答:v-model这个指令只能用在表单元素上,可以用他进行双向数据绑定。绑定事件:&lt;input @click=doLog() /&gt;2、mvvm框架是什么?说说对双向数据...
  • /*新建一个Vue实例作为中央事件总嫌*/ let event = new Vue(); /*监听事件*/ event.$on('eventName', (val) => { //......do something }); /*触发事件*/ event.$emit('eventName', 'this is a message.')

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,469
精华内容 6,987
关键字:

前端面试题vue

vue 订阅