vue学习之的v-for,:key,@,ref,nextTick的使用以及生命周期函数介绍

最新推荐文章于 2023-06-10 11:56:01 发布

原创最新推荐文章于 2023-06-10 11:56:01 发布 · 914 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-for指令、key属性、ref引用以及nextTick的使用。通过实例展示了如何在v-for循环中使用key避免元素重复渲染，以及如何利用ref获取元素并进行操作。同时，解释了nextTick在DOM更新后的延迟回调作用，配合生命周期函数展示了其在实际应用中的效果。

1.v-for,:key,@,ref

下面是官方的文档，可以点进去看下，最好结合例子实践下。

例子

例子可以直接拷贝到(https://www.runoob.com/try/try-cdnjs.php?filename=vue2-v-for)实践。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-for</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<li v-for="(person,index) in array" :key="person.id">
	<input ref="inputx" id="inputx" v-model.lazy='person.name' @focus='focusEvent' />
</div>

<script>
new Vue({
  el: '#app',
  data: {
    array: [
      { id:1,name: 'armwind1' },
      { id:2,name: 'armwnid3' },
      { id:3,name: 'armwind2' },
      { id:4,name: 'armwnid4'}
    ]
  },
  methods:{
    focusEvent(event){
        var target = event.srcElement;
           this.$nextTick(()=>{
             let id = target.getAttribute("id");
			   console.log(id);
              if(id){
                let ta = this.$refs[id][3];
				  console.log(ta)
                //if(ta)
                  //ta.focus();
              }
         })
    }
}
})
</script>
</body>
</html>

v-for:vue的标签编译后不会显示出来的，能显示出来的都是标准的。从下面的调试页面能够卡纳都标准的html标签，其它vue的标签没有了。

这里就用下面的例子，其中person就是array中的元素，而index为默认的索引数据(从0开始).下面会有vue循环创建4个input输入框，并设置默认显示值和focus事件响应方法。

<div id="app">
<li v-for="(person,index) in array" :key="person.id">
	<input ref="inputx" id="inputx" v-model.lazy='person.name' @focus='focusEvent' />
</div>

@focus：这里是一个简写方式，其中v-on简写成了@，拓展出来为v-on:focus.看到不要在纠结了，其它事件，请参考官方文档。
“:key”:一开始看到前面加个：这个又是什么操作，原来:是v-bind的简写，对应v-bind:key。这里key值最好在data中设置一个对应的id,避免元素的重复渲染（参考例子:https://blog.youkuaiyun.com/qq_41609404/article/details/84064064）。
ref：这个是一个标签对象的引用对象。可以理解成C语言中的指针。直接可以在全局的$refs中找到这个元素的对象，操作相当方便。 ref官方文档

2.nextTick的使用和生命周期函数介绍

nextTick
nexttick官方理解
nexttick一开始也就没怎么理解，但是看着例子就明白了。说白了，它就是延迟执行的回调。其它参考文章:https://www.jianshu.com/p/a7550c0e164f

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue nextTick</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div class="app" ref="div_test">
  <div ref="msgDiv">{{msg}}</div>
  <div v-if="msg1">Msg1: {{msg1}}</div>
  <div v-if="msg2">Msg2: {{msg2}}</div>
  <div v-if="msg3">Msg3: {{msg3}}</div>
  <button @click="changeMsg">
    Change the Message
  </button>
</div>
    
<script>
new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML
      console.log("msg1:"+this.msg1)
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
		  console.log("msg2:"+this.msg2)
      })
      this.msg3 = this.$refs.msgDiv.innerHTML
		console.log("msg3:"+this.msg3)
      this.$refs.div_test.append("armwind"); // 增加一个对象到div
    }
  },
  beforeCreate(){
    console.log('beforecreate:')//null
  },
  created(){
        console.log('create:')//null
  },
  beforeMount(){
    console.log('beforeMount:')//null
  },
  mounted(){
    console.log('mounted:')//<p></p>
  },
  beforeUpdate(){
    console.log('beforeUpdate:')//null
  },
  updated(){
    console.log('updated:')//<p></p>
  }
})
</script>
</body>
</html>

上面的例子拖到浏览器中可以看到，一开始div元素下是没有添加"<div v-if="这样的3个标签，确认代之是三个注释符。此外可以看到生命周期函数打印了右下角4个生命周期函数。
在这里插入图片描述
下面要注意的是源码中按理说log打印顺序是msg1,msg2,msg3,但是右下角可以看到，打印顺序是msg1,msg3,msg2,而msg2还是在beforeUpdate和updated之后打印的，这是为什么呢。这是由于nextTick就是为会在下一次页面更新后才执行的。由于页面已经更新了，所以this.$refs.msgDiv.innerHTML获取到就是"hello world"字符串，这里由于msg2的数据更新了。同样会触发页面更新，也就又会打印一次beforeupdate和updated函数。