Vue之watch监听

最新推荐文章于 2024-03-25 11:09:46 发布

陌一一

最新推荐文章于 2024-03-25 11:09:46 发布

阅读量1k

点赞数

分类专栏： web前端开发文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127986046

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

计算属性不能用异步代码；
有返回值的函数，用异步代码也不行；
没有返回值的函数，可以用异步代码；
watch监听也可以放异步代码；

data、methods、computed、watch的区别：

data：状态，会被拦截；

methods：事件绑定，逻辑计算。可以不用return，没有缓存；

computed：重视结果，解决模板过重问题，必须有return，只求结果，有缓存，同步；

watch：重视过程，监听一个值的改变，不用返回值，异步同步；

watch监听值改变：

监听谁，就把谁封成函数；
函数参数是当前最新的value值；
下面代码演示，监听mytext的变化：

<body>
    <div id="box">
        <input type="text" v-model="mytext">
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                mytext:""
            },
            watch:{
                mytext(newval){
                    console.log("改变了",newval)
                }
            },
            methods:{

            }
        })
    </script>
</body>

结果：