Vue2面试题（二）

面试题：Vuex 有哪些属性?

state、getters、mutations、actions、modules
​
state 类似于组件中 data,存放数据
getters 类似于组件中 computed（计算属性）
mutations 类似于组件中 methods（方法）
actions 提交 mutations的
modules 把以上4个属性再细分，让仓库更好管理

面试题：Vuex 是单向数据流还是双向数据流?

Vuex 是单向数据流

面试题：Vuex 中的 mutaitons 和 actions 区别

本质区别：
    mutations : 必须是同步函数
    actions : 可以包含”任意异步操作
​
使用区别：
    mutations中可以放入函数，actions 也可以放入函数，但是一般我们在 mutations 中放入函数而 actions 是提交 mutations

面试题：Vuex 如何做持久化存储

Vuex本身不是持久化存储
​
1. 使用 localStorage 自己写
2. 使用 vuex-persist 插件

面试题：什么场景用Vuex

共享、方便管理、方便维护、组件传值……
项目：购物车数据，订单数据，用户的登录信息...

面试题：Vue设置代理

<在Vue项目中，设置代理（Proxy）通常是为了解决开发环境中跨域请求的问题。代理配置通常在Vue CLI创建的项目中的vue.config.js文件中进行。如果你在设置代理时遇到了问题，导致页面出现空白（即没有任何内容显示），这可能是由于多种原因造成的.我们可以通过：
1. 检查代理配置
2. 清除缓存
3. 检查网络请求
4. 检查CORS策略
5. 查看控制台错误
6. 简化代理配置进行测试
7. 确保后端服务运行中
8. 使用环境变量
​
​
1、搭建后端目录
全局命令：npm install express-generator -g
进入项目目录：express --view=ejs server
​
2、node 一 express 跨域
router.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','*');
    res.header('Content-Type','application/json;charset=utf-8');
    next();
});

面试题：打包路径和路由模式

在前端项目中，打包路径通常指的是项目构建后静态资源的访问路径。以Vue.js项目为例，打包路径的配置主要在vue.config.js文件中进行，其中publicPath属性决定了打包后静态资源的路径前缀。
​
1、部署到根路径径：
    如果希望将Vue项目部署到域名的根路径（如https://yourdomain.com/），则应将publicPath设置为'/'（这是默认值，通常无需显式设置）。
​
2、部署到二级路径：
    如果希望将Vue项目部署到域名的二级路径（如https://yourdomain.com/cms/），则应将publicPath设置为对应的路径（如'/cms/'）。
​
3、在配置好vue.config.js后，使用npm run build命令进行打包。打包完成后，会在项目根目录下生成一个dist文件夹，里面包含了所有静态资源文件。将这些文件上传至服务器上的指定目录，并根据服务器类型（如Nginx、Apache等）进行相应的配置。

面试题：Vue路由模式

路由模式有俩种：history、hash
​
Hash模式
    原理：利用URL中的#符号及其后面的内容实现路由
    特点：
        兼容性好，支持所有浏览器
        不会向服务器发送请求
        URL中会带有#符号，不太美观
        通过监听window.onhashchange事件实现路由变化
History模式
    原理：利用HTML5 History API(pushState, replaceState)
    特点：
        URL更美观，没有#符号
        需要服务器端配置支持，否则刷新会404
        通过监听popstate事件实现路由变化
        需要后端配合，所有路由都返回index.html
        
区别：
    1．表现形态不同
        history:http://localhost:8080/about
        hash:http://1ocalhost:8080/#/about
    2.跳转请求
        history : http://localhost:8080/id  ===>  发送请求
        hash ：不会发送请求
    3.打包后前端自测要使用hash，如果使用history会出现空白页

面试题：slot插槽

使用场景：组件中有些地方的布局可能大多一致，但是细微有些小小变化

面试题：如何选择hash模式和history模式

1、如果应用需要良好的用户体验和美观的URL，并且不介意服务器配置的复杂性，可以选择History模式。
2、如果应用需要更好的兼容性和安全性，或者你不希望改变服务器的现有配置，可以选择Hash模式。 

面试题：SPA单页面应用和传统页面跳转有什么区别，以及 SPA 有什么缺点？

SPA跳转是一个页面进行切换
传统页面跳转就是跳转不同的html
​
SPA对于seo部分不是特别好，只能收录一个
传统的页面对于seo比较好，多个html文件收录
性能不是特别好

面试题：Vue路径传值

1.显式
    http://1ocalhost:8080/about?a=1
​
    1.1 传: 
        this.$router.push({
            path:'/about',
            query:{
                a:1
            }
        })
    1.2 接: this.$route.query.a
​
2.隐式
    http://localhost:8080/about
​
    2.1 传: 
        this.$router.push({
            name:'About'，
            params:{
                a:1
            }
        })
    2.2 接:this.$route.params.a

面试题：双向绑定原理

通过 Object.defineProperty 劫持数据发生的改变，如果数据发生改变了(在set中进行赋值的)，触发 update 方法进行更新节点内容 ({{str}})，从而实现了数据双向绑定的原理。

面试题：路由导航守卫有哪些

全局、路由独享、组件内
​
1. 全局
    全局路由钩子：beforeEach(to,from,next)、beforeResolve(to,from,next)、afterEach(to,from);
    
2. 路由独享
    独享路由钩子：beforeEnter(to,from, next);
    
3. 组件内
    beforeRouteEnter(进入)、beforeRouteUpdate(修改)、beforeRouteLeavel(离开)
    
使用场景：判断是否登录，如果登录就next否则就跳转到登录页面 

面试题：Vue动态路由

场景：详情页(文章、商品)
router.js配置:

 {
        path: "/list",
        name:"List",
        children:[
            {
                path:"/list/:id",
                name:'Details',
                component: () =>
                    import("../views/Details.vue"),
            }          
        ],
        component: () =>
        import("../views/List.vue"),
    }, 

面试题：diff 算法

功能：提升性能
虚拟dom ===》其实就是数据（把dom数据化）
​
主流:snabbdom、virtual-dom
snabbdom:https://www.npmjs.com/package/snabbdom
​
撘建环境
npm init-y
cnpm install webpack@5 webpack-cli@3 webpack-dev-server@3-S
cnpm install snabbdom -S
新建webpack.config.js
配置webpack.config.js

面试题：keep-alive

1. 是什么？  
    缓存组件
​
2. 一旦使用 keep-alive 会多倆个生命周期
    activated
    deactivated
3. 功能
    提升性能的

面试题：讲一下 MVVM

web1.0时代
    文件全在一起，也就是前端和后端的代码全在一起
    问题：
        1、前端和后端都是一个人开发。（技术没有侧重点或者责任不够细分）
        2、项目不好维护。
        3、html、css、js页面的静态内容没有，后端是没办法工作的（没办法套数据）。mvc..都是后端先出的
​
web2.0时代
    ajax出现了，就可以：前端和后端数据分离了。
    解决问题：后端不用等前端页面弄完没，后端做后端的事情（写接口）、前端布局、特效、发送请求。
    问题:
    1、html、css、js都在一个页面中，单个页面可能内容也是比较多的（也会出现不好维护的情况）。
    
出现前端的框架了MVC、MVVM
    解决问题：可以把一个”特别大”页面，进行拆分（组件化），单个组件进行维护
​
view：视图【dom==》在页面中展示的内容】
model：模型【数据层：vue中的data数据】
viewModel:视图模型层【就是vue源码]