前端工程师面试知识库：Vue相关

生命周期顺序

组件通信

1.父传子用props,父用子用ref 子调父用$emit,无关系用Bus

Vuex

组件通信库，可以避免子组件无法改变props的弊端等 mutations 同步操作， 用于改变状态 官方不推荐异步 action 执行多个mutaions，官方推荐异步操作 mapState、mapGetters、mapActions使用示例

<template>
  <el-dialog :visible.sync="show"></el-dialog>
</template>

<script>
import {mapState} from 'vuex';
export default {
  computed:{

    //这里的三点叫做 : 扩展运算符
    ...mapState({
      show:state=>state.dialog.show
    }),
  }
}
</script>

后两者类似
复制代码

VueRouter

定义
var routes = [
    {
        path:"/one",

        component:导入的组件1
    },
    {
        path:"/two",
        component:导入的组件2
    },
];
// 定义路由组件
var router = new VueRouter({
    routes
});
// 定义路由
new Vue({
    el:"#box",
    router
});
 访问设定的路由后 会将<router-view></router-view>替换成相应的模版
 html访问方式 <router-link to="/one">One</router-link>(类似a标签)
 js访问方式 this.$router.push('/one'); 
 replace方式 替换当前页面
 携带的参数 可以通过this.$route.query.xxxx来获取
复制代码

Vue双向绑定

原理：利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。 缺点：双向数据流是自动管理状态的, 但是在实际应用中会有很多不得不手动处理状态变化的逻辑, 使得程序复杂度上升, 难以调试。

computed watch methods

用法： 区别：

1. 前两者自动追踪数据，执行相关函数，最后一个手动调用；
2. computed是计算属性，用法与data一致
3. watch像事件监听，对象发生变化时，执行相关操作
4. methods与js中执行方法类似
5. computed通常只有get属性
6. 数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择
7. watch的对象必须事先声明