nexttick和$nexttick,$nexttick的使用场景
我们用vue的时候，经常用这个。$nextTick，相信你用过。我常见的场景是，当我们获取数据后需要对新视图进行下一步操作或其他操作时，发现无法获取dom。本文主要向大家介绍关于$nextTick的相关信息，有需要的可以参考一下。
:
目录
1.功能描述2。父组件3。子组件NextTick.vue4为什么未定义5。把v-if改成v-show可以获得焦点吗？6.实际结果7。把一个组件变成页面可以获得焦点吗？8.为什么$nextTick9有区别？Vue.nextTick还有这个。$nextTick 10。使用nextTick的提示摘要
1.功能描述
今天我们想实现这个小功能；在页面呈现后显示div元素；单击此div元素后；Div元素消失；出现输入元素；并且输入元素被聚焦。我想大家都觉得很简单。来看看吧~
创建一个组件，组件名为NextTick.vue；
在页面中介绍注册
2.父组件
模板
差异
下一滴答/下一滴答
/div
/模板
脚本语言
从导入下一刻度./components/NextTick.vue
导出默认值{
名称：“关于”，
组件：{
下一滴答
},
}
/脚本
3.子组件NextTick.vue
模板
差异
我是一个组件/div。
div-if= flag class= sun @ click= hander click 显示输入/div
输入v-else ref= input ref class= yue Laing /
/div
/模板
脚本
导出默认值{
data(){
返回{
flag:真的，
}
},
方法：{
handerClick(){
this.flag=false
这个。$ refs . input ref . focus()；
},
},
}
/脚本
4为什么是undefined
this.flag=false
这个。$ refs . input ref . focus()；
这个。执行页面操作时的$ refs . input ref . focus()；
需要时间(还没刷新；或旧页面)
此时，尚未获得dom元素。
所以会报错。
解决方案1:
所以只要让页面获取元素；使用setTimeout
setTimeout(()={
这个。$ refs . input ref . focus()；
},100)
这样处理这个问题是可能的；
但是很不专业；
解决方案2:
//当组件根据最新的数据data再次在视图上完成渲染时，就会执行里面的函数。
这个。$nextTick(()={
这个。$ refs . input ref . focus()；
})
5.将v-if更改为v-show可以获取焦点吗？
有人说：因为v-if是动态创建和销毁的；在创造和毁灭的过程中，是需要时间的！这就是为什么用v-if无法得到元素节点，用v-show可以避免的原因。
有道理，你知道吗？
我们试试把v-if改成v-show。
模板
差异
我是一个组件/div。
div-Show= flag class= sun @ click= hander click 显示输入/div
输入v-show=！flag ref= input ref class= yue Laing /
/div
/模板
脚本
导出默认值{
data(){
返回{
flag:真的，
}
},
方法：{
handerClick(){
this.flag=false
console.log(这个。$ refs . input ref)；
这个。$ refs . input ref . focus()；
},
},
}
/脚本
6.实际结果
我们发现虽然页面没有报错，但是没有焦点。换成v秀显然解决不了这个问题。
出现此问题是因为在子组件中设置this.flag=false后立即执行了以下代码。
这个。$ refs . input ref . focus()；
在执行的时候，视图还没来得及刷新；还是旧的一页。这个时候我们无法获取dom元素，所以未定义；出现。这就是为什么我们可以在加入延时后对焦；
当组件根据最新的数据data再次在视图上完成渲染时，它执行其中的函数。
这是$nextTick的基本用法
这个。$nextTick(()={
这个。$ refs . input ref . focus()；
})
7.将组件变成页面可以获取焦点吗？
还有人说：因为是子组件，所以子组件比父组件渲染的晚。所以没有获得元素节点。
也是这个原因。
感觉不如上一个朋友对，为了解惑。我们决定将子组件变成页面来看看。
模板
差异
我是一个组件/div。
div-Show= flag class= sun @ click= hander click 显示输入/div
输入v-show=！flag ref= input ref class= yue Laing /
/div
/模板
脚本
导出默认值{
data(){
返回{
flag:真的，
}
},
方法：{
handerClick(){
this.flag=false
这个。$ refs . input ref . focus()；
},
},
}
/脚本
我们发现我们仍然不能；这充分说明在更新了data的数据后，vue并没有实时更新。
更新数据和在页面上显示数据之间存在时间差。我们调用时差内的页面数据，当然是取不到的。
也就是说Vue在更新DOM的时候是异步执行的。
8.为什么会有$nextTick
之所以有$ next tick因为vue中数据变化后；视图上的dom不会立即更新；dom需要时间来跟上新的。
我们通过一个小实验来看看。
模板
差异
div ref=unique
h1{{ cont }}/h1
/div
更改值/div
/div
/模板
脚本
导出默认值{
data(){
返回{
Cont:我是默认值
}
},
方法：{
handerClick(){
This.cont=我更改了默认值；
console.log(1==，this。$ refs . unique . innertext)；
这个。$nextTick(()={
console.log(2==，this。$ refs . unique . innertext)；
})
},
},
}
/脚本
我们发现第一次的值和第二次的值不一样。因为视图上dom的更新是必要的；我们得到这个差内的元素值；仍然是旧值；所以第一个值是初始值；第二个值是更改后的值；
因为我们希望在跟踪新数据后立即获得dom上的值。
所以vue提供了$nextTick来解决这个问题
9.Vue.nextTick和this.$nextTick差别
Vue.nextTick是一个全局方法。
这个。$nextTick( [callback])是实例方法。
我们都知道一个页面可以有多个实例，这意味着。$nextTick可以精确到某个实例。其实两者本质上是一样的。
只有一个是全局的，另一个是精确到某个实例的。只是准确度不同而已。
10.使用 nextTick的一个小技巧
我们都知道，在挂载渲染的生命周期中，我们不能100%保证所有子组件都能渲染出来，所以可以用这个。$nextTick in已安装，以确保所有子组件都可以呈现。
在服务器端呈现期间不调用挂载的挂钩。
已安装：函数(){
这个。$nextTick(function () {
//当数据改变时，
//再次完成对视图的渲染后，执行里面的方法。
//这句话相当于：
//将回调延迟到下一个DOM更新周期之后
//相当于：修改数据后，再等待DOM更新后再执行
})
}
总结
关于$nextTick的这篇文章到此为止。有关$nextTick的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。