vue 生命周期 -------组件 vue更新dom是异步的

小野口苗

已于 2022-03-05 15:30:09 修改

阅读量796

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html 前端

于 2022-02-28 20:00:26 首次发布

本文链接：https://blog.youkuaiyun.com/wr_qianduan/article/details/123189314

这篇博客探讨了Vue框架中组件的生命周期，特别是关注$nextTick的使用。通过实例说明了如何在组件内利用name属性进行自定义，并解释了在DOM更新时Vue采用的异步策略，这对于理解何时访问DOM至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios

    安装
        yarn add axios
    导入
        import axios from 'axios'
    使用
        axios({

method: '',

 url: '',

data: {  },

params: { }

}).then().catch()

refs-获取DOM

<template>
  <div>
      <p>1. 获取原生DOM元素</p>
      <h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
  </div>
</template>

<script>
export default {
    mounted(){
        console.log(document.getElementById("h")); // h1
        console.log(this.$refs.myH); // h1
    }
}
</script>

$nextTick使用

$nextTick
	1. 现象：数据发生改变，DOM会发生更新，但是是异步的
	2. 问题：修改完了数据后，无法立即操作DOM
	3. this.$nextTick
		作用：等待DOM更新后，回调函数会立即执行
		this.$nextTick(function(){})
		this.$nextTick().then(() => {})
		await this.$nextTick()

组件内name属性
引入此组件可以用name属性值作为组件名注册

购物车案例:

1. 头部自定义:


	封装头部组件

	props的校验语法:
		props: []
			只能接收，不能校验格式
		props: {}
			接收且校验，数据格式不对，会报错
		props: { 
    A: String,
    B: {
	   type: Number,
       required: true
	},
    C: {
       type: Number,
       default: 0
    }
 }
	
//===================================

 1.  props: {
    background: String, // 外部插入此变量的值, 必须是字符串类型, 否则报错
    color: {
      type: String, // color值的类型
      default: '#fff', // 使用默认值
    },
    title: {
      type: String,
      required: true, // 必须传入此变量的值
    },
  },
}


2.   头部动态样式 

  <!-- 2.  定义动态样式 -->
  <div class="my-header" :style="{ backgroundColor: background, color }">{{ title }}</div>