Vue--计算属性和监听属性-蒲公英云

Vue--计算属性和监听属性

灰太狼 2022-12-07 04:27 289阅读 0赞

computed:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要属性值还没有发生改变，多次访问属性计算属性会立即返回之前的计算结果，而不必再次执行函数。如果不希望有缓存，就用函数代替。
watch:侦听属性，响应数据的变化，需要在数据命令执行异步或开销较大的操作时，这个方式最有用。watch只能监听已经存在的属性，数组的push和pop等方法不会触发监听函数
例：

<body>
    <div id="app">
       总和： {
   {totle}}
       <input v-model="question" placeholder="please input">
       {
   {answer}}
       总和： {
   {totle(10,5)}}<!--computed传参，利用箭头函数,return的箭头函数-->
       总和：{
   {20|totle}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data() {
                return {
                    x:1,
                    y:4,
                    question: '',
                    answer: 'I cannot give you an answer until you ask a question!',
                }
            },
            watch: {
                question:function(newValue,oldValue){
                    console.log("newValue="+newValue,"oldValue="+oldValue);
                    this.answer = "I give you an anwser";
                }
            },
            computed: {
                // totle:function(){
                //     var totle = this.x+this.y;
                //     return totle;
                // },
                // //写法二
                // totle(){
                //     var totle = this.x+this.y;
                //     return totle;
                // },
                //写法三
                // totle:()=>{
                //     // var totle = x+y;//不能用this，this会指向window
                //     return (x,y)=>x+y;//箭头函数
                // },
                   totle:function(){
                    // var totle = x+y;//不能用this，this会指向window
                    return (x,y)=>x+y;//箭头函数
                },
            },
            filters:{//过滤器
                totle:(x)=>x,
            },
        });
    </script>
</body>