供背书使用,内容比较简短,只限背书
星辰_博客目录
- vue 中如何封装一个组件
- Vue 中 computed 和 watch 的区别?
- vue 中插槽的理解
- v-show 和 v-if的区别
- 什么是 Vuex, 在那种场景下使用?
- Vuex刷新时数据会消失,那如何解决?为什么还要使用Vuex
- Vue 路由的使用步骤
- 常见 Vue 组件库有哪些?
- vue的mvvm原理
- Vue 的生命周期
- Vue 实现数据双向绑定的原理?
- vue组件中data为什么必须是一个函数
- vue中组件通信的方式
- Vue 中有几种路由模式
- Vue路由导航守卫
- 路由中 r o u t e 和 route 和 route和router 的区别?
- vue 中 v-for的key 属性的作用?
- Vue 有哪些常用的事件修饰符?
- Vue 中如何解决插值表达式闪烁问题?
- 如何实现给样式添加作用域
- 动态添加一个路由规则
- 何优化页面的加载效率
- 路由懒加载三种方式:
- keep-alive 组件的作用是什么
- vm.$nextTick(fn)有什么用
- 混入(mixin)有什么作用
- Vue路由传参
- 移动端布局有哪些?
- 如何父组件组件内修改子组件样式
- 什么是单页面应用(SPA)
- vue和react的相同与不同
vue 中如何封装一个组件
.vue文件内部是三部分组成, template 模板部分, script 逻辑部分, style 样式部分
一定要在 script 部分使用 es6 模块化的导出语法(export default{}), 进行导出
Vue 中 computed 和 watch 的区别?
- computed 是计算属性,可以根据 data 中的数据成员,动态计算出一个新的数据成员,必须有返回值
- watch 是监视器,监视 data 中某一个数据成员的改变或路由中的某些属性的改变, 可以根据这个改变, 做一些其他操作
vue 中插槽的理解
设置在自组件内部的插槽像一个盒子,位置由子组件决定,放什么内容由父组件决定。
Vue 中的插槽分为三种, 匿名插槽, 具名插槽, 作用域插槽.
v-show 和 v-if的区别
v-show 是通过 css 的方式来隐藏元素, 而 v-if 是根据条件是否成立决定是否要创建元素.
如果某个元素需要频繁切换显示状态的话, 建议是使用 v-show
什么是 Vuex, 在那种场景下使用?
Vuex 是针对 vue 的一个状态管理工具. 有几个核心的部分。
- state 存储状态数据;
- mutations: 更新数据的方法,
- actions: 调用 mutations 中的方法, 更新 state 数据;
- getters: 对 state 中的数据进行预处理
- 使用场景:当组件的关系比较复杂的时候, 可以使用 vuex 简化组件间的传值.
Vuex刷新时数据会消失,那如何解决?为什么还要使用Vuex
- 在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失。
- 原因:因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化
- 解决办法:将state的数据保存在localstorage、sessionstorage或cookie中,这样即可保证页面刷新数据不丢失且易于读取,推荐sessionstorage
Vue 路由的使用步骤
1,下载路由模块 vue-router
2,创建路由对象
3,配置路由规则
4,将路由对象注册为vue实例对象的成员属性
常见 Vue 组件库有哪些?
PC 端组件库: element-ui, ant-design, iview
移动端: mint-ui, vant, vux
vue的mvvm原理
- 创建一个vue实例传入一个对象,vue遍历对象里的data对象,使用Object.defineProperty()得到data对象里所有属性的getter和setter。
- 实例创建后,会创建一个watcher(观察者),setter触发后会通知观察者,观察者回调函数中调用实例的render方法,重新生成虚拟dom。
- 虚拟dom:第一次渲染真实dom后,会生成一个虚拟dom,setter触发时(改变数据)通知观察者,观察者回调函数中调用实例的render方法,重新生成虚拟dom,新的虚拟dom会和之前的虚拟dom采用diff算法比较,最后操作真实dom。
- diff算法:在dom树中分层比较。利用key属性唯一的特点,加快了效率。
Vue 的生命周期
- beforeCreate(开始进行一些数据和方法的初始化)
- created(已经完成数据和方法的初始化, data 中的数据和 methods 中的方法可以使用了),
- beforeMount(开始渲染虚拟Dom)
- mounted(已经完成了虚拟dom渲染,可以操作真实dom)
- beforeUpdate(data中的数据即将被更新,会执行)
- updated(data中的数据已经更新完毕,会执行)
- beforeDestroy(vue 实例即将销毁, 此时 data 中的数据和 methods 中的方法依然处于可用状态)
- destroyed(vue 实例已经销毁, 此时 data 中的数据和 methods 中的方法已经不可用)
Vue 实现数据双向绑定的原理?
Vue 是使用数据劫持, 结合发布者订阅者模式实现双向数据绑定的
vue组件中data为什么必须是一个函数
复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,不会共享同一个data对象。
vue中组件通信的方式
- 父传子:props
- 子传父:$emit、ref
- 兄弟:EventBus
Vue 中有几种路由模式
hash,history;可以在创建路由对象的时候,使用mode属性来切换路由模式
Vue路由导航守卫
路由守卫是在页面进行路由跳转的时候做一些处理
全局前置守卫beforeEach
全局后置守卫afterEach
路由独享beforeEnter
组件内部beforeRouteEnter
路由中 r o u t e 和 route 和 route和router 的区别?
r
o
u
t
e
中
存
储
的
是
跟
路
由
相
关
的
属
性
(
如
route 中存储的是跟路由相关的属性(如
route中存储的是跟路由相关的属性(如route.params,$route.query) ;
r
o
u
t
e
r
中
存
储
的
是
和
路
由
相
关
的
方
法
(
如
router 中存储的是和路由相关的方法(如
router中存储的是和路由相关的方法(如router.push(),$router.go()),
vue 中 v-for的key 属性的作用?
Key 属性的作用是在数据层和视图层之间建立一一对应关系, 方便后期对页面进行局部更新. 如果某一条数据发生改变, 只更新当前数据对应的 DOM 元素.
Vue 有哪些常用的事件修饰符?
.prevent: 阻止默认事件;
.stop: 阻止冒泡;
.once: 事件执行一次;
.self:event.target是当前元素自身时触发处理函数
Vue 中如何解决插值表达式闪烁问题?
使用 v-html 或 v-text 替代插值表达式;
使用 v-clack 解决插值表达式闪烁
如何实现给样式添加作用域
style标签加上scoped属性
动态添加一个路由规则
router.addRoutes([{path:’’,component:’’}])
何优化页面的加载效率
使用路由懒加载和组件懒加载;
不要打包一些公共的依赖(vue, 组件库);
使用 CDN 加载这些依赖文件
路由懒加载三种方式:
- vue 异步组件
- ES6 的 import()
- webpack 的 require.ensure()
keep-alive 组件的作用是什么
keep-alive 可以将被包裹的组件暂存在内存当中, 当页面切换的时候, 组件不会被重复的销毁和创建, 从而可以提整体性能, 同时也可以保存组件的一些状态.
vm.$nextTick(fn)有什么用
延迟某个操作的执行,直到dom更新以后在执行
混入(mixin)有什么作用
分发 Vue 组件中的可复用功能,组件使用混入,就可以得到混入对象所有的属性和方法
Vue路由传参
- 声明式导航传参:router-link的to属性
- name+params
- path+query
- 编程式导航传参:$router.push
- name+params
- path+query
移动端布局有哪些?
- flex布局
- 媒体查询+REM布局
- bootstrap布局
- 百分比布局
如何父组件组件内修改子组件样式
- /deep/
- ::v-deep
什么是单页面应用(SPA)
就是只有一张页面的应用,vue就是单页面应用
- 优点:
- 不用刷新页面,整个交互过程都是通过Ajax来操作
- 适合前后端分离开发,服务端提供http接口,前端请求http接口获取数据,使用JS进行客户端渲染。
- 缺点:
- 首页加载慢
- SEO不友好
vue和react的相同与不同
相同点:
- 都支持服务器端渲染
- 都有虚拟Dom
- 都是数据驱动视图
- 都有状态管理工具,react有redux
不同点:
- React的mvc的ciew层,Vue是mvvm
- vue是数据双向绑定,react是单向数据流