复习整理

150 阅读2分钟

1、MVVM、响应式、双向绑定、v-model

MVVM

image.png

image.png

image.png

响应式原理 / 双向绑定

data通过observer把每个属性转换成了getter和setter的形式去追踪变化,当watcher实例读取属性时,会触发getter,从而被添加到依赖收集列表dep中。当属性发生变化的时候会触发setter,通知dep列表中所有watcher执行更新函数,触发compile,将变量替换成数据,从而更新视图。 vue2不能侦测到对象属性的新增和删除

image.png

image.png

1、什么是setter、getter

const obj = {a:1 , b:2}

image.png 对象有两种属性:

  1. 数据属性:  就是我们经常使用的属性(a,b)

  2. 存取器属性: 就是一组获取和设置值的函数 get和set就是关键字,它们后面各自对应一个方法就是存储器属性

  3. get对应的方法为getter:  负责获取值,它不带任何参数

  4. set对应的方法为setter:  负责设置值,在它的函数体中,一切的return都是无效的

2、什么是Object.defineProperty() ?——定义修改属性

image.png

image.png

3、什么是Dep ?

Dep,它就像一个依赖管理。每当用到双向绑定的指令(v-model,v-name,{{ }} ),就在一个Dep中增加一个订阅者(addSub),订阅者只是更新自己的指令对应的数据。

  1. 例子: v-model='name’和 {{name}} 有两个对应的订阅者,各自管理自己的地方

4、响应式原文 t.csdn.cn/z18c7

5、Vue 中是如何检测数组变化?

image.png

Vue3.0和2.0对比

  • vue3响应式原理:在proxy的第二个参数handler中,track函数用来收集依赖,trigger函数用来触发更新。

image.png

image.png

v-model

image.png

image.png

2、路由(router就会去routes中去查找route)

配置

不能用a标签,而用vue-router的原因: Vue做的都是单页应用,就相当于只有一个主的index.html页面,所以你写的标签是不起作用的,你必须使用vue-router来进行管理。

image.png

路由嵌套

image.png

动态路由

image.png

image.png

路由跳转

image.png query类似 get(出现在url);params类似 post(隐藏)

image.png image.png

路由模式(hash、history)

image.png

导航守卫

image.png

路由懒加载

image.png

image.png

3、异步渲染、nextTick

4、生命周期(调用顺序、接口位置)

keep-alive

image.png

5、模板编译原理、template

6、diff算法、虚拟DOM

image.png