网上watch$nextTick()解释比较复杂,涉及到promise,h5的dom发生变化的新api等复杂代码,下列就是两个参考。

【watch原理】

【$nextTick()】

首先,看遇到问题代码:

<template>
<div>
<button @click="changeList">我要变成童话里大灰狼,嘿嘿!</button>
</div>
</template>
<script>
export default {
data () {
return {
isfirst: true,
num: 0
};
},
watch: {
'num': function (val) {
if (val > 0 && this.isfirst) {
console.log('我改变了'); // 是不会之执行的
}
console.log('我又改变了'); // 只会执行之一段
}
},
methods: {
changeList () {
this.num += 1;
this.isfirst = false;
}
}
}
</script>

简单用watch的原理实现上述代码,如下:

// es6
class Parent () {
// ...
get num () {
return this.val;
}
set num (val) {
this.val = val;
// watch 原始把回调放在这里
isfirst && cb(); // 步骤1
}
// ...
}
// es5的写法
defindeProperty(new Parent(), 'num', {
get: () => this.val,
set (val) {
this.val = val;
// watch 原始把回调放在这里
isfirst && cb(); // 步骤1
}
}); const parent = new Parent();
parent.num = 2;
isfirst = false; // 步骤2

先执行步骤1,还步骤2?答案是步骤 2。我想要的就结果是步骤1执行完,在执行步骤2。

vue提供vm.$nextTick(fn(){})

methods: {
changeList () {
this.num += 1;
this.$next(()=> {
this.isfirst = false;
});
}
}

Vue Watch 的原理 和 $nextTick() 通俗理解的更多相关文章

  1. 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比

    通俗理解vuex原理---通过vue例子类比   本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...

  2. 手摸手带你理解Vue的Computed原理

    前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利.那么本文就来带大家全面理解 computed 的内部原理以及工作流程. 在这之前,希望你能 ...

  3. 手摸手带你理解Vue的Watch原理

    前言 watch 是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用.在面试时,也是必问知识点,一般会用作和 computed 进行比较. 那么本文就来带大家从源码理解 ...

  4. Vue中$nextTick的理解

    Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...

  5. Redis Hyperloglog的原理及数学理论的通俗理解

    redis中有一种数据格式,hyperloglog,本文就此数据结构的作用.redis的实现及其背后的数学原理作一个整理.当然本文不包含任何数学公式,而是希望用直观的例子帮大家理解. 主要内容如下: ...

  6. Vue源码解析之nextTick

    Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...

  7. Vue视图渲染原理解析,从构建VNode到生成真实节点树

    前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...

  8. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  9. Effective Java通俗理解(下)

    Effective Java通俗理解(上) 第31条:用实例域代替序数 枚举类型有一个ordinal方法,它范围该常量的序数从0开始,不建议使用这个方法,因为这不能很好地对枚举进行维护,正确应该是利用 ...

随机推荐

  1. SVN:This client is too old to work with working copy…解决的方法

    解决svn:This client is too old问题 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbXlmbXlmbXlmbXlm/font/5a ...

  2. SNF软件开发机器人-子系统-表单-表单设计

    表单设计 在我们做程序时总要对表单的内容进行设计,然而对控件位置等信息的调整总是麻烦的,还常常容易出错.SNF软件机器人完美的解决了这个问题. 1.效果展示: 2.使用说明: (1)打开页面,选中开发 ...

  3. Your APP_BUILD_SCRIPT points to an unknown file: ./jni/Android.mk

    查下是不是有在环境变量中定义NDK_PROJECT_PATH 这个变量,如果有,删除试试

  4. SQL2008R2的 遍历所有表更新统计信息 和 索引重建

    [2.以下是更新统计信息] DECLARE UpdateStatisticsTables CURSOR READ_ONLY FOR SELECT sst.name, Schema_name(sst.s ...

  5. Asp.Net Newtonsoft.Json使用教程

    json序列化和反序列化的使用教程 实体 public class wendaModel { private string _title; private string _cons; public s ...

  6. SparkStreaming基本架构及使用

    1.简介 Spark Streaming处理的数据流图: Spark Streaming在内部的处理机制是,接收实时流的数据,并根据一定的时间间隔拆分成一批批的数据,然后通过Spark Engine处 ...

  7. Android WebRTC开发入门

    在学习 WebRTC 的过程中,学习的一个基本步骤是先通过 JS 学习 WebRTC的整体流程,在熟悉了整体流程之后,再学习其它端如何使用 WebRTC 进行互联互通. 申请权限 Camera 权限 ...

  8. ListFiles():返回Files类型数组,可以用getName()来访问到文件名。

    List():显示文件的名(相对路径) ListFiles():返回Files类型数组,可以用getName()来访问到文件名. 使用isDirectory()和isFile()来判断究竟是文件还是目 ...

  9. a,abbr,address,area,article, aside, audio标签文档

    <a>标签 download属性 <!-- 下载hello.txt --> <a href="test.txt" download="hel ...

  10. <数字签名是什么>笔记

    此篇是看   数字签名是什么?    的理解与笔记 1. 使用非对称密钥发送数据到服务器. 发送方(C端)使用公钥对自己的数据进行加密,接收方(S端)使用私钥解密,即使发送出去的数据被拦截到,也不知道 ...