vue里边的ref和nextTick是什么？

ref与$refs

ref是什么？
像标识符一样，给元素或者组件通过ref挂载一个小名，通过$refs就可以调用或者获取
$refs是什么？
该属性是一个对象，存储了通过ref绑定的元素对象或者组件实例对象

我们现在通过代码来看一下

vue中 不提倡直接操作Dom 因为有虚拟dom 但是不是禁止直接操作，很多需求直接操作比较快捷的(尤其是较简易的)
所以我们想要获取到每一条li去做一些直接操作

<template>
  <div id="app">
    <button @click="getLi">点我</button>
    <ul>
      <li v-for="i of 10" :key="i"> {{i}} </li>
    </ul>
    <button @click="show = !show">{{show}}</button>
    <HelloWorld ref="xg" v-if="show" :n="n"></HelloWorld>
  </div>
</template>

<script>

import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      n: 0,
      show: true
    };
  },
  components: {
    HelloWorld
  },
  methods: {
    getLi(){
      console.log(this.$el);
    }
  },
  
};
</script>

点击按钮后浏览器反馈

我们可以看出，我们现在获取到的是根元素，而不是每一条li，我们想要获取到li的话就需要做一下处理

<li :ref="'li'+i" v-for="i of 10" :key="i"> {{i}} </li>
...
getLi(){
   console.log(this.$refs.li1[0]);
},

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

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

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

<template>
  <div id="app">
    <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>
  </div>
</template>

<script>

import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      n: 0,
      show: true
    };
  },
  ...
  methods: {
    ...
    start(){
      this.$refs.xg.start()
    }
  },
  
};
</script>

子组件
<template>
  <div class="hello">
    <h1>{{v}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: ["n"],
  data() {
    return {
      v:1
    }
  },
  methods: {
    start(){
      this.v++;
      console.log(this.v)
    }
  },
};
</script>

我们现在来看一下上述代码做了些什么
首先点击一下按钮，然后触发一个strat的函数，这个函数调用了ref为xg的组件内部的start方法，也就是我们子组件内部的start方法

我们看一下页面效果

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

ref的作用：

1. 可以让vue直接操作dom
2. 另类的传参方式

nextTick

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

我们具体通过代码来看

我们现在先看一个效果

<template>
  <div id="app">
    <button @click="info">{{n}}</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  ...
  methods: {
    info(e){
      this.n++;
      console.log(this.n,e.target.innerHTML);
    }
};
</script>

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

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

<template>
  <div id="app">
    <button @click="info">{{n}}</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  ...
  methods: {
    info(e){
      this.n++;
      this.$nextTick(()=>{
        console.log(this.n,e.target.innerHTML);
      });
    }
};
</script>

我们现在在看，输出框左右两边的值都是一样的了