vue原理相关总结

一、vue20的双向绑定是怎么实现的

2、observer，compile，watcher

（1）observe是一个数据监听器，核心方法是ObjectdefineProperty

（3）compile是一个指令解析器，对需要监听的节点和属性进行扫描和解析。

3、此模式的优点：不需要显式调用，可以直接通知变化，更新视图；劫持了属性setter，不需要额外的diff *** 作

4、ObjectdefineProperty缺点

（1）不能监听数组

（2）不能监听整个对象，只能监听属性

（3）不能监听属性的增删，只能监听变化

5、30版本使用Proxy

（1）可以监听数组

（2）可直接监听整个对象，不用层层递归属性

（3）get和set时候直接有参数，不需要单独存储变量

（4）new Proxy()会返回一个新对象，不会污染源对象。

二、数据不更新的问题

1、更新的原理：在数据读取时收集依赖，在赋值时通知依赖更新。

2、object有defineProperty方法，通过getter，setter只监听了属性的读取和赋值，但是新增属性和删除属性没有检测，所以专门提供了$set和$delete来实现

3、array，没有defineProperty方法，没有setter，通过get和新建数组方法拦截器修改原生方法push,pop,shift,unshift,splice,sort,reserve来实现监听，而通过修改数组下标 *** 作数组的不会被检测，所以专门提供了$set和$delete来实现

4、$set(target, key, value)和$delete(target, propertyName/index)方法原理

（1）判断target是否是undefined，null，或者原始类型,或者vue实例，或者vue实例的跟数据对象

（2）target为数组，则还是通过调用splice *** 作索引更新数据

（3）target为对象，且为响应式，则调用defineReactive *** 作数据

（4）更新完数据后通知依赖更新

三、computed和watch和methods

1、computed

（1）设计初衷：为了使模板中的逻辑运算更简单

（2）适用于数据被重复使用或者计算复杂费时的场景；依赖其他数据的场景

（3）读取缓存，依赖不变，则不需重新计算。（根据dirty标志判断）

2、watch是对数据的监听回调

3、computed和watch的区别

相同点：都会观察页面的数据变化

不同点：（1）computed是读取缓存，watch每次都要重新执行；

（2）watch更适合数据变化时的异步 *** 作和开销较大的 *** 作。

4、computed和methods的区别

computed依赖缓存，可以定义getter和setter，但是methods不行

四、vue-router的模式区别

1、abstract：非浏览器环境下使用

2、hash：

（1）默认。监听hashchange实现。

（2）有点，兼容性好，ie8支持

（3）缺点：看起来奇怪

3、history：

（1）h5新增的。允许开发者直接修改前端路由而不重新触发请求页面

（2）实现原理：监听popstate事件。能监听到用户点击浏览器的前进后退事件或者手动调用go，back，forward事件；不能监听到pushState和replaceState事件。

（3）为了避免浏览器刷新出现的404页面，需要在服务端配置兼容。

（4）如果浏览器不支持，会降级到hash模式

通过vueuse插件机制和vuemixin将store在beforeCreate和destroyed生命周期进行混入。

五、vuex解决了什么问题

1、vuex解决了vue项目中的数据状态管理问题

2、是组件通信的一种方式。

3、原理：创建了单一的状态树，包含state，mutation，action，getter，module。

4、view(dispatch)action(commit)mutation(mutate)state(render)view

5、通过vue的data和computed，让state变成响应式，

6、通过vueuse插件机制和vuemixin将store在beforeCreate生命周期进行混入。

六、nextTick是怎么是实现的

1、作用：将回调延迟到下次DOM更新循环之后执行

2、原因：VUE在更新DOM时是异步的，vue检测到数据变化后，不会立即更新DOM，而是会开启一个事件队列，并缓冲同一时间循环中的所有数据变更，在下一次tick中，执行更新DOM。

3、js的运行机制：js是单线程的，基于事件循环，有宏任务和微任务。

4、内部原理：

（1）能力检测：Promisethen(微), MutationObserve(微)，setImmediate(微),setTimeout(宏)

（2）将回调函数推入回调队列，锁上易步锁，执行回调。

七、keep-alive内置组件和LRU算法（队列）

