Vue知识点

Vue面试知识点1

1. vue全家桶包含哪些？
vue全家桶介绍：
vue（整体架构） +  vuex（状态管理） +  vue-router（路由） +  vue_resource || axios（ajax请求） +  mint-UI(移动端UI框架库) || antd-vue(PC端UI框架库)
react全家桶介绍：
react（整体架构） +  redux || mobx（状态管理） +  react-router（路由） +  axios（ajax请求） +  antd || react-material || antd-model(UI框架库)
2. v-model是什么？怎么使用？vue中标签怎么绑定事件？
v-model是实现数据双向绑定指令（数据双向绑定指的是当数据发生变化的时候，视图也就发生变化；当视图发生变化的时候，数据也会跟着同步变化）；
在绑定的标签中使用的，绑定的数据来自data中；
绑定事件：<input @click=inp()/>
3. v-model的实现原理？
v-on：input v-bind：value；
底层原理：Object.defineProperty
4. vue的生命周期。
Vue的生命周期钩子函数介绍
vue生命周期共分为四个阶段
一：实例创建
二：DOM渲染
三：数据更新
四：销毁实例
共有八个基本钩子函数

• beforeCreate --创建前
  触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
  在此阶段可以做的事情：加loading事件

• created --创建后
  触发的行为：vue实例的数据对象data有了，$el还没有
  在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备

• beforeMount --渲染前
  触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换

• mounted --渲染后
  触发的行为：vue实例挂载完成，data.filter成功渲染
  在此阶段可以做的事情：配合路由钩子使用

• beforeUpdate --更新前
  触发的行为：data更新时触发

• updated —更新后
  触发的行为：data更新时触发
  在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

• beforeDestroy —销毁前
  触发的行为：组件销毁时触发
  在此阶段可以做的事情：可向用户询问是否销毁

• destroyed —销毁后
  触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
  在此阶段可以做的事情：组件销毁时进行提示
  5. 请至少说出4种在vue中使用的指令以及指令的用法

• v-if :判断是否隐藏 控制元素是否渲染到页面

• v-for：遍历对象 循环数据

• v-bind：属性绑定指令 简写为“：”

• v-model：数据的双向绑定

• v-cloak 解决插值表达式存在的闪动问题（一需要提供样式；二在插值表达式所在的标签添加v-cloak指令；背后的原理：先通过隐藏，再替换好值，最后显示最终的值）
  6. 请说出v-if和v-show的区别

• 相同的是：都可以控制元素显示隐藏

• 不同的是：v-if显示隐藏是将dom元素整个添加和删除，二v-show隐藏是为dom元素添加css样式display：none，dom元素还存在。

• v-if有更高的切换消耗；v-show有更高的初始渲染消耗

• 如果想实现频繁切换效果，v-show更合适
  7. active-class是哪个组件的属性？

• vue-router模块的router-link组件。
  8. vue嵌套路由怎么定义？

• 只需要我们在 VueRouter 的参数中使用 children 配置，这样就可以实现路由嵌套。

<template>
  <div id="app">
    <!-- 路由占位符 路由出口, 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>
</template>

main.js，路由的重定向，就会在页面一加载的时候，就会将home组件显示出来，因为重定向指向了home组件，redirect的指向与path的必须一致。children里面是子路由，当然子路由里面还可以继续嵌套子路由。

//导入vue
import Vue from 'vue'  
import VueRouter from 'vue-router'  
Vue.use(VueRouter)  
//引入两个组件 
import home from "./home.vue"  
import loginfrom "./login.vue"  
//定义路由  
const routes = [  
    { path: "/", redirect: "/home" },//重定向,指向了home组件  
    {  
        path: "/home", component: home,  
        children: [  
            { path: "/home/login", component: login}  
        ]  
    }  
]  
//创建路由实例  
const router = new VueRouter({routes})  
new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})

home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

<template>  
    <div>  
        <h3>首页</h3>  
        <router-link to="/home/login">  
            <button>显示</button>  
        </router-link>  
        <router-view></router-view>  
    </div>  
</template>

login.vue

<template>  
    <h3>登录页面</h3>  
</template>

现在的login组件就是home组件的子级路由了，如果还要嵌套继续在login中加children就可以了。