Vue知识点(面试常见点)

v-bind和v-model的区别

1.v-bind用来绑定数据和属性以及表达式,缩写为':'
2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起做用

什么是 mvvm?

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层表明数据模型,也能够在 Model 中定义数据修改和操做的业务逻辑;View 表明 UI 组件,它负责将数据模型转化成 UI 展示出来,ViewModel 是一个同步 View 和 Model 的对象。
在 MVVM 架构下,View 和 Model 之间并无直接的联系,而是经过 ViewModel 进行交互,Model 和 ViewModel 之间的交互是双向的, 所以 View 数据的变化会同步到 Model 中,而 Model 数据的变化也会当即反应到 View 上。
ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来,而 View 和 Model 之间的同步工做彻底是自动的,无需人为干涉,所以开发者只需关注业务逻辑,不须要手动操做 DOM, 不须要关注数据状态的同步问题,复杂的数据状态维护彻底由 MVVM 来统一管理。

mvvm 和 mvc 区别?

mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操做使页面渲染性能下降,加载速度变慢,影响用户体验。和当 Model 频繁发生变化,开发者须要主动更新到 View 。

vue 的优势是什么?

低耦合。视图(View)能够独立于 Model 变化和修改,一个 ViewModel 能够绑定到不一样的"View"上,当 View 变化的时候 Model 能够不变,当 Model 变化的时候 View 也能够不变。
可重用性。你能够把一些视图逻辑放在一个 ViewModel 里面,让不少 view 重用这段视图逻辑。
独立开发。开发人员能够专一于业务逻辑和数据的开发(ViewModel),设计人员能够专一于页面设计,使用 Expression Blend 能够很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的,而如今测试能够针对 ViewModel 来写。

请详细说下你对 vue 生命周期的理解?

答:总共分为 8 个阶段建立前/后,载入前/后,更新前/后,销毁前/后。
建立前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 尚未。
载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但仍是挂载以前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,可是 dom 结构依然存在

组件之间的传值?

父组件与子组件传值
//父组件经过标签上面定义传值
<template>
    <Main :obj="data"></Main>
</template>
<script>
    //引入子组件
    import Main form "./main"
    exprot default{
        name:"parent",
        data(){
            return {
                data:"我要向子组件传递数据"
            }
        },
        //初始化组件
        components:{
            Main
        }
    }
</script>

//子组件经过props方法接受数据
<template>
    <div>{{data}}</div>
</template>
<script>
    exprot default{
        name:"son",
        //接受父组件传值
        props:["data"]
    }
</script>
子组件向父组件传递数据
//子组件经过$emit方法传递参数
<template>
   <div v-on:click="events"></div>
</template>
<script>
    //引入子组件
    import Main form "./main"
    exprot default{
        methods:{
            events:function(){
            }
        }
    }
</script>

//
<template>
    <div>{{data}}</div>
</template>
<script>
    exprot default{
        name:"son",
        //接受父组件传值
        props:["data"]
    }
</script>

active-class 是哪一个组件的属性?

vue-router 模块的 router-link 组件。

嵌套路由怎么定义?

在实际项目中咱们会碰到多层嵌套的组件组合而成,可是咱们如何实现嵌套路由呢?所以咱们须要在 VueRouter 的参数中使用 children 配置,这样就能够很好的实现路由嵌套。 index.html,只有一个路由出口
<div id="app">
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>
main.js,路由的重定向,就会在页面一加载的时候,就会将 home 组件显示出来,由于重定向指向了 home 组件,redirect 的指向与 path 的必须一致。children 里面是子路由,固然子路由里面还能够继续嵌套子路由。
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//引入两个组件
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home组件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//建立路由实例
const router = new VueRouter({routes})
new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})
home.vue,点击显示就会将子路由显示在出来,子路由的出口必须在父路由里面,不然子路由没法显示。

路由之间跳转?

声明式(标签跳转) <router-link :to="index">
编程式( js 跳转) router.push('index')
懒加载(按需加载路由)(常考)
webpack 中提供了 require.ensure()来实现按需加载。之前引入路由是经过 import 这样的方式引入,改成 const 定义的方式进行引入。
不进行页面按需加载引入方式:
import  home   from '../../common/home.vue'
进行页面按需加载的引入方式:
const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

vuex 是什么?怎么使用?哪一种功能场景使用它?

vue 框架中状态管理。在 main.js 引入 store,注入。新建了一个目录 store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登陆状态、加入购物车
// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
 //...code
})
//main.js
import store from './store'
...

vue-router 有哪几种导航钩子?

三种
全局导航钩子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件
beforeEnter

自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数

全局定义指令:在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另外一个是函数。
组件内定义指令:directives
钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数: el、binding

说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

vue 的双向绑定的原理是什么(常考)

