vue里边的ref和nextTick是什么？

getLi(){

console.log(this.$refs.li1[0]);

},

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506211706373.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们现在通过ref绑定然后就获取到li了



**注意** ref支持同名！比如这里直接写成`ref="'li'"`就可以了



我们现在通过代码来了解一下ref如何传参

<button @click="getLi">点我</button>

<ul>

  <!-- vue中 不提倡直接操作Dom 因为有虚拟dom

        但是不是禁止直接操作，很多需求直接操作比较快捷的(尤其是较简易的)-->

  <li :ref="'li'+i" v-for="i of 10" :key="i"> {{i}} </li>

</ul>

<button @click="show = !show">{{show}}</button>



<button @click="start">雪糕</button>

<HelloWorld ref="xg" v-if="show" :n="n"></HelloWorld>

子组件

<h1>{{v}}</h1>

我们现在来看一下上述代码做了些什么  

`首先点击一下按钮，然后触发一个strat的函数，这个函数调用了ref为xg的组件内部的start方法，也就是我们子组件内部的start方法`



我们看一下页面效果  

![在这里插入图片描述](https://img-blog.csdnimg.cn/202005062130503.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)  

我们可以看出，代码执行成功，也就是说，ref可以以用来传递数据 但是只能用来`父传子`



ref的作用：



1.  可以让vue直接操作dom

2.  另类的传参方式



[]( )nextTick

==================================================================



nextTick是什么？  

当数据更新的时候，视图并不会立即渲染，这个时候我们期望获取到视图更新后的数据，可以通过 `nextTick` 来进行操作



我们具体通过代码来看



我们现在先看一个效果

<button @click="info">{{n}}</button>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506214042276.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NTX0RHRA==,size_16,color_FFFFFF,t_70)



我们看一看到输出框里，左边是修改后的值，右边是当前的值，也就是没修改的值



那我们如果直接需要修改后的值的话，需要做一下简单的处理

<button @click="info">{{n}}</button>