• vue面试题


    ---恢复内容开始---

    1.vue的生命周期并说明各个阶段的作用?

        beforeate:组件实例化的时候,做了一个初始化的操作,注意当前生命周期是组建还没有实例化完毕,因此你是访问不到当前组件的data或者methods属性和方法,以及其他生命周期函数      场景:初始化loading。

                created:创建后

          1.当created创建完毕后,会将data,methods身上的属性方法通过便利添加到vm实例身上。

          2.created生命周期函数中会将data身上所有的属性都添加上一个getter/setter方法,让data的属性具有响应式的特性。

          3.场景    当前生命周前函数中可以用开进行ajax数据的请求。

        beforeMouted:挂载前

                          1.数据和模板还未进行结合,可以对数据做最后的处理。

           2.在这个生命周期函数中是访问不到真实的DOM结构

        mouted :挂在后

           1.数据和模板结合生成真正的Dom树

             2在这个生命周期函数中我们可以通过this.$ref.属性名称    获取真正的DOM结构对DOM进行处理

             3.一般在这个生命周期函数中做方法的实例

                 beforeUpdate: 

          1.更新的数据和模板还未进行结合,可以对数据做最后的修改

          2.在当前生命周期函数中可以获取真正的DOM树结构

        updated:更新后

          1.更新的数据模板结合,在这个生命周期函数中我们可以获取到数据更新后的DOM结构,以及对数据的更新做一个监听。

        beforeDestory: 销毁前

          1.在当前生命周期函数中依旧是可以访问到DOM结构的

          2.使用的场景:做一些事件监听的解绑。

        destory:销毁后

          1.在当前生命周期函数中不能访问到真正的DOM结构,

          2.在这个生命周期中会将当前vm与DOM之间的关联全部断开

    2.mvvm  mvc 是什么,区别,原理

      MVC:m model 数据模型   v  view 视图模型    c controller  

            model 数据模型 负责对数据的获取,存放,即数据的管理者,可能存放在数据库,本地数据库中的数据,也可能ui填写的表单,即将上传服务器上面存放,它负责获取数据

         controller:不需要关心model如何拿到数据,只管调用。controller负责将model数据用view显示出来,话句话说就是在controller里面将model数据赋值给view

    3.父子传值,子向父传值

      

    组件传值 组件之间的通讯
    父传子
    传递:当父组件给子组件进行传值的时候,给子组件的标签上加一个自定义属性 值为需要传递的数据
    接收:在子组件内部通过props进行接受,props进行接收的方式有2中 一种是数组一种是对象
    数组接收:
    props:[自定义属性]

    对象接收:
    props:{
    自定义属性:{
    type:类型
    default:"默认值",
    required:必须传递
    }
    }


    子传父
    接收:当子组件给父组件进行传值的时候,首先给子组件标签绑定一个自定义方法,值为一个函数,
    注意这个函数不需要加() 传递过来的值通过这个函数就可以接收到

     
    传递:在子组件内部通过this.$emit("自定义方法名称",需要传递的参数) 来进行传递数据



    非父子组件传值
    一、公共的Vue实例

    1、首先需要让所有的子组件都拥有共同的一个事件订阅的方法
    Vue.prototype.Observer = new Vue();

    2、给需要传值的组件调用this.Observer.$emit("事件名称",传递的值)

    3、给需要接受的组件调用this.Observer.$on("事件名称",回调函数)

    二、EventBus(自己了解)


    三、手动封装$on $emit $off 事件订阅
    1、首先需要让所有的子组件都拥有共同的一个事件订阅的方法
    手动封装的Observer
    import Observer from "./Observer";
    Vue.prototype.Observer = Observer;
     
    2、给需要传值的组件调用this.Observer.$emit("事件名称",传递的值)

    3、给需要接受的组件调用this.Observer.$on("事件名称",回调函数)

    4.comouted

       computed:计算属性 通过属性计算的来的属性  是个对象

          1、computed里面的函数建议有返回值,不建议去修改data中的属性

          2、在使用computed中的方法时,是不需要加()

          3、computed是基于vue的依赖 当computed所依赖的属性发生改变的时候就会触发相对应的方法

          4、当computed中的函数执行完毕后,会进行缓存。当下次所依赖的属性没有发生改变的时候会从缓存中读取结果

           特点: 一个属性受多个属性的影响

    5.watch

        1、watch中的函数的名称必须是data中的属性

         2、watch中的函数会接收2个值 一个是新值一个是旧值

         3、watch中的函数是不需要调用的,当所依赖的属性发生了改变,那么就会调用相关的函数

         4、watch的属性监听当中尽量不要去修改data中的属性

         5、watch监听属性的时候只会监听对象引用是否发生了改变,而具体的属性值发生改变是不会进行监听的

        6、watch做属性监听的时候如果属性是一个对象,那么需要做深度监听,利用handler与deep进行深度监听

         7、watch初始化的时候是不会执行的,如果设置 immediate:true 则初始化的时候会执行一次

        8、watch不会对数组的修改(特殊情况)进行监听 特点: 一个属性影响多个属性

        场景: 1、模糊查询 2、网页的自适应 ....

  • 相关阅读:
    作业插入一个数值,按顺序排列
    元旦作业输入一批数字求最大最小值,用户输入一位整数,显示对应英文星期缩写,筛子游戏完善
    2018/12/29测试题
    JAVA循环的语法
    课后作业机票,赌骰子游戏,switch的使用实例
    Cadence之双击(DSN/brd)文件打开变新建文件的解决方法
    STemwin替换为MDK下的emwin
    Orcad原理图封装库批量编辑引脚时需要配合Excel进行制作时候需要操作(遇到无法复制粘贴操作)
    偶遇STM32 JTAG和SWD口(调试)被禁用无法下载,已经粗暴解决!
    Altium Designer之AD16在Win10系统下无法切换走线/布线模式的解决办法
  • 原文地址:https://www.cnblogs.com/manban/p/11318825.html
Copyright © 2020-2023  润新知