Vue-3 计算属性与侦听器

最新推荐文章于 2022-04-16 06:29:05 发布

Torey_Li

最新推荐文章于 2022-04-16 06:29:05 发布

阅读量838

点赞数

分类专栏： Vue 文章标签： vue watch computed Vue 计算属性 Vue侦听器

本文链接：https://blog.csdn.net/Torey_Li/article/details/88014373

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

根据慕课网的课程做的笔记

计算属性与侦听器

侦听器：watch
计算属性：computed
使用场景

侦听器：watch

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
  var app=  new Vue({
        el: "#app",
        data: {
            msg: "hello Vue!"
        },
        watch: {
            msg: function (newVal,oldVal) {
                console.log("最新的值为：" + newVal);
                console.log("以前的值为："+oldVal);
            }
        },
        computed: {}
    });
</script>
</body>
</html>

在这里插入图片描述

计算属性：computed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<p>{{msg1}}</p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            msg: "hello Vue!"
        },
        watch: {
            msg: function (newVal, oldVal) {
                console.log("最新的值为：" + newVal);
                console.log("以前的值为：" + oldVal);
            }
        },
        computed: {
            msg1: function () { 
            return 'computed:'+this.msg
            }
        }
    });
</script>
</body>
</html>

在这里插入图片描述

watch与computed区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}<br />
        count= {{count}}<br />
        (count+1)*2={{(count+1)*2}}<br />
        计算属性computed:{{this.msg1}}<br />
        <button type="button" v-on:click="submit">点击一次，count+1</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!!",
                count: 0
            },
            methods: {
                submit: function () {
                    this.count++;
                }
            },
            watch: {
                msg: function (newVal, oldVal) {
                    console.log("最新的值为：" + newVal);
                    console.log("以前的值为：" + oldVal);
                }
            },
            computed: {
                msg1: function () {
                    return "computed:" + this.msg + "--" + this.count;
                }
            }
        });
    </script>
</body>
</html>

计算属性computed：msg和count是msg1的组成部分，当msg或者count值变化时，都会触发computed中定义的函数，会使msg1改变,而侦听器只是侦听了msg的值的变化，只有msg值变化时，才会触发watch中定义的函数
在这里插入图片描述

Torey_Li

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue-3 计算属性与侦听器

计算属性与侦听器侦听器：watch计算属性：computed使用场景侦听器：watch&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&amp;gt;&amp;lt;html x
复制链接

扫一扫

专栏目录