1, 说下 vue 的双向绑定数据的原理?
答: vue 实现数据双向绑定主要是采用数据劫持结合 "发布者 - 订阅者" 模式的方式, 通过 Object.defineProperty() 来劫持各个属性的 setter,getter, 在数据变动时发布消息给订阅者, 触发相应的监听回调.
2, 解释单项数据流和双向数据绑定?
答: 单向数据流: 顾名思义数据流是单向的, 数据流动的方向可以跟踪, 流动单一, 追查问题的时候可以更快捷, 缺点就是写起来不太方便, 要使用 ui 发生变更就必须创建各种 action 来维护对应的 state.
双向数据流: 数据之间是相同的, 将数据变更的操作隐藏在框架内部, 优点是在表单交互较多的场景下, 会简化大量与业务无关的代码. 缺点是无法追踪局部状态的变化, 增加了出错是 debug 的难度.
3,vue 如何去除 url 中的 #?
答: vue-router 默认使用的 hash 模式, 所以在路由加载的时候, 项目中的 url 会自带 "#", 如果不想使用 "#", 把路由模式改成 history 模式就可以了.
4, 对 MVC 和 MVVM 的理解?
答: MVC 特点: 所有通信都是单向的
a,View 传送指令到 controller
b,controller 完成业务逻辑后, 要求 Model 改变状态
c,Model 将新的数据发送到 View, 用户得到反馈
MVVM 分为 Model,View,ViewModel 三者, Model 代表数据模型, 数据和业务逻辑都在 Model 层中定义. View 代表 UI 视图, 负责数据的展示. ViewModel 负责监听 Model 中数据的改变并且控制视图的更新, 处理用户交互操作. Model 和 View 并无直接的关联, 而是通过 ViewModel 来进行联系的, Model 和 ViewModel 之间有着双向数据绑定的联系, 因此当 Model 中的数据改变时会触发 View 层的刷新, View 中由于用户交互操作而改变的数据也会在 Model 中同步
5,vue 生命周期的理解?
答: 创建前 / 后: 在 beforeCreated 阶段, vue 实例的挂载元素 $el 和数据对象 data 都为 undefined, 还未初始化, 在 created 阶段, vue 实例的数据对象 data 有了,$el 还没有
载入前 / 后: 在 beforeMount 阶段, vue 实例的 $el 和 data 都初始化, 但还是挂载之前为虚拟 dom 节点, data.message 还未替换, 在 mounted 阶段, vue 实例挂载完成, data.message 成功渲染.
更新前 / 后: 当 data 变化时, 会触发 beforeUpdata 和 updated 方法.
销毁前 / 后: 在执行 destroy 方法后, 对 data 的改变不会再触发周期函数, 说明此时 vue 实列已经解除事件监听以及和 dom 的绑定, 但是 dom 结构依然存在
6,$route 和 $router 的区别?
答:$router 为 VueRouter 实例. 想要导航到不同的 url, 可以使用 $router.push 方法.
$route 为当前 router 跳转对象里面可以获取 name,path,query,params 等
7,NextTick 是做什么的?
答:$nextTick 是在下一次 DOM 更新循环结束之后执行的延迟回调, 在修改数据之后使用 $nextTick, 则可以在回调中获取更新后的 DOM.
8,vue 组件 data 为什么必须是函数?
答: 因为 JS 本身的特性带来的, 如果 data 是一个对象, 那么由于对象本身属于引用类型, 当我们修改其中一个属性时, 会影响到所有的 vue 实列的数据, 如果将 data 作为一个函数返回一个对象, 那么每一个实例的 data 属性都是独立的, 不会相互影响.
9, 计算属性 computed 和事件 methods 有什么区别?
答: computed, 计算属性时基于他们的依赖进行缓存的, 只有在他的相关依赖发生改变时才会重新求职.
methods, 只要调用, 就会重新渲染.
10,vue 等单页面应用的优缺点?
答: 优点: 良好的交互体验, 良好的前后端工作分离模式, 减轻服务器压力
缺点: SEO 难度较高, 前进后退管理, 初次加载耗时多
11, 简述 vue 的响应式原理?
答: 当一个 vue 实例创建时, vue 会遍历 data 选项的属性, 用 Object.defineProperty 将他们转为 getter/setter 并且在内部追踪相关依赖, 在属性被访问和修改时通知变化, 每一个组件实例都有相应的 watcher 程序实例, 他会在组件渲染的过程中把属性记录为依赖, 之后当依赖项的 setter 被调用时, 会通知 watcher 重新计算, 从而使他关联的组件得以更新.
12,delete 和 vue.delete 删除数组的区别?
答: delete 只是被删除的元素变成了 empty/undefined 其他元素的键值还是不变.
Vue.delete 直接删除了数组, 改变了数组的键值
13,vue 的有点是什么?
答: 低耦合, 视图可以独立于 Model 变化和修改, 一个 ViewModel 可以绑定到不同的 View 上, 当 view 变化的时候 Model 可以不变, 当 Model 变化的时候 view 也可以不变化,
可重用性, 可以把一些视图逻辑放在一个 viewModel 里面, 让很多 view 重用这段视图逻辑
独立开发, 开发人员可以更专注业务逻辑和数据的开发, 设计人员可以专注于页面的设计
可测试, 界面素来是难于测试的, 而现在测试可以针对 ViewModel 来写
14,vue 如何实现按需加载配合 webpack 设置?
答: webpack 中提供了 require.ensure() 来实现按需加载, 以前引入路由是通过 import 这样的方式引入, 改为 const 定义的方式进行引入.
不进行页面按需加载引入方式: import home from './common/home.vue
进行页面的按需加载的引入方式: const home=r=>require.ensure([],()=>r(require('./commom/home.vue')))
15,vuex 是什么? 怎么使用, 那种功能场景使用它?
答: vue 框架中状态管理, 在 main.JS 中引入 store, 注入, 新建一个目录 store,......export, 场景有单页面应用, 组件之间的状态, 音乐播放, 登录状态, 加入购物车等
16,vuex 有哪几种属性?
答: state,getter,Mutation,Action,Module
vuex 中的 state 特性: a,vuex 就是一个仓库, 仓库里面放了很多对象, 其中 state 就是数据源存放地, 对应于一般 vue 对象里面的 data.
b,state 里面存放的数据都是响应式的, vue 组件从 store 中读取数据, 若是 shore 中的数据发生改变, 依赖这个额数据的组件也会发生更新
c, 他通过 mapState 把全局的 state 和 getters 映射当前组件 computed 计算属性中
vuex 的 Getter 特性: a,getters 可以对 State 进行计算操作, 他就是 store 的计算属性
b, 虽然在组件内也可以做计算属性, 但是 getters 可以在多组件之间复用
c, 如果一个状态只在一个组件内使用, 是可以不用 getters
vuex 的 Mutation 特性: Action 类似 mutation, 不同的是, action 提交的是 mutation, 而不是直接更改状态, action 异步操作
17,vue-router 有哪几种导航钩子?
答: 全局导航: beforeEach(to,from,next), 跳转前进行拦截, afferEach(to,from)
组件内导航: beforeRouteEnter, beforeRouteUpdata,beforeRouteLeave
18,vue 组件异步加载的方法?
答: 第一种, 使用 ()=>import()
第二种, 使用 resolve=>require(['./home'],resolve)
第三种, require.ensure(['./tab0.vue'], () => { resolve(require('./tab0.vue')) }, 'tab0')
19,node.JS 搭建一个简单的服务器?
- const http = require('http');
- http.createServer((req, res) => {
- // 设置请求头
- res.setHeader('Content-Type', 'text/plain; charset=utf-8');
- res.end('hello node');
- }).listen(8888, () => {
- console.log('服务已经启动');
- })
来源: http://www.bubuko.com/infodetail-3204294.html