一、计算属性(computed)

computed属性中声明的变量会使用Object.defineProproty()类似的代理方式，拥有get和set两个方法。
  get在(初次渲染页面和之后get中依赖的数据发生变化时被调用),内部有缓存机制，能够实现复用效率
  而methods则是只要被访问同一次就读取内存一次。

姓名_插值语法：{{lastName}} - {{firstName}}
姓名_methods属性：{{joint()}}
姓名_computed属性：{{fullName}}

注意当只需要get方法时才可以只用上述代码中的简写形式。

二、监视属性(watch)

1.一般监视

vue配置中还有一个属性watch，可以用来监视data、compute中配置的属性，一旦发生了变化就会默认调用其中的handler()方法，并且该方法有两个参数分别为新的值和旧的值。

代码示例：

今天是{{weather}}
点我切换天气

我们还可以通过vue.$watch(‘propertyName’,{ … })的形式在创建了vue实例后添加对某个属性的监视。

2.深度监视

所谓深度监视就是监视的对象是可能是一个对象中某个属性或对象的值
例如data中的对象

number{a:1,b:1
}

想要监视对象number中的属性a不能在watch中直接使用number.a: {}这种形式，而是用引号将其引起来：‘number.a’: {}
对于多级结构的对象，如果想要检测对象内部任意一个属性是否发生了变化就要用到deep属性。
代码示例：

你的年龄是：{{people.info.age}}
点我变的更成熟点我变的更年轻

上述代码包含了watch中监视的简写形式。
computed能实现的功能，watch都能实现；watch能实现的computed不一定能实现。

ps：箭头函数没有自己的this指针，它会继承上一级结构的this指针

三、关于vue中this指针的一些细节

例子如下：

people:{// 默认不检测对象内部的值的改变deep: true,handler(newValue, oldValue){// 不能使用function() 否则this指针就会指向WindowsetTimeout(() => {// 箭头函数的没有自己的this指针，而去继承了上一级handler的指针也就是vue实例console.log(this);console.log('年龄被改变了');}, 2000);}
},

这是一个被watch检测的一个属性，如果想要在handler中使用不被vue管理的函数最好将 function(){} 改写为 => 箭头函数。
这样this指针就会继承上一级结构的this指针也就是vue实例。