03 Vue变量监听：watch、computed

最新推荐文章于 2023-03-10 15:08:08 发布

巅峰键盘侠

最新推荐文章于 2023-03-10 15:08:08 发布

阅读量275

点赞数

分类专栏： Vue前端框架

本文链接：https://blog.csdn.net/lihailin9073/article/details/100060824

版权

本文详细介绍了Vue中的变量监听，包括watch如何监听单个变量，以及computed如何监听多个变量。通过示例代码展示了watch和computed的用法，帮助理解其在数据变化时的响应机制。

摘要由CSDN通过智能技术生成

1、watch监听单个变量

watch用于监听单个变量或者对象，用法为：

watch:{

var_1:function(new_value, old_value) { // todo }

}

demo代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03 监听单个变量和多个变量</title>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <div>{
  {num1}}</div>
        <button @click="count_num()">改变num1的值，查看控制台观察watch是否监听到了变量的变化</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num1:100
            },
            methods:{
                count_num:function(){