讯享网

                <p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2020%2F0314%2Fb6d3d048j00q76cwt002jd200qo00beg00qo00be.jpg&thumbnail=660x2147483647&quality=80&type=jpg"/><br/></p><p>作者 | 红颜祸水nvn<br/></p><p>责编 | 唐小引</p><p>出品 | CSDN 原力计划</p><p><strong>1. 什么是 MVVM？</strong></p><p>MVVM 是 Model-View-ViewModel 的缩写，MVVM 是一种设计思想。Model 层代表数据模式，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化为 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。</p><p><strong>2. 父组件向子组件传值的方法？</strong></p><p>父组件传递的数据子组件用 props 方法接收。</p><p>子组件通过两种方式接收：可以传递任何类型（数组，对象，各种数据类型等等）</p><p><ul><li></p><p>props:[‘title’,‘likes’,‘isPublished’,‘author’]；</p><p></li><li></p><p>props:{title:String,likes:Number}</p><p></li></ul></p><p>详细介绍看这篇：Vue 父组件向子组件传值</p><p>https://blog.csdn.net/_34928693/article/details/80539350</p><p><strong>3. 子组件向父组件传值的方法？</strong></p><p>子组件向父组件传值用 this.$emit(key,value) ，父组件接收的时候需要在父组件中创建的子组件的标签中绑定 Key，格式:@Key=“方法名”，父组件声明这个方法，方法带参数，这个参数就是子组件传递的 Value。</p><p>详细介绍看这篇：Vue子组件向父组件传值</p><p>https://blog.csdn.net/sisi_chen/article/details/81635216</p><p><strong>4. Vuex 是什么？哪种功能场景使用它？</strong></p><p>Vuex 是专门为 Vue.js 设计的状态管理模式，它采用集中式储存管理 Vue 应用中所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p><p>当项目庞大的时候使用它：</p><p><ul><li></p><p>需要动态的注册响应式数据；</p><p></li><li></p><p>需要命名空间 namespace 来管理组织我们的数据；</p><p></li><li></p><p>希望通过插件，来更改记录；方便测试；以上这些需要和希望，都是我们 vuex 需要做的一些事情。</p><p></li></ul></p><p><strong>5. Vuex 有哪几种属性？</strong></p><p><ul><li></p><p>state：基本数据</p><p></li><li></p><p>getters：从基本数据派生的数据</p><p></li><li></p><p>mutations：提交更改数据的方法，同步！</p><p></li><li></p><p>actions：像一个装饰器，包裹 mutations，使之可以异步。</p><p></li><li></p><p>modules：模块化 Vuex。</p><p></li></ul></p><p><strong>6. 如何让 CSS 旨在当前组件中起作用？</strong></p><p>当前组件的 &lt; style&gt;标签修改为&lt; style scoped&gt;</p><p><strong>7. 请列举出3个 Vue 中常见的生命周期钩子函数。</strong></p><p><ul><li></p><p>beforeCreate：Vue 实例的挂载元素 $el 和数据对象 data 都为未定义，还未初始化。</p><p></li><li></p><p>created：vue 实例的数据对象 data 有值了，$el 没有。</p><p></li><li></p><p>beforeMount：vue 实例的 $el 和 data 都初始化了，但还是虚拟的 dom 节点，具体的 data.filter 还未替换掉。</p><p></li><li></p><p>mounted：vue 实例挂载完成，data.filter 成功渲染</p><p></li><li></p><p>beforeUpdate：data 更新时触发。</p><p></li><li></p><p>updated：data 更新时触发。</p><p></li><li></p><p>beforeDestroy：组件销毁时触发。</p><p></li><li></p><p>destroyed：组件销毁时触发，vue 实例解除了事件监听以及 dom 的绑定（无响应了），但 DOM 节点依旧存在。</p><p></li></ul></p><p><strong>8. Vue 生命周期总共有几个阶段？</strong></p><p><ul><li></p><p>beforeCreate 创建前</p><p></li><li></p><p>created 创建后</p><p></li><li></p><p>beforeMount 载入前</p><p></li><li></p><p>mounted 载入后</p><p></li><li></p><p>beforeUpdate 更新前</p><p></li><li></p><p>updated 更新后</p><p></li><li></p><p>beforeDestroy 销毁前</p><p></li><li></p><p>destroyed 销毁后</p><p></li></ul></p><p><strong>9. 说出至少 4 种 Vue 当中的指令和它的用法？</strong></p><p><ul><li></p><p>v-html：渲染文本（能解析 HTML 标签）</p><p></li><li></p><p>v-text：渲染文本（统统解析成文本）</p><p></li><li></p><p>v-bing：绑定数据</p><p></li><li></p><p>v-once：只绑定一次</p><p></li><li></p><p>v-model：绑定模型</p><p></li><li></p><p>v-on：绑定事件</p><p></li><li></p><p>v-if v-shou：条件渲染</p><p></li></ul></p><p><strong>10. vue-cli 工程中常用的 npm 命令有哪些？</strong></p><p><ul><li></p><p>npm install：下载 node_modules 资源包的命令</p><p></li><li></p><p>npm run dev：启动 vue-cli 开发环境的 npm 命令</p><p></li><li></p><p>npm run build：vue-cli 生成生产环境部署资源的 npm 命令</p><p></li></ul></p><p><strong>11. 请说出 vue-cli 工程中每个文件夹和文件的用处。</strong></p><p><ul><li></p><p>build 文件夹：存放 webpack 的相关配置以及脚本文件，在实际开发过程中只会偶尔用到 webpack.base.conf.js，配置 less、babel 等。</p><p></li><li></p><p>config 文件夹：常用到此文件夹下的 config.js (index.js) 配置开发环境的端口号，是否开启热加载或者设置生产环境的静态资源相对路径、是否开启 gzip 压缩、npm run build 命令打包生成静态资源的名称和路径等。</p><p></li><li></p><p>node_modules：存放 npm install 命令下载的开发环境和生产环境的各种依赖。</p><p></li><li></p><p>src文件夹 ：工程项目的源码以及资源、包括页面图片、路由组件、路由配置、vuex、入口文件等。</p><p></li><li></p><p>其他文件：定义的一些项目信息，说明等等。</p><p></li></ul></p><p><strong>12. vue-router 路由的两种模式。</strong></p><p><ul><li></p><p>hash 模式：</p><p></li></ul></p><p># 后面的 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新浏览器，每次 hash 值的变化会触发 hashchange 事件。</p><p><ul><li></p><p>history 模式：</p><p></li></ul></p><p>利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。</p><p><strong>13. 如何解决 Vue 中的 ajax 跨域问题？</strong></p><p>找到 config 文件夹中的 index.js 文件：</p><p></p><p>修改完之后的跨越请求就可以直接写成 /api/login 等等了。</p><p><strong>14. Vue 打包命令是什么？Vue 打包后会生成哪些文件？</strong></p><p><ul><li></p><p>npm run build ：Vue 打包命令</p><p></li><li></p><p>Vue 打包后会在当前工作目录下生成一个 dist 文件夹，文件夹中会有 static 静态文件以及 index.html 初始页面。</p><p></li></ul></p><p><strong>15. Vue 如何优化首屏加载速度？</strong></p><p><ul><li></p><p>异步路由加载</p><p></li><li></p><p>不打包库文件</p><p></li><li></p><p>关闭 sourcemap</p><p></li><li></p><p>开启 gzip 压缩</p><p></li></ul></p><p><strong>16. scss 是什么？</strong></p><p>SCSS 是 Sass 3 引入的新语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能，唯一不同之处是 SCSS 需要使用分号和花括号而不是换行和缩进，SCSS 对空白符号不敏感。</p><p><strong>17. axios 是什么？怎么使用？</strong></p><p>axios 是一个基于 promise 的 HTTP 库，可以发送 get，post 请求，正是由于 Vue、React 的出现，促使了 axios 轻量级库的出现</p><p>特定：</p><p><ul><li></p><p>可以在浏览器中发送 XMLHttpRequest 请求</p><p></li><li></p><p>可以在 node.js 发送 http 请求</p><p></li><li></p><p>支持 Promise API</p><p></li><li></p><p>拦截请求和响应</p><p></li><li></p><p>转换请求和响应</p><p></li><li></p><p>转换请求数据和响应数据</p><p></li><li></p><p>能够取消请求</p><p></li><li></p><p>自动转化 JSON 格式</p><p></li><li></p><p>客户端支持保护安全免受 XSRF 攻击</p><p></li></ul></p><p>如何使用：</p><p><ul><li></p><p>npm install --save axios 安装axios</p><p></li><li></p><p>在入口 main.js 中导入 axios</p><p></li></ul></p><p></p><p><ul><li></p><p>使用 axios 发送 get 请求</p><p></li></ul><ul><li></p><p>使用 axios 发送 post 请求 post原生请求在后端是接收不到参数的，所有有两种解决方案，这里只写一种！第二种解决方案是用 QS。</p><p></li></ul></p><p><strong>18. vue-router 是什么？它有哪些组件？</strong></p><p>vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：</p><p><ul><li></p><p>嵌套的路由、是图标</p><p></li><li></p><p>模块化的、基于组件的路由配置</p><p></li><li></p><p>路由参数、查询、通配符</p><p></li><li></p><p>基于 Vue.js 过度系统的视图过渡效果</p><p></li><li></p><p>细粒度的导航控制</p><p></li><li></p><p>带有自动激活的 CSS class 的连接</p><p></li><li></p><p>HTML 5 历史模式或 hash 模式，在 IE9 中自动降级</p><p></li><li></p><p>自定义的滚动条行为</p><p></li></ul></p><p>vue-router 组件：</p><p><ul><li></p><p>&lt; router-link to=""&gt; 路由的路径</p><p></li><li></p><p>&lt; router-link :to="{name:’‘l路由名’}"&gt; 命名路由</p><p></li><li></p><p>&lt; router-view&gt; 路由的显示</p><p></li></ul></p><p><strong>19. 怎么定义 vue-router 的动态路由？怎么获取传递过来的动态参数？</strong></p><p>在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。使用 router 对象的 params.id，例如：this.$route.params.id。</p><p><strong>20. MVVM 和其他框架 （jQuery）的区别是什么？哪些场景适合？</strong></p><p><ul><li></p><p>Vue 是数据驱动，通过数据来显示视图层而不是节点操作。</p><p></li><li></p><p>处理数据交互的时候挺适合 MVVM 设计模式的。</p><p></li></ul></p><p>原文链接：https://blog.csdn.net/_43647359/article/details/104774302</p><p>欢迎更多的开发者朋友加入 CSDN 原力计划！我们将用全新的方式来释放更多的流量，让优质、有深度、丰富有趣的内容得到精准的流量扶持，同时也帮助创作者和粉丝有更多互动和交流。点击下方图片了解详情。</p>