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

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

计算属性

1.computed

定义：要用的属性不存在，要通过已有属性计算得来。

原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

优势：与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可以进行异步操作。