双向绑定原理
vue数据通过数据劫持和发布者-订阅者模式两者结合完成数据的双向绑定。
通过Object.defineProprety()劫持各个属性的getter和setter方法,在数据发生变动时发布消息给订阅者,触发相应的监听回调。
MVVM
MVVM是model-view-viewModel的缩写。model是模型,后端传递来的数据。view是视图,用户所看到的页面。viewModel是视图模型,两者通信的桥梁。将模型转换为视图使用数据绑定,将视图转换为模型使用DOM事件监听。
Vuex数据缓存
Vuex是Vue官方提供的状态管理器。在根组件中引入store,在所有子组件中可以通过this.$store访问到。
vuex有四个属性:state,getters,mutations,actions。
把外部数据定义在state中。在actions中调接口获取到后端数据,mutations中定义更新state的方法,将后端数据通过mutations然后commit到state,,当state变化时,页面自动更新。
VUE生命周期
- 创建阶段
beforeCreate:在实例初始化之后,数据观测配置之前调用
created:实例创建完成后立即调用
完成数据监测和初始化事件
- 挂载阶段
beforeMount:在挂在开始之前调用,相关的render函数首次调用
mounted:实例被挂载后调用
- 更新阶段
beforeUpdate:数据实时更新调用,在虚拟DOM重新渲染之前
updated:在虚拟DOM重新渲染之后调用
- 销毁阶段
beforeDestroy:在组件销毁之前调用
destroyed:实例销毁之后调用,所有的子实例和事件监听都被移除
vue,react对比
- 相同点:
- 都是用来虚拟DOM
- 都是单向数据流
- 都提供了响应式和组件化的视图组件
- 路由功能和状态管理都有相关的库
- 不同点:
- vue是双向数据绑定,react是单向数据绑定
- vue使用vue-cil工具,react使用create react app搭建环境
- vue适用于小型项目开发,react适用于大型项目开发
Element-UI常用组件
- NavMenu
- Form
- Upload
- Layout
- Icon
- Switch开关
Vue组件间通信有哪些方式
- 父组件向子组件传值
- 通过事件总线的方法
- 通过vuex
插槽slot
- vue使用<slot></slot>元素作为承载分发内容的出口
- v-slot:只能用于template
{{}}一闪而过的效果怎么解决
- 使用 v-cloak 指令
- [v-cloak] { display: none }这个指令隐藏未编译的标签直到实例准备完毕
vue.config.js文件的理解
vue多页面应用的实现原理
- 创建多个HTML文件
- 页面每一次跳转后端返回一个新的HTML文档
事件总线
- EventBus,称为事件总线
Vue异步组件
- 以工厂函数定义组件
- 工厂函数会异步解析组件
混入Mixin
- 混入 (mixin) 提供了一种分发 Vue 组件中的可复用功能。
- 全局混入时会影响之后创建的每一个Vue实例
父子组件通信
- 父级 prop 的更新会向下流动到子组件中
- 子组件通过$emit事件绑定
nextTick
- 将回调函数延迟在下一次dom更新数据后调用,获取更新后的DOM的Vue方法
- 当数据更新了,在dom中渲染后,自动执行该函数,