vue生命周期是什么

Vue的生命周期是vue实例从创建到销毁的过程，在生命周期的不同阶段对应的钩子函数实现组件的数据管理和DOM渲染两大重要功能

`Vue`生命周期又分为8个阶段：

beforeCreate[创建前]

实例初始化之后,此时数据观测和初始化事件还未开始，不能获取DOM节点

created[创建后]

Vue实例已经创建;数据观察,属性和方法配置完成，但是$el不可用

beforeMount[载入前]

在挂载之前调用: 相关的render函数(模板)首次被调用, 完成编译模板, data里面的数据和模板生成html。注意此时还没有挂载html到页面上,但是vue挂载的根节点已经创建

mounted[载入后]

el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子(数据和DOM都已经渲染结束)

beforeUpdate[更新前]

vue遵循数据驱动DOM的原则；当Vue的任何数据，都会触发该函数,此钩子函数在服务器端渲染期间不被调用

updated[更新后]

此阶段DOM会和更改过的内容同步; 所以应该避免在此阶段更改状态，防止死循环

beforeDestroy[销毁前]

实例销毁前，实例仍然完全可用

destroyed[销毁后]

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

`Vue`生命周期的作用

精准的控制数据流及其对DOM的影响

`Vue`第一次加载页面会触发哪些钩子函数

beforeCreate、created、beforeMount、mounted

Vue每个周期具体适合哪些场景

Created进行数据异步获取, 初始化数据
mounted挂载DOM节点元素的获取
nextTick针对单一的事件更新数据后立即操作DOM
updated任何数据的更新,如果要做统一的业务逻辑处理使用此钩子函数
watch监听数据变化,并做相关业务处理

`created`和`mounted`的区别

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

`vue`获取数据在哪个周期函数

一般放在created钩子函数中，因为此时数据data方法methods均已初始化完成

`active-class`

active-class是vue-router模块的router-link组件的属性，用来做选中和未选中之间样式的切换

在vue-router中使用active-class有两种方法

直接在路由文件中配置linkActiceClass

export default new Router({
    linkActiveClass: 'demo-active-class'
})

在router-link中写入active-class

<router-link to="/demo" class="nav--demo" active-class="demo-active-class">DEMO</router-link>

`vue-router`怎么定义动态路由，怎么获取到传过来的值

动态路由通过:id的形式定义，获取的话通过{{$route.params.id}}获取

`vue-router`的导航钩子？

全局导航钩子

beforeEach

beforeResolve

afterEach

const router = new Router({
    // body ...
})
router.beforeEach((to, from, next) => {
    // body...
    next();
})
router.afterEach(route => {
    // body...
})

某个路由独享的导航钩子

beforeEnter

const routes = {
    path: '/',
    component: Home,
    beforeEnter(to, from, next) {
        //body...
        next();
    }
}
export default routes;

路由组件上的导航钩子

beforeRouteEnter

beforeRouteUpdate(2.2新增)

beforeRouteLeave

export default {
	name: 'home',
    data() {
        return {
            msg: 'hello world'
        }
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.msg = "message";
        })
    }
}

`$route` 和 `$router` 的区别

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter的构造函数得到一个router的实例对象,此对象是一个全局对象，它包含了所有的路由

route是一个跳转的路由对象，每一个路由都会有一个route对象,是一个局部的对象,可以获取对应的name,path,params,query等

`Vue`的优点

借用Vue官网的三个词易用、灵活、高效

Vue是一个轻量级的框架，提供简洁的模板语法, 双向数据绑定，组件化(html的封装和重用，在构建单页应用方面有独特的优势) ,视图数据结构分离(数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作),虚拟DOM,各种指令，过滤器

`v-show`和`v-if`指令的共同点和不同点

共同点

都是控制元素的显示隐藏

v-if判断是否加载，可以减轻服务器的压力，在需要加载，但有更高的切换开销，v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更为流程，担忧更高的初始渲染开销

特点

v-if 每次都会删除或创建元素

v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none属性

能耗

v-if较高的切换性能消耗

v-show较高的初始渲染消耗

使用

如果涉及频繁的切换，最好使用v-show

如果元素可能永远不会被显示出来被用户看到,则使用v-if

`<keep-alive></keep-alive>`的作用

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM

props

include字符串或正则表达式，只是匹配的组件会被缓存
exclude字符串或正则表达式，任何匹配的组件都会被缓存

vue中如何获取DOM

选择器获取

<template>
	<div id='box'></div>
</template>
<script>
    export default{
        mounted(){
            let box = document.querySelector('#box');
        }
    }
</script>

ref获取

<template>
	<div ref='box'></div>
</template>
<script>
    export default{
        mounted(){
            let box = this.$refs.box;
        }
    }
</script>

vue中`:key`的作用

如: v-for更新已渲染元素列表的时候，会采用就地复用的策略，会根据key值去判断某个值是否修改, 如果修改了重新渲染, 不然就复用之前的元素

也就是通过key值来提升渲染的效率

`v-on`可以同时绑定多个方法吗

可以

<input
    type="text"
    v-on="{
    input:onInput,
    focus:onFocus,
    blur:onBlur,}"
 >

`Vue $nextTick()`

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

将回调函数延迟在下一次DOM更新数据后调用简单就是: 当数据更新了，在dom渲染后，自动执行该函数

Vue.nextTick(callback)使用原理

vue是异步执行dom更新的，一旦观察数据变化，Vue就会开启一个队列，然后把在同一个事件循环当中观察到数据变化的watcher推送进这个队列，如果这个watcher被触发多次，只会推送到队列一次,这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新

当设置vm.somData = 'new value',DOM并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新才会进行必要的DOM更新.如果此时你想要根据更新的DOM状态去做某个事情，就会出现问题，为了在数据变化之后等待Vue完成更新DOM可以在数据变化之后立即使用Vue.nextTick(callback)这样回调函数在DOM更新完成就会调用。

Vue相关概念及解释(2)

Vue相关概念及解释(1)

vue生命周期是什么

Vue生命周期又分为8个阶段：

Vue生命周期的作用

Vue第一次加载页面会触发哪些钩子函数

Vue每个周期具体适合哪些场景

created和mounted的区别

vue获取数据在哪个周期函数

active-class

vue-router怎么定义动态路由，怎么获取到传过来的值

vue-router的导航钩子？

$route 和 $router 的区别

Vue的优点

v-show和v-if指令的共同点和不同点

<keep-alive></keep-alive>的作用