网上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. windows下查看特定端口被什么程序占用

    我电脑上因为命令: netstat -ano 列出的太多了,所以不好看. 以下是其他方式: 查看8088端口占用情况: 开始---->运行---->cmd,或者是window+R组合键,调 ...

  2. [转]CentOS6 Linux上安装ss5服务器

    本文章转自:http://blog.csdn.net/cuiyifang/article/details/10346239 最后我增加了添加防火墙规则的部分.感谢作者. ss5是常见的socks5 p ...

  3. Docker的学习

    学习地址:http://blog.51cto.com/lizhenliang  和 他的视频 一  Docker 的介绍和安装 二 镜像管理 三 容器管理 四 管理应用程序数据 五 使用Docker知 ...

  4. Sublime插件Emmet的安装及Tab补全代码

    Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度,只需按住Tab键即可把一个简写展开成HTML和CSS的代码 ...

  5. Vue Resource root options not used?

    I specify a root options in my Vue-Resource in my main.js file, but when I do the request, it does n ...

  6. docker的/var/lib/docker/overlay文件夹突然占满了硬盘

    场景描述 事情是这样的,前两天客户的服务器突然断电了,导致用docker部署的服务也挂了.昨天去现场,重启了docker,同时准备更新一下服务.结果发现有一台节点硬盘满了- 还是觉得有些奇怪的,毕竟d ...

  7. 【gulp】gulp-file-include 合并 html 文件

    gulp-file-include 是 gulp 插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来. 安装依赖包(包括了 gulp-file-include 和 ...

  8. Android中使用BufferedReader.readline阻塞读取不到数据,但是ready返回true

    通过socket测试工具在电脑上发送消息,Android真机可以收到响应BufferedReader.ready()返回true,但是readline却一直阻塞. 原因:readline()只有在遇到 ...

  9. c++ 条件变量

    .条件变量创建 静态创建:pthread_cond_t cond=PTHREAD_COND_INITIALIZER; 动态创建:pthread_cond _t cond; pthread_cond_i ...

  10. java面试中被问到的问题

     技术面 1) Spring 的注解有哪些? 2) 你如何理解 spring IOC 技术,如果不使用spring,你有哪些方式来加载 bean? 3) spring aop 的原理是什么?它是怎样一 ...