vue.js 是采用数据劫持结合发布者-订阅者模式的方式,经过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变更时发布消息给订阅者,触发相应的监听回调。
具体步骤: 第一步:须要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter 这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化
第二步:compile 解析模板指令,将模板中的变量替换成数据,而后初始化渲染页面视图,并将每一个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变更,收到通知,更新视图
第三步:Watcher 订阅者是 Observer 和 Compile 之间通讯的桥梁,主要作的事情是:
在自身实例化时往属性订阅器(dep)里面添加本身
自身必须有一个 update()方法
待属性变更 dep.notice()通知时,能调用自身的 update() 方法,并触发 Compile 中绑定的回调,则功成身退。
第四步:MVVM 做为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,经过 Observer 来监听本身的 model 数据变化,经过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通讯桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变动的双向绑定效果。
 

vuex 相关

vuex 有哪几种属性

有 5 种,分别是 state、getter、mutation、action、module

vuex 的 store 特性是什么

vuex 就是一个仓库,仓库里放了不少对象。其中 state 就是数据源存放地,对应于通常 vue 对象里面的 data
state 里面存放的数据是响应式的,vue 组件从 store 读取数据,如果 store 中的数据发生改变,依赖这相数据的组件也会发生更新
它经过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 特性是什么

getter 能够对 state 进行计算操做,它就是 store 的计算属性
虽然在组件内也能够作计算属性,可是 getters 能够在多给件之间复用
若是一个状态只在一个组件内使用,是能够不用 getters

vuex 的 mutation 特性是什么

action 相似于 muation, 不一样在于:action 提交的是 mutation,而不是直接变动状态
action 能够包含任意异步操做
vue 中 ajax 请求代码应该写在组件的 methods 中仍是 vuex 的 action 中
若是请求来的数据不是要被其余组件公用,仅仅在请求的组件内使用,就不须要放入 vuex 的 state 里
若是被其余地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回

不用 vuex 会带来什么问题

可维护性会降低,你要修改数据,你得维护 3 个地方
可读性降低,由于一个组件里的数据,你根本就看不出来是从哪里来的
增长耦合,大量的上传派发,会让耦合性大大的增长,原本 Vue 用 Component 就是为了减小耦合,如今这么用,和组件化的初衷相背

vuex 原理

vuex 仅仅是做为 vue 的一个插件而存在,不像 Redux,MobX 等库能够应用于全部框架,vuex 只能使用在 vue 上,很大的程度是由于其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统,
vuex 总体思想诞生于 flux,可其的实现方式完彻底全的使用了 vue 自身的响应式设计,依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工做原理,vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件;

使用 Vuex 只需执行 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的示例,store 是如何实现注入的?美团

Vue.use(Vuex) 方法执行的是 install 方法,它实现了 Vue 实例对象的 init 方法封装和注入,使传入的 store 对象被设置到 Vue 上下文环境的$store 中。所以在 Vue Component 任意地方都可以经过 this.$store 访问到该 store。

state 内部支持模块配置和模块嵌套,如何实现的?美团

在 store 构造方法中有 makeLocalContext 方法,全部 module 都会有一个 local context,根据配置时的 path 进行匹配。因此执行如 dispatch('submitOrder', payload)这类 action 时,默认的拿到都是 module 的 local state,若是要访问最外层或者是其余 module 的 state,只能从 rootState 按照 path 路径逐步进行访问。

在执行 dispatch 触发 action(commit 同理)的时候,只需传入(type, payload),action 执行函数中第一个参数 store 从哪里获取的?美团

store 初始化时,全部配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候,actions 中 type 为 submitOrder 的全部处理方法都是被封装后的,其第一个参数为当前的 store 对象,因此可以获取到 { dispatch, commit, state, rootState } 等数据。

Vuex 如何区分 state 是外部直接修改,仍是经过 mutation 方法修改的?美团

Vuex 中修改 state 的惟一渠道就是执行 commit('xx', payload) 方法,其底层经过执行 this._withCommit(fn) 设置_committing 标志变量为 true,而后才能修改 state,修改完毕还须要还原_committing 变量。外部修改虽然可以直接修改 state,可是并无修改_committing 标志位,因此只要 watch 一下 state,state change 时判断是否_committing 值为 true,便可判断修改的合法性。

调试时的"时空穿梭"功能是如何实现的?美团

devtoolPlugin 中提供了此功能。由于 dev 模式下全部的 state change 都会被记录下来,'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态,利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。
 

axios

axios 是什么?怎么使用?描述使用它实现登陆功能的流程

axios 是请求后台资源的模块。 npm i axios -S
若是发送的是跨域请求,需在配置文件中 config/index.js 进行配置
相关文章
相关标签/搜索