nextTick基本使用

作用 在DOM 更新之后，获取异步更新的 DOM 元素

data 里的数据改变 DOM 的更新是异步的

<template>
	<div>
        <p ref="a">{{count}}</p>
        <button @click="fn">test</button>
    </div>
</template>

<scirpt>
	export default{
    data(){
    	return:{
    		count:0
    	}
    },
    methods:{
    	fn(){
    		this.count++;
   			console.log(this.$refs.a.innerHTML)//0
    	}
    }
    }
</scirpt>

vue监测数据更新，开启一个 DOM 更新队列

获取的标签是更新之前的

因此获取更新后的 DOM 需要在

• updated
• $nextTick

方法演示

methods:{
	btn(){
		this.count++
		this.$nextTick(()=>{
			console.log(this.$refs.a.innerHTML)
		})
	}
}

过程： DOM 更新完会挨个出发 $nextTick 里的函数体

应用场景

点击按钮出现输入框自动聚焦，隐藏按钮

<template>
	<input ref="yu" v-if="isShow" type="text" placeholder="输入框">
	<button v-else @click="fn"></button>
</template>
<script>
    export default{
        data(){
            return{
                isShow:false
            }
        },
        methods:{
            fn(){
                this.isShow=true;
                //this.$refs.yu.focus(); //因为在dom更新之前所以获取到的是 undefined 
                this.$nextTick(()=>{
                    this.$refs.yu.focus()//
                })
            }
        }
    }
</script>

此处可以利用 $nextTick 返回的是一个 Promise 对象，这样写

async btn(){
	this.isShow = true
	await this.$nextTick()
	this.$refs.yu.focus();
}

$nextTick函数返回的是一个 Promise对象

获取标签调用事件

组件name属性作用

组件的内置名自定义

可以用来给组件起名

export default{
	name:"yuadh_mk"
}

导入模块

<template>
	<yuadh_name></yuadh_name>
</template>

import yuadh from './yuadh'
export default{
    components:{
        [yuadh.name]:yuadh
    }
}

动态组件

组件指定

<template>
	<div>
        <component :is="comName"></component>
    </div>
</template>

场景 同一个挂载点--切换组件显示

1. 创建要被切换的组件 -标签+样式
2. 引入到要展示的 vue 文件内，注册
3. 变量-承载要显示的组件名
4. ...

组件缓存

动态组件的显示会频繁的创建组件和销毁组件

创建组件后的生命周期 created()

销毁组件后的生命周期 destroyed()

使用 keep-alive 组件将不必要销毁的组件缓存起来

<keep-alive>
	<component :is="comName"></component>
</keep-alive>

扩展2个钩子函数

• activated() 获得激活状态
• deactivated() 失去激活状态

当组件失去焦点

昨日复习

vue生命周期

组件之间通信

• 需求
• 静态页面
• 数据铺设
• 交互