Vue知识点
字数统计:2.4k字目录
- Vue的优点是什么
- Vue生命周期
- 路由之间跳转?
- 懒加载(按需加载路由)(常考)
- vue-router 有哪几种导航钩子?
- 说出至少 4 种 vue 当中的指令和它的用法
- Vuex
- vuex 是什么?怎么使用?哪种功能场景使用它?
- vuex 有哪几种属性
- vuex 的 store 特性是什么
- vuex 的 getter 特性是什么
- vuex 的 mutation 特性是什么
- vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中
- 不用 vuex 会带来什么问题
- vuex 原理
- 使用 Vuex 只需执行 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的示例,store 是如何实现注入的?
- state 内部支持模块配置和模块嵌套,如何实现的?
- 在执行 dispatch 触发 action(commit 同理)的时候,只需传入(type, payload),action 执行函数中第一个参数 store 从哪里获取的?
- Vuex 如何区分 state 是外部直接修改,还是通过 mutation 方法修改的?
- vue基础
- vue组件
- vue动画
- 说一下Vue的双向绑定数据的原理
- 解释单向数据流和双向数据绑定
- Vue 如何去除url中的
- 介绍虚拟DOM
- http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
Vue的优点是什么
低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的”View”上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计,使用 Expression Blend 可以很容易设计界面并生成 xml 代码。
可测试。界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。
Vue生命周期
beforeCreate
created
在这个生命周期之间,进行初始化事件,进行数据的观测,可以看到在created的时候数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)
beforeMount
mounted
beforeUpdate
updated
beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。
destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
答:总共分为 8 个阶段创建前/后,载入前/后,更新前/后,销毁前/后。
创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在
路由之间跳转?
声明式(标签跳转)
编程式( js 跳转) router.push(‘index’)
懒加载(按需加载路由)(常考)
webpack 中提供了 require.ensure()来实现按需加载。以前引入路由是通过 import 这样的方式引入,改为 const 定义的方式进行引入。
不进行页面按需加载引入方式:import home from '../../common/home.vue'
进行页面按需加载的引入方式:const home = r => require.ensure( [], () => r (require('../../common/home.vue')))
vue-router 有哪几种导航钩子?
三种
全局导航钩子1
2
3router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子1
2
3beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件
beforeEnte
说出至少 4 种 vue 当中的指令和它的用法
v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)
Vuex
vuex 是什么?怎么使用?哪种功能场景使用它?
vue 框架中状态管理。在 main.js 引入 store,注入。新建了一个目录 store,….. export 。场景有:单页应用中,组件之间的状态。音乐播放、登录状态、加入购物车
vuex 有哪几种属性
有 5 种,分别是 state、getter、mutation、action、module
vuex 的 store 特性是什么
vuex 就是一个仓库,仓库里放了很多对象。其中 state 就是数据源存放地,对应于一般 vue 对象里面的 data
state 里面存放的数据是响应式的,vue 组件从 store 读取数据,若是 store 中的数据发生改变,依赖这相数据的组件也会发生更新
它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性
vuex 的 getter 特性是什么
getter 可以对 state 进行计算操作,它就是 store 的计算属性
虽然在组件内也可以做计算属性,但是 getters 可以在多给件之间复用
如果一个状态只在一个组件内使用,是可以不用 getters
vuex 的 mutation 特性是什么
action 类似于 muation, 不同在于:action 提交的是 mutation,而不是直接变更状态
action 可以包含任意异步操作
vue 中 ajax 请求代码应该写在组件的 methods 中还是 vuex 的 action 中
如果请求来的数据不是要被其他组件公用,仅仅在请求的组件内使用,就不需要放入 vuex 的 state 里
如果被其他地方复用,请将请求放入 action 里,方便复用,并包装成 promise 返回
不用 vuex 会带来什么问题
可维护性会下降,你要修改数据,你得维护 3 个地方
可读性下降,因为一个组件里的数据,你根本就看不出来是从哪里来的
增加耦合,大量的上传派发,会让耦合性大大的增加,本来 Vue 用 Component 就是为了减少耦合,现在这么用,和组件化的初衷相背
vuex 原理
使用 Vuex 只需执行 Vue.use(Vuex),并在 Vue 的配置中传入一个 store 对象的示例,store 是如何实现注入的?
Vue.use(Vuex) 方法执行的是 install 方法,它实现了 Vue 实例对象的 init 方法封装和注入,使传入的 store 对象被设置到 Vue 上下文环境的store中。因此在VueComponent任意地方都能够通过this.store 访问到该 store
state 内部支持模块配置和模块嵌套,如何实现的?
在 store 构造方法中有 makeLocalContext 方法,所有 module 都会有一个 local context,根据配置时的 path 进行匹配。所以执行如 dispatch(‘submitOrder’, payload)这类 action 时,默认的拿到都是 module 的 local state,如果要访问最外层或者是其他 module 的 state,只能从 rootState 按照 path 路径逐步进行访问。
在执行 dispatch 触发 action(commit 同理)的时候,只需传入(type, payload),action 执行函数中第一个参数 store 从哪里获取的?
store 初始化时,所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch(‘submitOrder’, payload)的时候,actions 中 type 为 submitOrder 的所有处理方法都是被封装后的,其第一个参数为当前的 store 对象,所以能够获取到 { dispatch, commit, state, rootState } 等数据。
Vuex 如何区分 state 是外部直接修改,还是通过 mutation 方法修改的?
Vuex 中修改 state 的唯一渠道就是执行 commit(‘xx’, payload) 方法,其底层通过执行 this._withCommit(fn) 设置_committing 标志变量为 true,然后才能修改 state,修改完毕还需要还原_committing 变量。外部修改虽然能够直接修改 state,但是并没有修改_committing 标志位,所以只要 watch 一下 state,state change 时判断是否_committing 值为 true,即可判断修改的合法性。
####
####
vue基础
计算属性,方法与侦听器
计算属性的setter和getter
样式绑定,条件与列表渲染
Vue中的set方法
事件与表单绑定
vue组件
组件使用的细节点
父子组件传值与组件参数校验
原生事件绑定与非Props特性
使用bus进行非父子组件间传值
插槽的使用
动态组件
多组件状态管理与数据传递技巧
组件混入机制大幅精简组件代码
组件插槽提升组件复用度
动态组件提升组件灵活性
异步组件+组件缓存提升访问性能
组件API化简化组件调用过程
vue动画
Vue transition过渡
Vue transition-group过渡
Vue交互touch+mouse事件
CSS3过渡和帧动画
css 预处理
event、v-model、slot、keep-alive、transition、transition-group
说一下Vue的双向绑定数据的原理
vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应监听回调
解释单向数据流和双向数据绑定
单向数据流: 顾名思义,数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state
双向数据绑定:数据之间是相通的,将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下,会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化,增加了出错时 debug 的难度
Vue 如何去除url中的
vue-router 默认使用 hash 模式,所以在路由加载的时候,项目中的 url 会自带 #。如果不想使用 #, 可以使用 vue-router 的另一种模式 history1
2
3
4new Router({
mode: 'history',
routes: [ ]
})
需要注意的是,当我们启用 history 模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现 404 的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面
介绍虚拟DOM
https://www.jianshu.com/p/616999666920
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
####