vue前端开发自学，ref为什么称作“钩子”,看完你就明白

vue前端开发自学，ref为什么称作“钩子”,看完你就明白！之前我也是不太了解，为什么业内人士，喜欢把ref这个东西叫做“钩子”，看完今天的案例demo，就能深刻的体会到，这个名字的来历了。

前言提示内容，必看：

众所周知，vue框架，其实是把前端开发人员，之前经常苦闷的一些javascript操作dom的事情，给做了大量的封装！省去了繁琐的dom操作环节了。好像在dom身上穿上了厚厚铠甲。

我们需要用什么操作的时候，只需要调用vue官方提供的一些对外接口，和函数就能实现功能需求了。无需去关心底层的dom是如何操作的了。

虽然如此，有些功能需求，可能您真的是，迫不得已，需要去操作dom了。那么，ref就来了。它就是实现这个功能的。借助于ref，可以让您再次获取到dom元素。下面是代码内容。

<template>
    <h3>ref的使用练习</h3>
    <p ref="username">{{ username }}</p>
    <button @click="getElementHandle">获取dom元素</button>
    <button @click="changeTextHandle">更改dom元素文本内容</button>
</template>
<script>
    export default{
        data(){
            return{
                username:"Joson"
            }
        },
        methods:{
            getElementHandle(){
                console.log(this.$refs.username);
            },
            changeTextHandle(){
                this.$refs.username.innerHTML="hello"
            }
        }
    }
</script>

代码非常简单，一个p标签，2个button按钮，绑定了各自的点击事件。先看第一个事件的执行效果图。

如图所示，p标签内容原始数据就是joson，成功获取到了该dom元素P

下面再看执行更改dom元素的文本内容事件执行效果。

如图，成功执行了方法的内容，并且，再次点击获取dom元素内容，可以看见，已经获取到了修改之后的新内容了。