前端面试题 (五) :

站在月亮上Da  ...


什么是自定义指令,有哪些钩子函数及自定义指令的使用场景

        在某些情况下,你需要对普通的DOM元素进行底层的操作,这时候就会用到自定义指令

以下则是 自定义对象可提供的几个钩子函数 . . .

    bind:只调用一次,指令第一次绑定到元素时调用。

    insert:被绑定元素插入父节点时调用。

    update:所在组件的 VNode 更新时调用,但是可能发生在其子元素的 VNode 更新之前。

    componentUpdated:所在组件的 VNode 及其子元素的 VNode 全部更新时调用。

    unbind:只调用一次,指令与元素解绑时调用。


父组件获取异步动态数据传递给子组件,报错如何解决?

    1. 方法

                开始让子组件隐藏,当数据返回,再让子组件显示 (v-if)

    2.方法

                为无法读取属性设置defualt 默认值


vue-router有哪几种导航钩子

概念 :导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或取消

拦截方式

基本都有这三个 参数     to:去哪里  /  from:从哪里 /  next():是否跳转由它决定

    全局的

        beforeEach - 前置钩子函数

                参数to、from、next

                        使用场景 - 未登录去下单,跳转到登录页

        afterEach - 后置钩子函数

                参数to、from

                        使用场景 - 改变浏览器title

    单个路由独享的

            beforeEnter

                    同beforeEach

    组件级的

            beforeRouteEnter - 进入组件前

                    参数to、from、next

                            同beforeEach

                                    使用场景 - 进入这个组件前你要做什么初始化操作

            beforeRouteUpdate - 组件更新或改变时

                        参数to、from、next

                                同beforeEach

                                        使用场景 - 复用组件时(对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候)

            beforeRouteLeave - 离开组件时

                    参数to、from、next

                                同beforeEach

                                            使用场景 - 清除定时器等等


vue-router参数传递方法详述及区别

    query:( get)

      编程式  :  

                this.$router.push( {  path : '  /Home '  , query : { id  :  '666 ' } } )

    导航声明式 : 

                <router-link :to="{ path  :  '/ Hom '  ,  query : { id  :  '666 ' } }" ></router-link> 

    接收 : this.$route.query.id

        params:(post)

      编程式  :  

                this.$router.push( {  name: '  Home '  , params: { id  :  '666 ' } } )

    导航声明式 : 

                 <router-link :to="{ name:  'Home '  ,  params: { id  :  '666 ' } }" ></router-link>  

    接收 : this.$route.params.id




查看更多...

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容