近期问题总结

9次阅读

共计 2089 个字符,预计需要花费 6 分钟才能阅读完成。

VUE
1、router 路由与 a 标签的区别:https://www.jianshu.com/p/34b… 2、VUE 双向绑定的原理:答:VUE 实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值 (get) 和设置属性值 (set) 的操作来实现的。Vue 的双向数据绑定就是只要在读取值(getter)时收集观察者,在赋值(setter)时触发观察者更新函数,就可以实现数据变更,从而实现 DOM 重新渲染。3、vue2.0 中 router-link 详解:https://blog.csdn.net/lhjueji…4、vue 项目开发前的 es6 的知识储备:https://www.cnblogs.com/untir…5、箭头函数和普通函数的区别:https://www.jianshu.com/p/73c…
总结:
1> 箭头函数写代码拥有更加简洁的语法;
2> 箭头函数的 this 永远指向其上下文的 this,任何方法都改变不了其指向,如 call(), bind(), apply(); 普通函数的 this 指向调用它的那个对象
6、Vue 的生命周期,详细介绍各个阶段
创建前 / 后 在 beforeCreated 阶段,vue 实例的挂载元素 $el 和数据对象 data 都为 undefined,还未初始化。在 created 阶段,vue 实例的数据对象 data 有了,$el 还没有。载入前 / 后 在 beforeMount 阶段,vue 实例的 $el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。更新前 / 后 当 data 变化时,会触发 beforeUpdate 和 updated 方法。销毁前 / 后 在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在 它可以总共分为 8 个阶段:创建前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 销毁后.
7、简单描述每个周期具体适合哪些场景?
生命周期钩子的一些使用方法:
beforecreate : 可以在这加个 loading 事件,在加载实例时触发
created : 初始化完成时的事件写在这里,如在这结束 loading 事件,异步请求也适宜在这里调用
mounted : 挂载元素,获取到 DOM 节点
updated : 如果对数据统一处理,在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作 dom
8、vue-router 实现原理
根据 url 来 path 匹配相应的 component,在把匹配到的 component 渲染到指定的 dom 上就好了
vue-router 是 vue 的路由插件, 组件:router-link router-view
9、Vuex 各个状态
有 5 种,分别是 state、getter、mutation、action、module
state Vuex 使用单一状态树,既每个应用将仅仅包含一个 store 实例,单单一状态树和模块化并不冲突。存放的数据状态,不可以直接修改里面的数据。
mutations mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据。
getters 类似 vue 的计算属性,主要用来过滤一些数据。
action action 可以理解为通过 mutations 里面处理数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据。view 层通过 store.dispath 来分配 action。Action 类似于 mutation,不同在于:Action 提交的是 mutation,而不是直接变更状态;Action 可以包含任意异步操作。
modeules 项目特别复杂的时候,可以让每一个模块拥有自己的 state,mutation,action,getters,使得结构非常清晰,方便管理
10、axios 是什么?怎么使用?描述使用它实现登录功能的流程
axios 是请求后台资源的模块。npm i axios -S
如果发送的是跨域请求,需在配置文件中 config/index.js 进行配置
11、兄弟组件,父子传值
** 父 — 子 ** 父组件通过标签传值,子组件通过 props 接收
** 子 — 父 ** 通过 this.$emit 将方法和数据传递给父组件,父组件通过 $on 接收
**1. 父组件与子组件传值 **
父组件传给子组件:子组件通过 props 方法接受数据;
子组件传给父组件:$emit 方法传递参数;
**2. 非父子组件间的数据传递,兄弟组件传值 **
EventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接受事件,项目比较小时,用这个比较合适;
VueX,创建一个数据仓库,整个项目全局都可以往这个仓库存放数据和读取数据
如果父组件想要调用子组件的方法
vue 会给子组件添加一个 ref 属性,通过 this.$refs.ref 的值便可以获取到该子组件,然后便可以调用子组件中的任意方法

正文完
 0