vue中ref和watch的使用

最新推荐文章于 2025-04-09 07:33:36 发布

我吃饭很慢.

最新推荐文章于 2025-04-09 07:33:36 发布

阅读量2k

点赞数 1

分类专栏： Vue小白入门文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45586870/article/details/122849742

版权

Vue小白入门专栏收录该内容

11 篇文章

订阅专栏

一、ref简介

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件.

二、watch简介

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。简而言之watch是数据监听作用。
注意：不建议使用watch,它会持续监听属性的状态，会耗费项目性能，用来调试还是可以的

二、案例

①index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- cdn是一种引入 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 这里用link印入 -->
    <link rel="stylesheet" href="styles.css">
    <title>vue-cdn</title>
</head>

<body>
    <div id="vue-app">
        <h1>ref</h1>
        <label>姓名</label>
        <!-- 标记ref，就可以通过refs获取到ref的名字，也就是当前的元素对象，可以拿来获取当前元素，也可以拿来获取一整个容器 -->
        <input type="text" ref="name" @keyup="getName" />
        <span>{{ name }}</span>

        <label>年龄</label>
        <input type="text" ref="age" @keyup="getAge" />
        <span>{{ age }}</span>
    </div>
</body>

<script src="app.js"></script>

</html>

②app.js

new Vue({
    el: "#vue-app",
    data() {
        return {
            name: '',
            age: 32
        };
    },

    methods: {
        getName() {
            //console.log(this.$refs.name.value); //这样name.value是获取到name的值
            this.name = this.$refs.name.value;
        },
        getAge() {
            this.age = this.$refs.age.value;
        }
    },
    //watch不放在methos里面
    watch: {
        name(val, oldVal) {
            console.log(val, oldVal); //(现在的值，上一个值)
        },
        age(val, oldVal) {
            console.log(val, oldVal);
        }
    }

})