Vue Watch 的原理 和 $nextTick() 通俗理解
网上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() 通俗理解的更多相关文章
- 举个例子去理解vuex(状态管理),通俗理解vuex原理,通过vue例子类比
通俗理解vuex原理---通过vue例子类比 本文主要通过简单的理解来解释下vuex的基本流程,而这也是vuex难点之一. 首先我们先了解下vuex的作用vuex其实是集中的数据管理仓库,相当于数 ...
- 手摸手带你理解Vue的Computed原理
前言 computed 在 Vue 中是很常用的属性配置,它能够随着依赖属性的变化而变化,为我们带来很大便利.那么本文就来带大家全面理解 computed 的内部原理以及工作流程. 在这之前,希望你能 ...
- 手摸手带你理解Vue的Watch原理
前言 watch 是由用户定义的数据监听,当监听的属性发生改变就会触发回调,这项配置在业务中是很常用.在面试时,也是必问知识点,一般会用作和 computed 进行比较. 那么本文就来带大家从源码理解 ...
- Vue中$nextTick的理解
Vue中$nextTick的理解 Vue中$nextTick方法将回调延迟到下次DOM更新循环之后执行,也就是在下次DOM更新循环结束之后执行延迟回调,在修改数据之后立即使用这个方法,能够获取更新后的 ...
- Redis Hyperloglog的原理及数学理论的通俗理解
redis中有一种数据格式,hyperloglog,本文就此数据结构的作用.redis的实现及其背后的数学原理作一个整理.当然本文不包含任何数学公式,而是希望用直观的例子帮大家理解. 主要内容如下: ...
- Vue源码解析之nextTick
Vue源码解析之nextTick 前言 nextTick是Vue的一个核心功能,在Vue内部实现中也经常用到nextTick.但是,很多新手不理解nextTick的原理,甚至不清楚nextTick的作 ...
- Vue视图渲染原理解析,从构建VNode到生成真实节点树
前言 在 Vue 核心中除了响应式原理外,视图渲染也是重中之重.我们都知道每次更新数据,都会走视图渲染的逻辑,而这当中牵扯的逻辑也是十分繁琐. 本文主要解析的是初始化视图渲染流程,你将会了解到从挂载组 ...
- vue双向数据绑定原理探究(附demo)
昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...
- Effective Java通俗理解(下)
Effective Java通俗理解(上) 第31条:用实例域代替序数 枚举类型有一个ordinal方法,它范围该常量的序数从0开始,不建议使用这个方法,因为这不能很好地对枚举进行维护,正确应该是利用 ...
随机推荐
- windows下查看特定端口被什么程序占用
我电脑上因为命令: netstat -ano 列出的太多了,所以不好看. 以下是其他方式: 查看8088端口占用情况: 开始---->运行---->cmd,或者是window+R组合键,调 ...
- [转]CentOS6 Linux上安装ss5服务器
本文章转自:http://blog.csdn.net/cuiyifang/article/details/10346239 最后我增加了添加防火墙规则的部分.感谢作者. ss5是常见的socks5 p ...
- Docker的学习
学习地址:http://blog.51cto.com/lizhenliang 和 他的视频 一 Docker 的介绍和安装 二 镜像管理 三 容器管理 四 管理应用程序数据 五 使用Docker知 ...
- Sublime插件Emmet的安装及Tab补全代码
Emmet是一款Web前端开发工具Sublime非常有用的插件,使用仿CSS选择器的语法来生成代码,大大提高了HTML和CSS代码编写的速度,只需按住Tab键即可把一个简写展开成HTML和CSS的代码 ...
- 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 ...
- docker的/var/lib/docker/overlay文件夹突然占满了硬盘
场景描述 事情是这样的,前两天客户的服务器突然断电了,导致用docker部署的服务也挂了.昨天去现场,重启了docker,同时准备更新一下服务.结果发现有一台节点硬盘满了- 还是觉得有些奇怪的,毕竟d ...
- 【gulp】gulp-file-include 合并 html 文件
gulp-file-include 是 gulp 插件,它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来. 安装依赖包(包括了 gulp-file-include 和 ...
- Android中使用BufferedReader.readline阻塞读取不到数据,但是ready返回true
通过socket测试工具在电脑上发送消息,Android真机可以收到响应BufferedReader.ready()返回true,但是readline却一直阻塞. 原因:readline()只有在遇到 ...
- c++ 条件变量
.条件变量创建 静态创建:pthread_cond_t cond=PTHREAD_COND_INITIALIZER; 动态创建:pthread_cond _t cond; pthread_cond_i ...
- java面试中被问到的问题
技术面 1) Spring 的注解有哪些? 2) 你如何理解 spring IOC 技术,如果不使用spring,你有哪些方式来加载 bean? 3) spring aop 的原理是什么?它是怎样一 ...