vue中的this.$nextTick
阅读数:62 评论数:0
跳转到新版页面分类
html/css/js
正文
一、解释
将回调延迟到下次dom更新循环执行。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。
1、dom的更新
在vue中，你修改了data的某一个值，并不会立即反应到界面上，vue将你对data的更改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher的队列中任务，这就有一个延迟时间。
2、$nextTick也是一个异步事件，它也会被放到队列中，按照队列的顺序优先级执行。所以，当第一个也就是data的修改执行渲染到页面之后，这个时候执行$nextTick，就能获取到新渲染到data数据。
3、同理，创建一个setTimeout，它也会放到队列中。
二、理解示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" @click="handleClick" ref="test">{{message}}</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Zeke'
},
created() {
console.log(this.$refs.test)
this.$nextTick(function () {
console.log(this.$refs.test.innerText)
})
}
})
</script>
</html>在Create阶段Dom还未创建，这个时候还不能对Dom进行操作，因此第一个输出的结果必然是undefined，第二个输出是Zeke。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" @click="handleClick" ref="test">{{message}}</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Zeke'
},
methods: {
handleClick() {
this.message = 'Hello'
console.log(this.$refs.test.innerText)
this.$nextTick(function () {
console.log(this.$refs.test.innerText)
})
}
}
})
</script>
</html>第一次输出是Zeke，第二个输出是Hello
相关推荐
1、安装依赖
npm install svg-sprite-loader --save-dev
2、配置build文件夹中的webpack.base.conf.js
3、在src/component
在列表渲染时使用key属性
当Vue.js用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略，如果数据项的顺序被改变，Vue将不会移动D
一、vue.js devtools开发工具的使用
1、安装
在chrome或firefox浏览器的扩展插件仓库里搜索vue devtool。
2、debugger的使用
假设我们想调试App.vue这
ref被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素，如果用在子组件上，引用就指向组件实例。
<!-- `vm.$
在使用Vue中经常看到HTML中有标签属性前面添加了“：”，有些没有。
其实是v-bind的缩写。
v-bind
缩写： ‘：’
用法：动态绑定一个或多个特性，或一个组件prop到表达式。在绑定cl
一、概述
Vuex是一个专门为Vue.js应用程序开发的全局状态管理功能。它采用集中式存储管理应用的所有组件的状态， 并以相应的规则保证状态以一种可预测的方式发生变化。
每一个Vuex应用的核心就是s