vue.js基础

vue基础用法

理论

面试题1：简单聊聊对于MVVM的理解

• 1. 发展史以及旁支
     a. 语义化模板
     b. MVC - model view controler
     c. MVVM - model view model
     i. 数据会绑定在view model层并自动渲染到页面中
     ii. 视图发生变化时，会通知view model层更新数据

写法

vue是如何利用MVVM思想进行项目开发

数据双向绑定
a. 利用花括号 构建了数据和视图的双向绑定
面试问题：

1. 绑定数据的计算可以写在花括号里吗？
   答： 可以
2. 字符串截断可以写在花括号里吗？
   答：可以
3. 花括号里可以写任意的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

相同点：

1. 基于vue的依赖收集机制
2. 都是被依赖的变化触发，进行改变进而进行处理计算

不同点：

1. 入和出
   computed： 多入单出，多个值变化组成一个值的变化
   watch：单入多出，单个值得变化进而影响一系状态的改变
2. 性能
   computed：自动diff依赖，如果依赖没有变化，则不会执行计算，会直接从缓存中读取计算值
   watch： 无论监听值变化与否，都会执行回调中的计算
3. 写法上
   computed： 必须有return 返回值
   watch： 不一定
4. 时机上
   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的作用

1. 模板编译原理 - template => dom
   template => 正则匹配语法 - 生成AST：静态 + 动态 => 转换AST为可执行方法 => render() => dom
2. dom diff
   1 2 3 4 5 6
   6 5 7 3 1 2
   层级：只考虑单层复用 多层级遍历实现
   顺序：首尾指针，向中间移动
   替换：移动，新增，删除，优先复用 -key => 快速识别顺序
3. 尽可能复用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销毁，自动解绑事件 ——更便于垃圾回收

组件化

一般组件 + 动态组件