Vue面试真题2 -- vuex、指令、导航钩子、双向绑定_用导航钩子权限控制面试问到怎么说-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44581775/article/details/127474610

Vue面试真题2 -- vuex、指令、导航钩子、双向绑定

Vue面试真题2 -- vuex、指令、导航钩子、双向绑定

Vue面试真题2 – vuex、指令、导航钩子、双向绑定

在Vue面试真题1 – 生命周期函数、组件封装、axios中我们学习了vue生命周期函数详解、vue组件封装、axios，本文将继续重点跟大家介绍前端面试中经常遇到的一些与Vue相关的第2个重点内容，主要包括vuex、指令、导航钩子、双向绑定。废话不多说，一起来看看吧！

1-vuex

常见面试问题：vuex是什么？怎么使用？哪种功能场景使用它？
- vuex 是一个专门为vue构建的状态集管理。
- 主要是为了解决组件间状态共享的问题。
- 强调的是集中式管理
- 说白了，主要是便于维护，便于解耦，所以不是所有的项目都适合使用vuex。
- 如果你不是构建大型项目，使用vuex反而使你的项目代码繁琐多余。
vuex 的核心
- state
- mutations
- getters
- actions
- modules
vuex使用示例

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>vuex_demo</title>
	</head>
	<body>
	    <div id="app">
	        <p>更新计数{{count}}</p>
	        <button @click="add">++</button>
	        <button @click="decrease">--</button>
	    </div>
	    
	    <script src="./js/vue.js"></script>
	    <script src="./js/vuex.js"></script>
	    <script>
	        var store = new Vuex.Store({
	            state: {
	                count: 0
	            },
	            mutations: {  // 唯一一个可以更改状态的地方
	                addState(state) {
	                    state.count++;
	                },
	                decreaseState(state) {
	                    state.count--;
	                }
	            }
	        });
	        var vm = new Vue({
	            el: "#app",
	            store,
	            computed: {
	                count() {
	                    return this.$store.state.count;
	                }
	            },
	            methods: {
	                add() {
	                    store.commit('addState');
	                },
	                decrease() {
	                    store.commit('decreaseState');
	                }
	            }
	        });
	    </script>
	</body>
	</html>

2-vue指令

常见面试问题：说出4个vue当中的指令和它的用法
- v-if 条件渲染指令，代表存在销毁。
- v-bind 绑定指令，用来绑定指令，简写成:
- v-on 监听事件指令，简写成@
- v-for 循环指令

3-vue导航钩子

常见面试问题：vue导航钩子有哪些？它们有哪些参数？
导航钩子翻译过来就是路由的生命周期函数（vue-router），主要分为两种：全局和局部。
全局的钩子函数：
- beforeEach: 在路由切换开始时调用
- afterEach: 在路由切换离开时调用
局部到单个路由：
- beforeEnter: 在单个路由切换开始时调用
组件的钩子函数：
- beforeRouterEnter: 在组件路由切换开始时调用
- beforeRouterUpdate: 在组件路由更新时调用
- beforeRouterLeave: 在组件路由切换离开时调用
使用方法：router.beforeEach((to, from, next) => { });
- to: 即将进入的目标对象
- from: 当前导航要离开的导航对象
- next: 是一个函数，调用resolve，执行下一步
vue导航钩子使用示例

	const routes = [
        {
            path: '/',
            name: '/',
            component: Home
        },
        {
            path: '/login',
            name: '/login',
            component: Login
        },
        {
            path: '/buy',
            name: '/buy',
            component: Buy,
            meta: {
                auth: true
            }
        }
    ];
    const router = new VueRouter({
        routes,

    });
    // 全局路由
    router.beforeEach((to, from, next) => {
        if(to.auth) {
            if(token) {
                next();
            }
            else {
                next({
                    path: '/login'
                })
            }
        }
    });

4-vue双向绑定

常见面试问题：v-model是什么？ Vue中标签怎么绑定事件？
vue中利用v-model来进行表单数据的双向绑定。
说白了，它只做了两个操作
- v-bind 绑定了一个value的属性。
- 利用v-on把当前的元素绑定到了一个事件上。
vue双向绑定使用示例

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>vue双向绑定</title>
	    <script src="./js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
	        <input v-model="inputValue">
	        <hr>
	        <p>{{inputValue}}</p>
	        <hr>
	        <input :value="inputValue2" @input="inputValue2 = $event.target.value">
	        <p>{{inputValue2}}</p>
	    </div>
	
	    <script>
	        var vm = new Vue({
	            el: '#app',
	            data: {
	                inputValue: '',
	                inputValue2: ''
	            }
	        });
	    </script>
	</body>
	</html>