nexttick原理是什么 (nexttick的原理和作用)

本文目录导航：

• nexttick原理是什么？
• Vue学习系列一 —— MVVM响应式系统的基本实现原理
• [vue3]ref函数和reactive函数的响应式原理

nexttick原理是什么？

nexttick原理实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。

同步任务执行完毕，开始执行异步watcher队列的任务，更新DOM。

Vue在内部尝试对异步队列使用原生的Promise。

then和MessageChannel方法，如果执行环境不支持，会采用setTimeout(fn，0)代替。

扩展资料：

vue在web开发、网站制作中的优势

1、据绑定：vue会根据对应的元素，进行设置元素数据，通过输入框，以及get获取数据等多种方式进行数据的实时绑定，进行网页及应用的数据渲染 。

2、组件式开发：通过vue的模块封装，它可以将一个web开发中设计的各种模块进行拆分，变成单独的组件，然后通过数据绑定，调用对应模版组件，同时传入参数，即可完成对整个项目的开发。

3、简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

Vue学习系列一 —— MVVM响应式系统的基本实现原理

MVVM是Model-View-ViewModel的简写。

它模式是MVC—>MVP—>MVVM的进化版。

Model负责用JavaScript对象表示，View负责UI界面显示，两者做到了最大限度的分离。

而把Model和View关联起来的就是ViewModel。

ViewModel负责把Model的数据同步到View显示出来，还负责把View的界面修改同步回Model更新数据。

脏值检查 : 是通过脏值检测的方式来比对数据是否有变更而决定是否更新视图。

原理是，拷贝一份 copy_viewModel 在内存中,用户操作导致 viewModel 发生改变的行为时，框架都会把 copy_viewModel 和最新的 viewModel 进行深度比较，一旦发现有属性发生变化，则重新渲染与之绑定的DOM节点。

最简单的方式就是通过 setInterval() 定时轮询检测数据变动，angular触发时进入脏值检测。

但只限 指定的事件(如：用户点击，输入操作，ajax请求，setInterval，setTimeout等...)，否则需手动调用 apply 函数去强制执行一次脏检查。

数据劫持 : 则是采用数据劫持结合发布者-订阅者模式的方式，通过 () 来劫持各个属性的 setter ， getter 在数据变动时发布消息给订阅者，触发相应的监听回调，而产生更新数据和视图。

原理图告诉我们，data属性定义了getter、setter对属性进行劫持，当属性值改变是就会notify通知watch对象，而watch对象则会重新触发组件呈现功能，继而更新view上的DOM节点树。

反之，view上输入数据时，也会触发data变更，也会触发订阅者watch更新,这样子model数据就可以实时更新view上的数据变化。

这样一个过程就是vue的数据双向绑定了。

vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过 () 来实现对属性的劫持，达到监听数据变动的目的。

是ES5一个方法，可以直接在一个对象上定义一个新属性，或者修改一个已经存在的属性，并返回这个对象，对象里目前存在的属性描述符有两种主要形式： 数据描述符 和 存取描述符 。

数据描述符 是一个拥有可写或不可写值的属性。

存取描述符 是由一对getter-setter函数功能来描述的属性。

描述符必须是两种形式之一；不能同时是两者。

即：有值和可写，或者可get和set 属性描述符包括：

我们已经知道怎么实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器 Observer ，用来监听所有属性。

如果属性发上变化了，就需要告诉订阅者 Watcher 看是否需要更新。

因为订阅者是有很多个，所以我们需要有一个消息订阅器 Dep 来专门收集这些订阅者，然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。

接着，我们还需要有一个指令解析器 Compile ，对每个节点元素进行扫描和解析，将相关指令对应初始化成一个订阅者 Watcher ，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收到相应属性的变化，就会执行对应的更新函数，从而更新视图。

因此接下去我们执行以下4个步骤，实现数据的双向绑定：

深入响应式原理剖析Vue原理&实现双向绑定MVVM 《响应式系统的基本原理》 JavaScript实现MVVM之我就是想监测一个普通对象的变化

[vue3]ref函数和reactive函数的响应式原理

ref函数

作用:定义一个响应式的数据

语法:constxxx=ref(initValue)

创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。

JS中操作数据

模板中读取数据:不需要，直接：<div>{{xxx}}</div>

备注：

接收的数据可以是：基本类型、也可以是对象类型。

基本类型的数据：响应式依然是靠()的get与set完成的。

对象类型的数据：内部“求助”了Vue3.0中的一个新函数——reactive函数。

reactive函数

作用:定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）

语法：const代理对象=reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）

reactive定义的响应式数据是“深层次的”。

内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。

Vue3.0中的响应式原理[回顾]vue2.x的响应式

实现原理：

对象类型：通过()对属性的读取、修改进行拦截（数据劫持）。

数组类型：通过重写更新数组的一系列方法来实现拦截。

（对数组的变更方法进行了包裹）。

(data,count,{get(){},set(){}})

vue2.x存在问题：

新增属性、删除属性,界面不会更新。

直接通过下标修改数组,界面不会自动更新。

Vue3.0的响应式

实现原理:

Proxy：：{//拦截读取属性值get(target,prop){(target,prop)},//拦截设置属性值或添加新属性set(target,prop,value){(target,prop,value)},//拦截删除属性deleteProperty(target,prop){(target,prop)}})

通过Proxy（代理）:?拦截对象中任意属性的变化,包括：属性值的读写、属性的添加、属性的删除等。

通过Reflect（反射）:?对源对象的属性进行操作。

MDN文档中描述的Proxy与Reflect：

##reactive对比ref-从定义数据角度对比：-ref用来定义：<strongstyle=color:#DD5145>基本类型数据</strong>。-reactive用来定义：<strongstyle=color:#DD5145>对象（或数组）类型数据</strong>。-备注：ref也可以用来定义<strongstyle=color:#DD5145>对象（或数组）类型数据</strong>,它内部会自动通过```reactive```转为<strongstyle=color:#DD5145>代理对象</strong>。-从原理角度对比：-ref通过``()``的```get```与```set```来实现响应式（数据劫持）。-reactive通过使用<strongstyle=color:#DD5145>Proxy</strong>来实现响应式（数据劫持）,并通过<strongstyle=color:#DD5145>Reflect</strong>操作<strongstyle=color:orange>源对象</strong>内部的数据。-从使用角度对比：-ref定义的数据：操作数据<strongstyle=color:#DD5145>需要</strong>``````，读取数据时模板中直接读取<strongstyle=color:#DD5145>不需要</strong>``````。-reactive定义的数据：操作数据与读取数据：<strongstyle=color:#DD5145>均不需要</strong>``````。原文：