Vue面试知识点汇总

vue生命周期

什么是Vue生命周期？

        Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模版、挂载Dom ——>渲染、更新——>渲染、卸载等一系列过程，我们称这是Vue的生命周期

 Vue生命周期的作用是什么？

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

Vue生命周期总共有几个阶段？

      它可以总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/销毁后

第一次页面加载会触发哪几个钩子？

      第一次页面加载时会触发beforeCreate，created，beforeMount，mounted这几个钩子

DOM渲染在哪几个周期中就已经完成？

      DOM渲染在mounted中就已经完成了

每个生命周期适合哪些场景？

生命周期钩子的一些使用方法：

       beforecreate：可以在这加个loading事件，在加载实例时触发

       created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

       mounted：挂载元素，获取到DOM节点

       updated：如果对数据统一处理，在这里写上相应函数

       beforeDestroy：可以做一个确认停止事件的确认框

       nextTick：更新数据后立即操作dom

v-show与v-if区别：

v-show是css切换，v-if是完整的销毁和重新创建

使用频繁切换时用v-show，运行时较少改变时用v-if

v-if = ‘false’

v-if是条件渲染，当false的时候不会渲染

开发中常用的指令有哪些？

v-model：一般用在表达输入，很轻松的实现表单控件和数据的双向绑定

v-html：更新元素的innerHTML

v-show与v-if：条件渲染，注意二者的区别

        使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成

        v-show则是不管值为true还是false，html元素都会存在，只是css中的display显示或隐藏

v-on：click：可以简写为@click，@绑定一个事件。如果事件触发了，就可以指定事件的处理函数v-for：基于源数据多次渲染元素或模板块v-bind：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

语法：v-bind：title=“msg”简写：:title=“msg”

绑定class的数据用法

对象方法v-bind：class = “{‘orange’：isRipe，‘green’：isNotRipe}”

数组方法 v-bind：class= “[class1，class2]”

行内v-bind：style = “{color：color，fontSize：fontSize+‘px’}”

组件之间的传值通信

父组件给子组件传值

       使用props，父组件可以使用 props向子组件传递数据

//父组件vue模板father.vue:




//子组件vue模板child.vue:

子组件向父组件通信

       父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

//父组件vue模板father.vue:




//子组件vue模板child.vue:

  非父子，兄弟组件之间通信

         可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递 

//Bus.js可以是这样：
import Vue from ‘vue’
export default new Vue()

//在需要通信的组件都引入Bus.js:




//另一个组件也import Bus.js在钩子函数中监听on事件
import Bus from '../common/js/bus.js'
export default {
    data() {
        return {
            message:''
        }
    },
    mounted() {
        Bus.$on('on',(msg) => {
            this.message = msg
        })
    }
}

路由跳转方式

1、router - link标签会渲染为标签，咋填template中的跳转都是这种：

2、另一种是编程是导航，也就是通过js跳转。比如：router.push('/home')

MVVM

M - Model，Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑

V - View，View代表UI组件，它负责将数据模型转化为UI展现出来

VM - ViewModel，ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View和Model的对象，连接Model和View

computed和watch有什么区别？

computed：

1、computed是计算属性，也就是计算值，它更多用于计算值的场景

2、computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时才会重新调用对应的getter来计算

3、computed适用于计算比较消耗性能的计算场景

watch：

1、更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

2、无缓存性，页面重新渲染时值不变化也会执行

小结：

1、当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

2、如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

key

key是为Vue中的vnode标记的唯一id，通过这个key，我们的diff操作可以更准确、更快速

准确：

如果不加key，那么vue会选择复用节点(Vue的就地更新策略)，导致之前节点的状态被保留下来，会产生一系列的bug

快速：

key的唯一性可以被Map数据结构充分利用

组件中的data为什么是函数？

为什么组件中的data必须是一个函数，然后return一个对象，而new Vue实例里，data可以直接是一个对象？

//data
data() {
    return {
        message:"子组件"，
        childName：this.name
    }
}

//new Vue
new Vue({
    el:'#app',
    router,
    template:'',
    components:{App}
})

因为组件是用来复用的，JS里对象是引用关系，这样作用域没有隔离，而new Vue的实例，是不会被复用的，因此不存在引用对象问题

Class与Style如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

//对象语法

data:{
    isActive:true,
    hasError:false
}

//数组语法

data:{
    activeClass:'active',
    errorClass:'text-danger'
}

Style也可以通过对象语法和数组语法进行动态绑定：

//对象语法

data: {
    activeColor:'red',
    fontSize:30
}

//数组语法

data:{
    styleColor:{
        color:'red'
    },
    styleSize:{
        fontSize:'23px'
    }
}

vue的单项数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解

额外的，每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器的控制台中发出警告。子组件想修改时，只能通过$emit派发一个自定义事件，父组件接收到后，由父组件修改

有两种常见的试图改变一个prop的情形：

这个prop用来传递一个初始值；这个子组件接下来希望将其作为一个本地的prop数据来使用

在这种情况下，最好定义一个本地的data属性并将这个prop用作其初始值：

props:['initialCounter'],
data:function() {
    return {
        counter:this.initialCounter
    }
}

 

这个prop以一种原始的值传入且需要进行转换

在这种情况下，最好使用这个prop的值来定义一个计算属性

props:['size'],
computed: {
    normalizedSize:function() {
        return this.size.trim().toLowerCase()
    }
}

keep-alive

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：

1、一般结合路由和动态组件一起使用，用于缓存组件；

2、提供include和exclude属性，两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，其中exclude的优先级比include高；

3、对应两个钩子函数activated和deactivated，当组件被激活时，触发钩子函数activated，当组件被移除时，触发钩子函数deactivated。

v-model的原理

vue项目中主要使用v-model指令在表单input、textarea、select等元素上创建双向数据绑定，我们知道v-model本质上不过是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text和textarea元素使用value属性和input事件；

checkbox和radio使用checked属性和change事件；

select字段将value作为prop并将change作为事件；

以input表单元素为例：

// 相当于

如果在自定义组件中，v-model默认会利用名为value的prop和名为input的事件，如下所示：

//父组件


//子组件
{{value}}
props:{
    value:String
},
methods:{
    test1() {
        this.$emit('input','小红')
    }，
}，

nextTick()

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后，立即使用的这个回调函数，获取更新后的DOM

//修改数据
vm.msg = "Hello"

//DOM还未更新
Vue.nextTick(function() {
    //DOM更新
})

vue插槽

单个插槽：

当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的DOM位置，并替换掉插槽标签本身

命名插槽：

solt元素可以用一个特殊的特性name来进一步配置如何分发内容。

多个插槽可以有不同的名字。这样可以将父组件模板中slot位置和子组件slot元素产生关联，便于插槽内容对应传递

作用域插槽：

可以访问组件内部数据的可复用插槽（reusable slot）。在父级中，具有特殊特性slot-scope的