computed和watch的区别

最新推荐文章于 2024-07-22 15:13:59 发布

小熊不爱吃糖

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量37

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_72944755/article/details/129744743

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <div id="demo">{{ fullName }}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            // 侦听器的方式
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            },
            // 计算属性的方式
            computed: {
                fullName() {
                    this.fullName = this.firstName + ' ' + this.lastName
                }
            }
            // computed和watch的区别
            // 1、computed是有缓存的  watch没有
            // 2、computed一般执行同步操作 异步操作在watch中实现
            // 3、computed监听的那个数据的数据发生变化时,不会重新计算,只有依赖的数据发生变化时才会重新调用getter来计算
            // watch监听的数据发生变化时 立马执行相应的回调函数重新计算
        });
    </script>
</body>

</html>

小熊不爱吃糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed和watch的区别

/ 3、computed监听的那个数据的数据发生变化时,不会重新计算,只有依赖的数据发生变化时才会重新调用getter来计算。// 2、computed一般执行同步操作异步操作在watch中实现。// watch监听的数据发生变化时立马执行相应的回调函数重新计算。// 1、computed是有缓存的 watch没有。// computed和watch的区别。// 计算属性的方式。
复制链接

扫一扫