• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue监听数据:computed与watch

互联网 diligentman 2周前 (04-30) 13次浏览

computed计算属性:
与methods的区别:
1.当作属性,调用时不写括号;
2.监听指定数据,当指定数据发生改变时,才会被触发

watch侦听属性:
对象名代表要监听的数据,
对象值为数据改变时要做的操作(处理函数),
监听的数据的最新值会以形参的方式传进这个函数,
仅监听的数据更新时才触发操作

与computed的区别:
1.没有返回值
2.可以写异步代码
3.一个侦听属性只监听一个数据

computed与methods的区别:
每次触发重新渲染时,methods里所有的方法均会被执行一遍;
computed里的属性只在监听的数据发生改变时才会执行对应的操作

<div id="app">
	<!--操作变量count-->
    <button v-on:click="increase()">count+1</button>
    <button v-on:click="de()">count-1</button>
    <p>{{count}}</p>
    <p>{{result()}}</p>
    <p>{{output}}</p>
    
    <!--操作变量count2-->
    <button v-on:click="count2++">count2+1</button>
    <p>{{count2}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data:{
            count:0,
            count2:0
        },
        computed:{
            output : function(){
                console.log("output");
                return this.count>5 ? "大于5":"小于5"
            }
        }, // 计算属性
        methods:{
            increase: function(){
                this.count++;
            },
            de:function(){
                this.count--;
            },
            result: function(){
                console.log("result")
                return this.count>5 ? "大于5":"小于5"
            }
        }
    })
</script>

vue监听数据:computed与watch
当点击第一行的两个按钮时,操作count的加减,result()和output均对count做是否大于5的判断,result()为函数,output为计算属性

第三个按钮是操作count2的,点击此按钮时,count2累加,下方数值发生改变,result()与count2无关,但也被执行,输出"result",而output则不做反应
(如果没有显示count2的数值,即页面没有改变,只有点击"count2+1"按钮的操作,页面没有触发重新渲染,methods里的方法也不会被触发)


程序员灯塔
转载请注明原文链接:vue监听数据:computed与watch
喜欢 (0)