vue基础用法
理论
面试题1:简单聊聊对于MVVM的理解
-
- 发展史以及旁支
a. 语义化模板
b. MVC - model view controler
c. MVVM - model view model
i. 数据会绑定在view model层并自动渲染到页面中
ii. 视图发生变化时,会通知view model层更新数据
- 发展史以及旁支
写法
vue是如何利用MVVM思想进行项目开发
数据双向绑定
a. 利用花括号 构建了数据和视图的双向绑定
面试问题:
- 绑定数据的计算可以写在花括号里吗?
答: 可以 - 字符串截断可以写在花括号里吗?
答:可以 - 花括号里可以写任意的js表达式,比如三元运算等
b. 通过视图绑定事件来处理数据
生命周期
面试题:vue生命周期
beforeCreate => created => beforeMount => mounted => beforeupdate => updated => beforeDestroy => destroyed
beforeCreate: new Vue({}) - 空实例 - 实例挂载功能
created: data, props, method, computed - 数据操作,不涉及到vdom和dom
beforeMount: 有了虚拟dom(不是真是dom,是用来描述真实dom的一些数据) - 数据操作, 但不可以涉及dom
mounted: 任何操作,已经完成了真实dom的渲染
befroeUpdate: 视图在更新之前的回调钩子,vdom更新了但是dom还没有更新 - 可以更新数据
updated: dom已经更新了 -此时要谨慎操作数据
beforDestroy: 实例vm尚未被销毁 - 清空eventBus,reset store, clear定时器
destroyed: 实例已经销毁 - 收尾
定向监听
面试点: computed和watch
相同点:
- 基于vue的依赖收集机制
- 都是被依赖的变化触发,进行改变进而进行处理计算
不同点:
- 入和出
computed: 多入单出,多个值变化组成一个值的变化
watch:单入多出,单个值得变化进而影响一系状态的改变 - 性能
computed:自动diff依赖,如果依赖没有变化,则不会执行计算,会直接从缓存中读取计算值
watch: 无论监听值变化与否,都会执行回调中的计算 - 写法上
computed: 必须有return 返回值
watch: 不一定 - 时机上
computed:从首次生成赋值就开始计算运行
watch:首次不会运行,除非设置immediate: true
条件
v-if v-show v-else v-else-if
v-if 无dom 不会渲染实际节点及其子节点
v-show存在实际的节点及其子节点 但不展示 不占据位置
循环
面试题: v-for v-if的优先级
v-for的优先级大于v-if 先循环再判断
面试题:key的作用
- 模板编译原理 - template => dom
template => 正则匹配语法 - 生成AST:静态 + 动态 => 转换AST为可执行方法 => render() => dom - dom diff
1 2 3 4 5 6
6 5 7 3 1 2
层级:只考虑单层复用 多层级遍历实现
顺序:首尾指针,向中间移动
替换:移动,新增,删除,优先复用 -key => 快速识别顺序 - 尽可能复用dom节点
常见问题:index做key,随机数做key其实都不合理
指令
默认指令
v-once 只渲染一次
v-text 渲染字符串
v-html 渲染html
v-bind :绑定赋值
v-on @监听
v-model 双向绑定 ——语法糖
自定义指令
directives: {
zhaowa: {
update: function () {
//...
}
}
}
<div v-zhaowa></div>
事件
v-on
修饰符
.stop .prevent .capture .self .once .passive
按钮修饰符
enter delete
事件设计 -为何vue把事件写在模板上,而不是js中
模板定位事件触发源 + 触发源寻找触发事件逻辑 ——更方便定位问题
js与事件本身解耦 ——更便于测试隔离
viewModel销毁,自动解绑事件 ——更便于垃圾回收