• VUE面试题


    1.使用vue控制元素显示隐藏方式

      解:1.V-if,v-if-else控制DOM的删除和添加,不同于v-show对DOM的显示和隐藏

    一:v-show
    .控制元素显示,通过display:none控制显示
    .语法:v-show="变量或者表达式"
    .如果变量或者表达式为true,会显示标签,否则隐藏
    二:v-if
    .v-if控制标签显示
    .语法:v-if="变量或者表达式"
    .v-if通过控制标签是否删除显示,v-if有性能优势

    1. 代码示例:
    2. <template>
    3. <div>
    4. <h1 v-show="age >= 18">年满18岁才能看到以下内容</h1>
    5. <hr>
    6. <h1 v-if="age >= 18">年满18岁才能看到以下内容</h1>
    7. </div>
    8. </template>
    9. <script>
    10. export default {
    11. data() {
    12. return {
    13. age: 1,
    14. };
    15. },
    16. methods: {},
    17. };
    18. </script>

    三:v-if-else
    .v-if可以和v-else搭配,用来条件控制显示
    .v-if和v-else一定要是相邻元素
    .v-if和v-else-if还有v-else可以一起搭配,实现多个条件判断
    .v-show不可以和v-else搭配使用

    1. <template>
    2. <div>
    3. <h1 v-if="age >= 18">来吃榴莲</h1>
    4. <h1 v-else>来吃甜甜圈</h1>
    5. <h1 v-if="age < 18">甜甜圈</h1>
    6. <h1 v-else-if="age < 60">枸杞泡水</h1>
    7. <h1 v-else-if="age < 80">脑白金</h1>
    8. <h1 v-else-if="age < 100">冬虫夏草</h1>
    9. <h1 v-else>灵丹妙药</h1>
    10. </div>
    11. </template>
    12. <script>
    13. export default {
    14. data() {
    15. return {
    16. age: 18,
    17. } ;
    18. },
    19. methods: {},
    20. };
    21. </script>

    2.对于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来统一管理。

    3.Vue实现双向数据绑定

    Vue实现数据双向绑定主要是:采用数据挟持结合发布者-订阅者模式的方式,通过Object.defineProperty()来挟持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调。当把一个普通Javascript对象传给Vue实例来作为它的data选项时,Vue将遍历它的属性,用Object.defineProperty将它们转化为getter/setter.但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化。

    Vue的数据双向绑定将MVVM作为数据绑定的入口,整合Observer,Compile和Watcher三者,通过Observer来监听自己的model的数据变化,通过·Compile来解析编译模板指令(vue中是用来解析{{ }}),最终利用watcher搭起observer和Compile之间的通信桥梁,达到数据变化-->视图更新;视图交互变化(input)--》数据model变更双向绑定效果。

    4.Vue组件间的参数传递

    1.父组件与子组件传值

    父组件传给子组件:子组件通过props方法接收数据,子组件传给父组件:$emit方法传递参数

    2.非父子组件间的数据传递,兄弟组件传值

    eventBus就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。

    3.Vue的生命周期

    beforeCreate(创建前) 在数据观测和初始化事件还未开始

    created(创建后)完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来

    beforeMount(载入前)在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

    mounted(载入后) 在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。

    updated(更新后) 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

    destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

    1.什么是Vue生命周期?

    Vue实例从创建到销毁的过程,就是生命周期。从开始创建,初始化数据,编译模板,挂载Dom--》渲染,更新--》渲染,销毁等一系列过程,称之为Vue的生命周期。

    2.Vue生命周期的作用是什么?

    它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程中更容易形成好的逻辑。

    3.Vue生命周期总共有几个阶段?
       答:它可以总共分为8个阶段:创建前/后,载入前/后。更新前/后,销毁前/销毁后。
        
     4.第一次页面加载会触发哪几个钩子?
       答:会触发下面这几个beforeCreate,created,beforeMount,mounted.


     5.DOM渲染在哪个周期中就已经完成? 答:DOM渲染在mounted中就已经完成了。

    6.绑定class的数组用法
        .对象方法 v-bind:class="{'orange':isRipe,'green':isNotRipe}"
        .数组方法 v-bind:class="{class1,class2}"
        .行内 v-bind:style="{color:color,fontSize:fontSize+'px'}"
        7.计算属性computed和监听watch的区别
        计算属性是自动监听依赖值的变化,从而动态返回内容,监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些事情。
        所以区别来源于用法,只是需要动态值,那就用计算属性;需要知道值的改变后执行业务逻辑,才用watch,
        用反或混用虽然可行,但都是不正确的用法。
        1.computed是一个对象时,它有哪些选项? 有get和set两个选项
        2.computed和method有什么区别?methods是一个方法,它可以接受参数,而computed不能,computed是可以缓存的,methods不会
        3.computed是否能依赖其他组件的数据?computed可以依赖其他computed,甚至是其他组件的data
        4.watch是一个对象时,它有哪些选项? handle deep是否深度immeditate是否立即执行。
            总结:当有一些数据需要随着另外一些数据变化时,建议使用computed。 当有一个通用的响应数据变化的时候,要执行一些业务逻辑或异步操作的时候建议使用watcher。
        8.Vue的路由实现:hash模式和history模式
            hash模式:在浏览器中符号"#",#以及#后面的字符称之为hash,用window.location.hash读取;特点:hash虽然在url中,
            但不被包括在http请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。hash模式下,仅hash符号之前的
            内容会被包含在请求中,如http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误。
            history模式:history采用html5的新特性;且提供了两个新方法:pushState(),replaceState()可以对浏览器历史记录栈
            进行修改,以及popState事件的监听到状态变更。histroy模式下,前端的url必须和实际向后端发起请求的url一致,
            如http://www.xxx.com/items/id。后端如果缺少对/item/id的路由处理,将返回404错误。
        9.事件修饰符?
            .绑定一个原生的click事件:加native.
            .其他事件修饰符: stop prevent self
            .组合键:click.ctrl.exact 只有ctrl被按下的时候才触发
        10.为什么组件中的data必须是一个函数,然后return一个对象,而new Vue实例里,data可以直接是一个对象?
            因为组件是用来复用的,JS里对象是引用关系,这样作用域没有隔离,而new Vue的实例,是不会被复用的。 因此不存在引用对象的问题。
    11. Vue.js的两个核心是什么?数据驱动和组件化
    12. Vue中key值的作用:使用key来给每个节点做一个唯一标识
        key的作用主要是为了高效的更新虚拟DOM. 另外Vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,
        其目的也是为了让vue可以区分它们,否则Vue只会替换其内部属性而不会触发过渡效果。
    13.v-for与v-if的优先级?v-for的优先级比v-if高
    14.怎么定义vue-router的动路由?怎么获取传过来的值?
        动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:{path:'/details/:id',name:"Details",components:Details }
        访问details目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。当匹配到/details下的路由时,参数值会被
        设置到this.$route.params下,所以通过这个属性可以获取动态参数 this.$route.params.id
    15.vue-router有哪几种路由守卫?
        全局守卫:beforeEach;  后置守卫:afterEach;  全局解析守卫:beforeResolve;  路由独享守卫:beforeEnter
        
    16.$route和$router的区别是什么?
        .$router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法,钩子函数等。
        .$route是路由信息对象或跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,
            fullPath,matched,name等路由信息参数。
            
    17.vue-router响应路由参数的变化

        //监听当前路由发生变化的时候执行
        watch:{
            $route(to,from){console.log(to.path)//对路由变化做出响应}
        }
        .(1)用watch检测 (2)组件内导航钩子函数 beforeRouteUpdate(to,from,next){
            //to do somethings
        }
        
    18.vue-router传参
        .使用Params:只能使用name,不能使用path
        .参数不会显示在路径上
        .浏览器强制刷新参数会被清空
        
        this.&router.push({
            name:Home,
            params:{
                number:1,
                code:'999'
            }
        })
       

  • 相关阅读:
    iOS 消息推送面试题
    超牛逼的 Feed 流系统设计!
    社区老年人服务系统设计与实现(安卓APP+SSH后台+MYSQL)
    工业涂装行业的物联网解决方案
    整合mysql多个bool值字段,用&查询
    CSDN21天学习挑战赛第一天
    如何创建一个浏览器版的`Window11`
    线段树、树状数组模板(复制粘贴确实好用)
    浏览器事件机制详解
    项目质量管理全部精华看这篇就够了
  • 原文地址:https://blog.csdn.net/weixin_52014130/article/details/127422514