1、自身不会渲染成DOM，没有常规的 标签，是个函数组件，被他包裹的组件，切换时会被缓存在内存中，而不是销毁。

（1）可以有条件的缓存:include（匹配到的缓存）,exclude（匹配到的不缓存）,max(最多可以缓存多少组件实例)

2、原理：内部维护了thiscache（缓存的组件对象）和thiskeys（thiscache中的key），运用LRU策略。

（1）命中了缓存的组件要调整组件key的顺序。

（2）缓存的组件数量如果超过thismax时，要删除第一个缓存组件。

（3）LRU(Least recently used，最近最少使用)：根据数据的 历史 访问记录来进行淘汰数据。“如果数据最近被访问过，那么将来被访问的几率也更高。”

3、生命周期钩子：activated和deactivated，被keep-alive包括的组件激活和停用时调用。先停用组件的deactivated，再激活组件的activated

条件渲染主要有两个指令：v-if v-show

   有v-if 相应会有 v-else v-else-if

      v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染

v-if为true的表达式会显示

v-if为false的表达式不会显示

示例需要用到的data部分：

利用data变量进行判断使用

类似于if-else条件语句判断

在template上使用 v-if 条件渲染分组

利用上面提供的data变量和下面的template结合，启动网页后查看源码可知

v-show与v-if区别：

  v-show 只是简单的切换元素的display CSS propertity,带有 v-show 元素始终会被渲染并保存在 dom 中

    v-if:后面若为false，标签直接消失，控制dom元素的创建和销毁

      v-if是一个编译、卸载的过程，创建和销毁子组件

          v-show是控制css property

v-for用于循环遍历数据

 示例需要用到的data部分：

用v-for把一个数组映射为一组元素

  v-for基于一个数组来渲染一个列表

   v-for使用数组，item代表数组中每个元素，index表示数组元素下标

两种分隔符：in of

  item标识键值，key表示键名，index表示索引

注意观察上面循环标签的最后都有 :key

 为什么要添加key

  key作为唯一标识

   为了给vue一个提示，以便它能跟踪每一个节点的身份，重而重用和重新排序现有元素

官方解释：

你可以用v-model 指令在表单＜input> 、 <textarea＞及<select＞元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

v-model会 忽略所有表单元素的value 、checked 、 selected attribute 的初始值。 它将始终将当前活动实例的数据作为数据来源。你应该通过JavaScript在组件的 data选项中声明初始值。

v-bind （:value="msg"）负责将data变量显示页面input框

v-on (@input="changeValue) 负责利用函数中事件对象获取页面input框的值传data变量使其发生改变

缺陷：v-model数据中每一次改变都会触发试图更新，特别消耗性能

因此官方为v-model设定了一些修饰符

lazy ,当输入框失去焦点,再去同步输入框中的数据

trim:自动过滤用户输入的首尾空白字符

如果想自动将用户的输入值转为数值类型，可以给v-model添加number修饰符

第三方组件官网

Element-ui

iView

Vant

如果父类组件需要直接获取子类的方法 可以使用 $children

子获父 $parent 子获取跟组件 $root

如果使用自定义组件，在里面插入其他的文字或者标签，是不能够显示的，如果想在组件中插入其他标签，需要在标签中插入 <slot></slot> ,插槽写在哪个位置，插入的文字或者标签，就在哪个位置显示

我们先定义3个 全局 的自定义组件 分别为 child1 child2 child3

我们把vue实例当作根组件（父组件）

父跟子的关系

通常情况下，在父组件中有个子组件，子组件想要使用（获取）父组件的值，我们使用 $parent 来获取父组件的的值

我们在 child1 子组件中插入了一个组件这个时候 child1 变成了 childson 的父组件，如果这个时候我们在获取根组件（vue实例 | 根实例），这个时候我们可以用多个 $parent 来获取祖组件数据，当然，我们可以用 $root 直接获取根实例的值

父组件获取子组件的值，我们用 $children 来获取，

$children 获取的是所有子组件的实例，返回的是数组类型，再通过下标获取指定的子组件

如果页面的结构出现了调整，这里获取的具体的组件可以就对不上号了。：

如下