vue 计算属性computed 和 methods 和 侦听属性(watch)

一、计算属性(computed)

首先为什么要用计算属性?

在模板(HTML)中放入太多的逻辑会让模板过重且难以维护,而且不好阅读。计算属性computed来帮忙。

计算属性是一个函数,是经过元数据(data里)进一步运算后的数据,计算属性的优点是:当元数据不发生变化时,不会再做计算(即:缓存),只有元数据发生变化时,才做计算。是响应式的,需要在模板中渲染才可调用(计算属性只能在模板上使用)

什么时候用???

一条数据 在多个位置 展示不同形态的时候 使用计算属性

又或者 一个变量 需要展示之前 进行处理数据 也可以用计算属性

语法:写在与data   methods等同级位置

//定义
computed:{
  计算属性: function(){return 返回值}		
}


使用:	{{计算属性}} |  v-指令="计算属性"

// 比如:

<template>
  <div>
        <h1>正常展示:{{text}}</h1>
        <h1>大写展示:{{textUpper}}</h1>
        <h1>大写加截取展示:{{textSub}}</h1>
  </div>
 
</template>

<script>
export default {
    data(){
        return {
            text:"abcdefghijk"
        }
    },
    computed:{
        textUpper(){
            return this.text.toUpperCase()
        },
        textSub(){
            return this.text.toUpperCase().substr(1,5)
        }
    }
}
</script>

计算属性与方法的区别?

<template>
  <div>
      你好
      <h1>{{newarr}}</h1>
      <h1>{{fun()}}</h1>
  </div>
</template>

<script>
export default {
    data(){
        return {
            arr:[111,2222,3333,4444,555,666,777,888]
        }
    },
    computed:{
        newarr(){
            console.log("计算属性")
            return this.arr.slice(0,4)
        }
    },
    methods:{
        fun(){
            return this.arr.slice(0,4)
        }
    }
}
</script>

面试题:computed VS methods

methods computed
每次调用都会执行函数里的代码基于它们的响应式依赖进行缓存的,如果依赖没有变化,就不再调用
性能一般性能高
{{methodname()}}
{{computedname}}
适合强制执行和渲染适合做筛选

最大的区别是

计算属性走缓存 只要计算属性处理过数据之后 数据在没有改变的时候 无论你在页面调用

多少次 他都只执行一次 然后剩下的调用都是从缓存中进行读取的 节省资源

函数 只要被调用那么就会执行 调用多少次执行多少次 比较消耗资源

二、属性检测(侦听属性:watch)

什么时候用?

需要在数据变化时执行异步或开销较大的操作时,这个时候需要属性检测watch。而不要使用计算属性,因为计算属性是同步的(需要立即返回结果)

监听data中的数据,如果数据改变了,那么watch就会收到通知调用一个函数(我们就可以在这个函数中完成指定的逻辑)

语法:写在与el data methods 同级

watch:{
  被侦听的属性名:'methods的里函数名'    //数据名==data的key
  被侦听的属性名:函数体(new,old){}  2个参数 new是新值,old是旧值
  被侦听的属性名:{
    handler:function(new,old){}, 
    deep: true //面试题:深度检测,当侦听的属性是个对象,修改对象的某个键时,就能检测到
    immediate: true //首次运行,要不要监听
  }
}

watch首次加载的时候能触发吗?

答:首次加载不会触发

想让watch首次加载触发咋办??

答: immediate: true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="demoDiv">
        <input type="text" v-model="inputval">
    </div>
    <script>
        new Vue({
            el:"#demoDiv",
            data:{
                inputval:""
            },
            methods:{
                
            },
            // 监听
            watch:{
                inputval(newval,oldval){
                    console.log(newval+"----"+oldval)
                }
            }
        })
    </script>
</body>
</html>

深度检测的是引用类型:

<div id="app">
    <input type="button" value="测试" @click="fn" />
</div>

<script>

let vm = new Vue({
        el:"#app",
        data:{
            person:{
                name:"张三疯",
                wife:{
                    name:"梅超风"
                }
            },
        },
        methods:{
            fn(){
                this.person.name="李思峰";
            }
        },
        watch:{
            person:{
                deep: true, //深度检测,当侦听的属性是个对象,修改对象的某个键时,就能检测到
                handler:function(){ 
                   console.log("person变了");
                },
                immediate: true
            }
        }
    });
</script>

面试题:计算属性 VS 函数 VS 属性检测

计算属性(computed) 函数(methods)
为了显示而用只是处理逻辑,跟普通的函数一样属性变化的检测(相当于事件),当属性的值发生变化时,可以调用函数
依赖模板调用
√(只能在模板上调用的)
√(可以在模板使用)×(不能在模板上使用)
是否缓存×
异步×(必须是同步)√(可以有异步)√(可以有异步)

  • 2
    点赞
  • 1
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

青田。

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值