计算属性 computed和watch

computed 计算属性

在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed

• 计算属性类似 getter 和 setter ，当访问某个计算属性的时候，就会调用 computed 中同名的函数，函数的返回值将作为该计算属性的值

• 计算属性的值依赖计算函数中依赖的其它响应式数据

• 计算属性的值可以缓存，如果依赖的其它响应式数据没有发生变化，但多次访问该计算属性，得到结果是最近一次变化产生的值（相对于调用方法得到结果在某些时候性能要好一些）

使用场景：当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性

计算属性 computed 是基于data中数据进行处理的，data数据变化，他也跟着变化

当data中数据没有发生改变时，我们调用computed中函数n次，只会进行缓存（执行一次）

每个计算属性都包含两个set、get 属性

<div>{{get}} </div> //调用时候，直接写上函数名即可

computed: {
        get: function () { //这里不适合写 get()，语法规定
                return this.firstName + ' ' + this.lastName;// 必须要有return
       },
 }
 

watch属性

1、watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。

2、watch中的函数有两个参数，前者是newVal，后者是oldVal。

3、watch中的函数是不需要调用的。