Vue 计算属性与侦听器

最新推荐文章于 2023-06-08 01:10:39 发布

僵尸C掉了我的脑子

最新推荐文章于 2023-06-08 01:10:39 发布

阅读量140

点赞数 1

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

本文链接：https://blog.csdn.net/qq_35457469/article/details/90769470

版权

vue 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

侦听器

<div id="app">
    {{msg}}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue'
        },
        watch: {
            msg: function (newval,oldval){
                console.log('newval is:' + newval)
                console.log('oldval is:' + oldval)
            }
        },
    })
</script>

当msg中的值发生变化时，侦听器就会侦听到，同时则会执行侦听器中的事件
watch 只能监听当前或这个指定值的变化
computed 只要是包含在function中变量值任意一个值，对应返回的值都会发生变化

计算属性

<div id="app">
    {{msg}}
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var arr = 'new test'
    var app = new Vue({
        el: '#app',
        data: {
            msg: 'hello vue',
            another: 'another hello vue!!'            
        },
        watch: {
            msg: function (newval,oldval){
                console.log('newval is:' + newval)
                console.log('oldval is:' + oldval)
            }
        },
        computed: {
            msg1: function() {
                return 'computed:' + this.msg + ',' + this.another + ',' + arr
            }
        },
    })
</script>

watch和computed的区别：
watch：监听一个变量或一个常量的变化，单一的一个或一个数组
computed：监听多个变量，前提是在vue的实例中
使用场景介绍，watch（异步场景），computed（数据联动）