【云隐】vue.js基础

vue基础用法

理论

简单聊聊对于MVVM的了解

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

写法

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

如何实现数据双向绑定
a. 利用花括号，构筑了数据与视图的双向绑定 - 若干正则
b. 通过视图绑定事件，来处理数据

<!-- 面试题1 -->
<!-- 计算类型 -->
1. 绑定数据计算 number +1
2. 绑定数据截断 number.splice(0, -1)
3. 浮点数 number.toFixed(2)
4. 转整型 parseInt(number, 10)
<!-- 加工类型 -->
5. 函数加工 
<!-- 条件类型 -->
6. 三元运算 100 > 99 ? '对' : '错'
7. 逻辑运算 100 > 99 && 100 > 98
8. 取反 !number
9. 变量判断 number > 80 ? '大于' : '小于'
<!-- 事件绑定 -->
<h3 @click="number++">Essential Links</h3>

生命周期

简述vue的生命周期

beforeCreate => created => beforeMount => mounted => beforeUpdate => updated => beforeDestroy => destroyed

beforeCreate - 空实例，不能使用this
created - 实例创建完成，可以拿到data/props/methods/computed - 可以进行数据操作，但是不能涉及vDom和Dom

beforeMount - 生成vDom，可以进行数据操作，不可涉及dom
mounted - 可以进行任何操作

beforeUpdate - vDom更新，Dom未更新，此时可以更新数据
update：Dom已经更新了 - 谨慎操作数据（如果在这操作数据很可能造成死循环），做数据读取。

beforeDestroy : 实例vm尚未被销毁-可以进行清空eventBus、reset store、clear计时器等操作
destroyed：实例已经被销毁 - 收尾

其他问题：
1. 为什么vue要用一个函数data()来return变量
作用域的问题【59:00-01:02:00】
如果我的父组件里面有很多个子组件，但是每个子组件中都存在同样变量名的参数（number），如果data是个对象的话，多个组件的data会发生污染。
在渲染子组件时，会收集各个子组件定义的变量，

2. 
$nextTick(()=>{})  通过视图更新来触发，代表下一次更新，即使写在ccreated生命周期内，也还是会在updated的时候执行。

3.destroyed的使用场景
是用于清空没有被reset掉的东西，比如说如果当前我的vm和另一个vm使用的是同一套vuex，如果当中任何一个vm被销毁了，那么所对应的vuex应该被恢复为默认值，但是如果写在beforeDestroy的话，这个时候，实例并没有完全被销毁，可能会出现一些不可控的因素，比如触发了watch的方法等。

时序(setTimeout)是永远不可靠的，回调才是.

定向监听

computed 和 watch

相同点：
1. 基于vue的依赖收集机制
2. 都是呗依赖的变化触发，进行改变进而进行处理计算
不同点：
1. 入和出
computed：多入单出 - 多个值变化，组成一个值的变化
watch：单入多出 - 单个值的变化，进而影响一系列的状态变更

2. 性能
computed：会自动diff依赖，若依赖没有变化，会改从缓存中读取当前计算值
watch：无论监听值变化与否，都会执行回调
（建议使用computed）

3. 写法上
computed：必须有return返回值
watch：不一定会有return返回值

4.时机上
computed：从首次生成赋值，就开始计算运行了
watch：首次不会运行，除非将immediate设置为true

其他问题：
数值1=>2=>1没变化，这种情况，computed应该就缓存，watch是执行两次嘛？

条件

v-if & v-show & v-else & v-else-if

v-if 和 v-show 的相同点和不同点
v-if ：如果值为false的时候，当前元素节点及其子节点不会被渲染出来
v-show ：存在实际节点及其子节点，但不展示，不占据位置
（涉及性能优化，窗口节点优化）
如果做一个很长的列表，要使用到v-if，可以将超出屏幕的元素隐藏起来，使页面性能提高。

循环

v-for 和 v-if 优先级

v-for优先级 > v-if优先级  先循环，再判断

key的作用是什么？

1. 模板的编译原理 - tempate => dom 
template => 正则匹配语法 - 生成AST：静态值 + 动态变量 => 转换AST为可执行方法 => render() => dom

2. dom diff
区分前一次和后一次，那些dom发生了变化。
1 2 3 4 5 6 变化前
6 5 7 3 2 1 变化后
层级：只考虑单层复用，多层级遍历实现
顺序：双向指针，首尾向中间移动，直到两个指针汇合，代表当前这次diff结束
替换：移动、新增、删除；优先复用 - key  => 快速识别顺序
3. key作用 - 尽可能复用节点
常见问题：使用index、随机数做key - 不合适

指令

默认指令

v-once - 只渲染一次
v-text - 只渲染字符串
v-html - 渲染html
v-bind - : 绑定赋值
v-on - @ 监听
v-model - 双向绑定  - 语法糖 本质是： :value + @input
* 重配置
```js
model: {
	prop: 'selected',
	event: 'change'
}

##### 自定义指令
```js
directives: {
	zhaowa: {
		update: function() {
			// ...	
		}
	}
}

<div v-zhaowa><div>

事件

v-on

修饰符

.stop 阻止传播
.prevent 阻止默认事件执行
.capture 使用捕获模式
.self 当前点击的event，防止事件冒泡和捕获
.once 只触发一次
.passive 不触发prevent事件

按钮修饰符

enter delete

事件设计 - 为何vue把事件写在模板上，而不是js中

模板定位事件触发源 + 触发源 寻找触发事件逻辑 —— 更方便定位问题
js与事件本身解耦 —— 更便于测试隔离
viewModel销毁，自动解绑事件 —— 更便于垃圾回收

组件化

一般组件 + 动态组件