2022年7月黄山

• $data
• $props
• $el
• $options
• $parent
• $root
• $slots
• $refs
• $attrs
• $watch()
• $emit()
• $forceUpdate()
• $nextTick()

1. $forceupdate:

强制组件进行重新渲染，响应式数据并不需要此方法，如果应用了非响应式组件时，可以采用。

<template>

<h1>name is :{{name}}</h1>
<button @click="change">change</button>
</template>

<script>
    export default{
        created(){
            this.name="john"//非响应式数据
        },
        methods: {
            change(){
                this.name="tom"
                this.$forceUpdate()//改变非响应式数据，强制刷新
            }
        },
    }
</script>

2. $nextTick

当改变了响应式数据时，并不会立即得到更新后的dom(只是提交了一个异步的更新请求)，但我们有可能需要在事件方法中立即获取（当然也可以在updated周期中）更新后的内容，可以采用如下方式：

<template>
<h1>{{name}}</h1>
<button @click="change">change</button>
</template>

<script>
    export default{
        data(){
            return {name:'john'}
        },
        methods: {
            change(){
                this.name="tom"//只是提交了更新请求
                let h1=document.querySelector('h1')
                console.log(h1.textContent)//更新之前：john
                this.$nextTick(()=>console.log(h1.textContent)) ////更新之后：tom
            }
        },
    }
</script>