Vue面试题

女爷i 2022-12-22 11:17 228阅读 0赞

> **1.对MVVM的理解**

*  M：model层，在model层对数据进行操作和修改数据
 *  V：视图层
 *  VM：监听模型数据的改变和控制视图行为。相当于模型层和视图层的一个桥梁，起连接作用。

在MVVM模式下，View和Model进行交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model上，Model数据的变化也会立即反应到View上。

ViewModel通过数据双向绑定把View和Model连接起来，而View和Model之间的工作同步是完全自动的，无须别人干涉，因此开发者只关注业务逻辑，不需要动手操作DOM，不需要关注状态的同步问题，复杂的数据状态完全由MVVM管理。

> **2.生命周期：Vue实例从创建到销毁的过程。从开始创建，初始化数据，编译模板，挂在DOM->渲染，更新->渲染，销毁等一些列过程。**

beforeCreate(创建前）：只是单纯的创建$el和data,数据观测和初始化时间还没有开始（只是单纯的创建$el和data）

created(创建后）：完成数据观测，属性和方法的计算，初始化事件（data已经初始化完成，$el还在创建中）

beforeMount(挂载前）:在挂在开始之前被调用，相关render()函数首次被调用。实例已完成一下配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。（vue$el和data都已经初始化完成，但是data还是挂载之前虚拟的DOM节点，data尚未替换，此时还没有挂载在html页面上）

mounted（载入后）：在el被创建的vm.$el替换，并挂载到实例上去之后调用。实例已完成以下的配置。用上面编译好的html内容替换$el属性指向DOM对象。完成模板的html渲染到html页面上。此时是ajax交互过程。（用真实数据替换虚拟DOM）

beforeUpdate(更新前）：重新渲染之前触发。（data数据已经发生改变，但是没有渲染）

update(更新后）：数据已经更改完成，DOM也重新render完成，更改数据会陷入死循环（data数据已经发生改变，并将旧数据代替新数据）

beforeDestory(销毁前）：在实例销毁之前调用。实例仍然完全可以用。

destoryed(销毁后）：在实例销毁之后调用。调用后，所有事件监听器会被移除，左右子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

**生命周期的作用？**生命周期有很多钩子函数，通过钩子函数让我们在控制整个Vue实例过程中更容易形成好的逻辑。

**生命周期总共有几个阶段？**8个，创建前/后；载入前/后；更新前/后；销毁前/后

**第一次页面加载会触发几个钩子函数？**beforeCreate,created,beforeMounte,mounted

**Dom渲染在哪个生命周期完成？**mounted

**描述每个周期具体适合的那些场景？**

*  beforeCreate:可以加loading事件，在加载实例的时候触发
 *  created:初始化事件写在这个里面，异步请求调用
 *  mounted:挂载元素，获取DOM节点
 *  beforeDestory:可以停止确认弹窗事件
 *  nextTick():改变DOM元素，nextTick()方法延时调用函数来渲染视图

changeText:function(){
          let that = this;
          that.testMsg = '修改后文本值'
          this.$nextTick(function(){
            let domTxt = document.getElementById('h').innerText;
            console.log(domTxt)
            if(domTxt === '原始值'){
                console.log('文本data被修改的内容没有')
            }else{
                console.log('文本data被修改后dom内容被马上更新了')
            }
    })
    }

** created和mounted的区别：**

*  created在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
 *  mounted在模板渲染成html后调用，通常初始化页面完成，在对dom节点进行一些需要的操作

> **3.VUE绑定的原理**

采用数据劫持发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter/getter，在数据发生变化时发布消息给订阅者来触发相应的监听回调。

> **4.组件间参数的传递（Vue组件传值）**

父子关系组件（父传子props；子传父$emit）

// 父组件代码
    <template>
        <div class="home">
            <hello-world :newMsg='msg' @change="handle"></hello-world>
        </div>
    </template>
    <script>
    import HelloWorld from '@/components/HelloWorld.vue'
    export default{
        name: Home',
        data(){
            return {
                msg: '你好'
            }
        },
        components: {HelloWorld},
        methods: {
            handle(msg){
                this.newMsg = msg
            }
        }
    }
    </script>
    
    // 子组件代码
    <template>
        <div>
            <h1>{
       {newMsg}}</h1>
        </div>
    </template>
    <script>
    export default{
        name: 'HelloWorld',
        props: {newMsg: String},
        data(){
            msg: 'Welcome to Vue'
        },
        created(){
            this.$emit('change',this.msg)
        }
    }
    </script>

利用ref属性传值：在父组件中可以直接通过ref拿到子组件中的值

// 子组件
    <script>
    export default{
        name: 'HelloWorld',
        data(){
            return {msg: 'welcome you'}
        }
    }
    </script>
    // 父组件
    <template>
        <div class="home">
            <hello-world ref="son"></hello-world>
        </div>
    </template>
    <script>
        export default{
            name: 'Home',
            mounted(){
                console.log(this.$ref.son.msg)
            },
            components: {HelloWorld}
        }
    </script>

兄弟组件（暂时先不了解）

页面关系组件 （vuex状态管理库）

[https://www.cnblogs.com/mica/p/10757965.html][https_www.cnblogs.com_mica_p_10757965.html]

应用场景：组件之间的状态，单页面应用

*  首先创建一个store文件夹，并且建立一个store.js文件
 *  将vue和vuex引入store.js,别忘记Vue.use(Vuex)
 *  在main.js中引入store

1.  state:状态库---从页面中获取store数据（this.$store.state.count）
2.  mutations:同步方法，相当于组件内的computed属性，接收state进行改装---改变store中的值（this.$store.commit('addCount',1)）
3.  actions：只针对mutations进行接收并封装--改变mutaions中的值（this.$store.dispatch（‘getAddCount’,1)）
4.  getters:过滤器，对state调用前的状态进行修改
5.  modules：模块，处理store中，分工更清晰

> **5.Vue页面之间传值**

*  使用vue-router通过跳转链接传参数
 *  使用本地缓存
 *  使用vue数据管理传值

> **6.Vue的路由实现：hash模式和history实现**

*   hash虽然在URL中，但是不被URL包括在HTTP请求中；用来指导浏览器动作，对服务器安全无用，hash不会重加载页面。（URL：http://www.abc.com/\#/hello **hash 的值为 \#/hello**）
 *  history模式下，前端URL必须和实际向后端发请求的URL一致，如果不一致，就会返回404.（**[http://www.xxx.com/items/id][http_www.xxx.com_items_id]**）

> **7.Vue的优点是什么？如何实现性能优化？**

*  可重用性：将公共部分抽取成组件
 *  使用了双向绑定原理
 *  性能优化：

根据不同场景选择合适的条件：1.v-if和v-show                     2.computed和watch                   3.对图片进行压缩

> **8.路由之间的跳转**

声明式：<router-link to='home'> ---默认解析成<a>标签

编程式：this.$router.push('/home')---两种参数：对象和字符串

this.$router.go(-1);;;this.$router.back();;;this.$router.replace

> **9.组件传值.sync   **

> **10.如何让css在当前组件中起作用**

就在当前组件内使用，当前组件<style>写成<style  scoped>

> **11.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？**

在route目录下的index.js文件中，对path属性上加/:id

接收参数：params.id

> **12.vue-router有哪几种导航钩子？3种**

全局导航钩子：router.beforeEach(to,from,next)

作用：

*  跳转前进行判断拦截
 *  to:目标路由对象
 *  from:离开当前路由
 *  next(）调用参数，控制页面路由跳转

组件内钩子函数：beforeRouteEnter,beforeRouteUpdate,beforeRouterleave（导航离开组件对应的路由调用）

单独路由独享组件：beforeEnter

[https://www.cnblogs.com/goloving/p/9211295.html][https_www.cnblogs.com_goloving_p_9211295.html]

> **13.Vue中钩子函数：生命周期钩子和路由守卫钩子（如上）**

> **14.说出至少4种vue当中的指令和他的用法？**

*  v-if:条件判断
 *  v-model：数据绑定
 *  v-on：事件绑定
 *  v-for：循环
 *  v-show ：是否显示
 *  v-bind(冒号就是v-binv的缩写，是为了动态数据绑定）

注意:

*  加上了冒号是为了动态绑定数据，等号后面可以写变量。
 *  如果不使用冒号，等号后面就可以写字符串等原始类型数据。这时就无法进行动态绑定数据了。

> **15.vue-loader是什么？用途是什么？**

文件加载器：提取css代码

> **16.为什么使用key?**

key作为唯一标识，当相同标签名的元素切换时，需要通过key特性设置唯一的值来标记让vue区分它们，否则Vue只会为了效率替换相同标签的内容

> **17.说出vue.cli项目中src目录每个文件夹和文件的用法？**

*   assets文件夹放静态资源
 *  components放组件
 *  router是定义路由相关配置
 *  view视图
 *  app.vue是一个应用主组件
 *  main.js是入口文件

> **18.vue.cli中怎么使用自定义组件？有遇到过哪些问题吗？**

*  在components目录新建你的组件文件（smithButton.vue），script一定要export default \{ 
 *  在需要用的页面（组件）中导入：import smithButton from ‘…/components/smithButton.vue’ 
 *  注入到vue的子组件的components属性上面,components:\{smithButton\}
 *  在template视图view中使用，

注意：命名需要注意smithButton命名，使用的时候则smith-button。

> **19.active-class是哪个组件的属性？**

vue-router模块的route-link,用来选中切换样式

> **20.keep-alive**

Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染

>  **21.绑定class数组的用法**

*  对象方法：v-bind:class="\{name:'shanshan',sex: '女'\}" 
 *  数组方法：v-bind:class="\[class1,class2\]"
 *  行内：v-bind:style"\{color:color,fontSize:fontSize+'px'\}"

> **26.计算属性和watch的区别**

*  computed:监听值，计算出一个新属性
 *  get:读取当前属性值，根据计算并返回新的属性值
 *  set:监听当前属性值的变化，当属性值变化时，更新相关性数据

// 计算一个全名，fullName不可以在data中定义
    data:{
        firstName: 's',
        lastName: 'ss'
    },
    computed:{
        fullName:{  
            get(){
                retrun this.firstName + this.lastName
            },
            set(val){
                this.firstName = val[0]
                this.lastName = val[1]
            }
        }
    }

[https_www.cnblogs.com_mica_p_10757965.html]: https://www.cnblogs.com/mica/p/10757965.html
[http_www.xxx.com_items_id]: http://www.xxx.com/items/id
[https_www.cnblogs.com_goloving_p_9211295.html]: https://www.cnblogs.com/goloving/p/9211295.html