Vue 基础面试

目录

1.谈一下你对 Vue.js 的 MVVM 原理的理解

2.请说一下 Vue.js 响应式数据的原理

3.v-model实现原理，及如何自定义v-model

4.Vue传值

5.封装 Vue组件

6.Vue 中的 data 是以 函数还是对象 表示？

7.跨域

8.vue-router传参

9.前端鉴权

---

1.谈一下你对 Vue.js 的 MVVM 原理的理解

• 传统 MVC：将 Model 和 View 实现代码分离

1. Model（模型）：业务模型
2. View（视图）：用户界面
3. Controller（控制器）：控制器

• 原理：用户访问服务器端路由，路由调用控制器，控制器获取模型处理过的数据，将结果返回给前端视图渲染
• MVVM：M-model，V-view，VM-view-model（桥梁作用）
• 传统模型需要 操作 DOM 元素，手动将数据渲染到页面上，MVVM不需要 操作 DOM元素
• MVVM 将数据绑定在 view-model层上，会实现双向数据绑定，即：
• view-model层中的数据可以渲染到视图界面，视图界面数据发生变化 也会修改view-model层中的数据

2.请说一下 Vue.js 响应式数据的原理

• 响应式：当数据改变，Vue 会通知到使用该数据的代码，并让视图更新
• 响应式核心机制：观察者模式（watcher）
• 数据是被观察的一方，发生改变时，通知所有观察者，观察者做出响应
• 数据可以有多个观察者，需要记录 多个观察者 和 数据 的依赖关系：
• data（数据） - dep（依赖关系） - watcher（对应观察者）
• Object.defineProperty：重新定义 data所有属性
• 综上：依赖dep 记录 数据data 和 观察者watcher 的关系，当 Vue更改数据的时候，会调用 Object.defineProperty 给数据data 重新定义属性，此时 依赖dep 就会通知相应的 观察者watcher 作出响应
• 通过Object.defineProperty 完成对于数据的劫持, 通过观察者模式, 完成对于节点的数据更新

3.v-model实现原理，及如何自定义v-model

• 利用属性绑定，实现从数据到页面的控制（从vm实例data 到 页面）
• 利用事件监听，实现从页面到数据的控制（页面输入改变，监听，然后让 vm实例 发生变化）
• <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
• <input type="text" v-model='msg'>

4.Vue传值

1. 父 子 传值：使用props接受
2. 子 父 传值：父亲写事件函数 ，子 $emit触发 传值
3. 兄弟传值：$hub 事件处理中心
4. 如果组件之间 关系很远 是很多组件都要用的值 vuex（全局状态数据管理）

• vuex 原理：在 store 里的 state 写的数据 是全局数据，所有组件都可以使用
• vuex mutations和 actions 的区别？

5.封装 Vue组件

• 组件：可以重复使用的、由 HTML结构（ template） + 数据逻辑（script） + 样式（style） 构成的操作单元
• 常用的组件属性 => data/ methods/filters/ components/watch/created/mounted/beforeDestroy/computed/props
• 常用组件指令 => v-if/v-on/v-bind/v-model/v-text/v-once
• 步骤：创建 vue单文本组件，挂载到路由，回到单文本组件中 书写模板，书写行为，书写样式

6.Vue 中的 data 是以 函数还是对象 表示？

• 初步学习 Vue实例化时：data 是一个对象
• 开发组件时：data 是一个带返回值的函数
• 原因：组件实例化后，会导致组件 data数据共享，为了让数据相互独立，所以 return

7.跨域

• 域名、协议、ip地址、端口 任何一个不一样，就是跨域
• 解决方案：

1. 服务端设置：Access-Control-Allow-Origin：* ....
2. jsonp：利用 <script> 的特性解决跨域问题，但只能 get
3. 服务器端不存在跨域问题，用自己的服务器请求别的服务器，request(地址，回调函数)
4. vue 可以自己设置 服务器代理的 proxy

8.vue-router传参

• this.$route.params.id：动态路由传值 // /user/:id
• this.$route.query.id：通过?后面的拼接参数传值

9.前端鉴权

• 有些 axios请求，需要token，可以配置 axios请求拦截器，注入token
• 有些页面需要登录才能看，可以用 路由导航守卫 router.beforeEach，判断 token