04-Vue基础之计算属性与监视属性

个人名片:
作者简介:一名大二在校生
个人主页:坠入暮云间x
座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。
**学习目标: 坚持每一次的学习打卡

文章目录

    • 计算属性
      • 1.computed
      • 2.计算属性中的 [getter和setter ]
    • 监视属性 watch
    • 计算属性与监视属性的区别

纪上次的Vue的基础语法和条件渲染的学习,我们对Vue的语法也有些初步的了解,今天的学习内容是Vue的计算属性和监视属性,让我们继续漫步在学习的海洋中吧

计算属性

1.computed

定义:要用的属性不存在,要通过已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的gettersetter
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便
语法:{{方法名}}显示计算结果
代码示例

<div id="app">
        <h2>{{firstName+' ' +lastName}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{fullName}}</h2>
    </div>
    <script>
       const app =new Vue({
        el:'#app',
        data:{
            firstName:'Lebron',
            lastName:'james'
        },
        //computed:计算属性()
        computed:{
         fullName:function(){
            return this.firstName +' ' +this.lastName
         }
        },
        methods:{
            getFullName(){
                return this.firstName +' ' +this.lastName
            }
        }
       })
    </script>

2.计算属性中的 [getter和setter ]

计算属性拥有的两个方法:getter 和 setter 用来实现数据的双向绑定
可以简单的将getter理解为获取值 ,setter为设置值
但一般默认情况下computed只有getter读取数值,不能改变设值
语法:

computed:{
    fullName:{
        get(){
            return ...
        },
        set(value){
            
        }
    }
}

注意:

1.getter中一定要有return返回值,不然会报错
2.setter函数接受一个参数,是setter函数执行时设置的fullName的值。

监视属性 watch

在Vue中呢watch常用于监听响应数据的变化 当属性变化时, 回调函数自动调用, 在函数内部进行计算。

注意:

  1. 当被监视的属性变化时, 回调函数自动调用, 进行相关操作
  2. 监视的属性必须存在,才能进行监视!!
  3. Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!
  4. 使用watch时根据数据的具体结构,决定是否采用深度监视。

计算属性与监视属性的区别

  1. 计算属性变量在computed中定义,监视属性监听的是已经在 data 中定义的变量, 当该变量变化时,会触发 watch 中的方法.
  2. computed 具有缓存功能,可以监听对象某个具体属性。
  3. watch可以进行深度监听,监听对象的变化。
  4. 计算属性是声明式的描述一个值依赖了其他值,依赖的值改变后重新计算结果更新DOM。监视属性的是定义的变量,当定义的值发生变化时,执行相对应的函数。
  5. computed能完成的功能,watch都可以完成。watch能完成的功能,computed不一定能完成,比如:watch可以进行异步操作。

你可能感兴趣的:(vue3,vue.js,前端,javascript)