Vue2 基础Vue基本用法理论 MVVM 发展史以及旁支 a. 语义化模版 b. MVC - model view

Vue基本用法

理论

MVVM

1. 发展史以及旁支

a. 语义化模版

b. MVC - model view controller

c. MVVM - Model-View-ViewModel

1. 数据会绑定在ViewModel层并且自动将数据渲染到页面中
2. 视图发生变化时，会通知viewModel层更新数据

写法

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

数据双向绑定 a. 利用花括号，构筑了数据与视图的双向绑定

//计算类型
//1.绑定数据的计算
<div>{{ number + 1 }}</div>
//2.截断
<div>{{ str.slice(0,-1) }}</div>
//3.浮点数
<div>{{ number.toFixed(2)}}</div>
//4.转整型
<div>{{ parseInt(number,10)}}</div>
……
//加工类型
// 5.函数加工
<div>{{ calNumber(number) }}</div>

//条件类型
//6.三元运算
<div>{{ a>b? '对':'错' }}</div>

// 7.逻辑运算
<div>{{ a>b&&c>d }}</div>

//8.取反
<div>{{ !flag }}</div>
//9.变量判断
<div>{{ a>b? '对':'错' }}</div>

b. 通过视图绑定事件来处理数据

<div @click='number++'>{{ number }}</div>

生命周期

beforeCreate: new Vue() - 空实例实例挂载功能

created: data、props、method 、computed -可以操作数据、但是不能涉及vdom和dom

beforeMount:生成vDom - 可以操作数据，但是不能操作dom

mounted:Dom - 可以做任何操作

beforeUpdate:vDom已经更新，但是Dom还没更新是旧的。- 可以更新数据

updated:dom已经更新 - 需要谨慎操作数据，有可能会导致死循环

beforeDestory:实例vm尚未被销毁 - 清空实例下导致内存泄漏的东西 - eventBus、reset、store、clear计时器

destoryed: 实例已经被销毁 - 结束

定向监听

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 2 1 层级：只考虑单层复用，多层级遍历实现顺序：双向指针，首位向中间移动替换：移动、新增、删除；优先复用 - key => 快速识别顺序

key作用 - 尽可能复用节点 index 作为key 或者随机数作为key 不合适

指令

默认指令

v-once - 只执行一次
v-text - 渲染字符串
v-html - 渲染html
v-bind - : 绑定赋值
v-on - @ 监听
v-model - 双向绑定 - 语法糖（:value + @input）属性下传+事件上抛
- 重配置
```
    model:{
        prop: 'selected',
        event: 'change'
    }
```

自定义指令

    directive:{
        myxxx:{
            update:function(){
                ……
            }
        }
    }
    <div v-myxxx></div>

事件

v-on

修饰符

.stop 阻止传播
.prevent 阻止默认事件执行
.capture 捕获
.self event target是自身执行
.once 只执行一次
.passive 不触发prevent事件

按钮修饰符

enter delete

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

模版定位事件触发源 + 触发源寻找触发事件逻辑 - 更方便定位问题

js与事件本身解耦 - 更便于测试隔离

viewModel销毁，自动解绑事件 - 更便于回收

组件化

一般组件和动态组件

    //一般组件
    <Comp1></Comp1>
    //动态组件
    <component :is='currentComponent'></component>