Vue2（二）：计算属性、监视属性、二者的区别

一、计算属性

1. 使用插值语法和methods拼接姓名

如果样式要求不多的话这样写没问题，如下代码是截取我输入的姓的前三个字母

<div id="root">姓：<input type="text" v-moudel="firstName">名：<input type="text" v-moudel="lastName">姓名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{firstName:'hb',lastName:'bj'}})

样式太多的话就都放进methods里面去

注意：之前的showInfo是绑定事件，加不加（）都行，现在是调用那个函数必须得加（）

每次改动firstName后者lastName就会重新解析模版，调用fullName

<div id="root">姓：<input type="text" v-model="firstName">名：<input type="text" v-model="lastName">姓名：<span>{{fullName()}}</span></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{firstName:'hb',lastName:'bj'},methods:{fullName(){// this是vue实例，里面就有firstName啥的return this.firstName+'-'+this.lastName}}})

2. 使用计算属性拼接姓名

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

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

属性：vue认为data里面写的就是属性，属性：属性值,属性在vm._data里

计算属性：就是拿着你已经写完的属性去加工计算，放在vm里，不在data里

属性放在data里，计算属性放在computed

<div id="root">姓：<input type="text" v-model="firstName">名：<input type="text" v-model="lastName">姓名：<span>{{fullName}}</span>
姓名：<span>{{fullName}}</span>
姓名：<span>{{fullName}}</span></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{firstName:'hb',lastName:'bj'},computed:{fullName: {get(){//读取fullName的时候自动调用get// 并且vue给你设置computed里的this是vmconsole.log('get被调用喽')return this.firstName+'-'+this.lastName}}}})

如果这个时候我多次调用fullName的话，输出get被调用喽只显示一次，因为有缓存 

get什么时候调用？（1）初次读取fullName 时，（2）所依赖的数据发生变化时，所以不用担心姓或者名变化fullName没变

我用computed不是fullName对象.get函数！而是我用fullName的时候立马就调用get函数，返回一个值放在fullName（计算出来的新属性）身上，在vm中可以查看

set什么时候调用？fullName被修改的时候，而且必须设置参数，你把fullName改成什么就返回什么

set(value){const arr=value.split('-')this.firstName=arr[0]this.lastName=arr[1]//fullName依赖first和last，想真正的改掉就得把谁算出来的改掉}

优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

备注：
1.计算属性最终会出现在vm上，直接读取使用即可，不用加括号，和methods区别一下子。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变，这很关键。

3. 计算属性的简写

计算属性一般不修改，确定只读不改就可以用简写

姓名：<span>{{fullName}}</span>

computed:{fullName(){return this.firstName+'-'+this.lastName}}

fullName是一个属性，不是一个方法，只不过是调用里面的getter，把返回值直接给了vm，所以直接{{fullName}}不可以加（）！！

data的数据，methods的方法，computed的计算属性

二、监视属性

1. 天气切换案例

(1)利用插值语法和三元表达式

<div id="root"><h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2><button>切换天气</button></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{isHot:true}})

(2)利用计算属性

<div id="root"><h2>今天天气很{{info}}</h2><button @click="change">切换天气</button></div><script type="text/javascript">const vm=new Vue({el:'#root',data:{isHot:true},computed:{info(){return this.isHot?'炎热':'凉爽'// isHot不是computed里的找不到，所以得this，就是vue的}},methods:{change(){this.isHot=!this.isHot;}}})

不需要methods也可以这样写：

<button @click="isHot=!isHot">切换天气</button>

@xxx：yyy绑定事件的时候可以写一些简单的语句

2. 监视属性

(1)watch

watch:{isHot:{immediate:true,//初始化时让handler调用//当isHot发生改变时它就调用handler(newValue,oldValue){console.log('isHot改了',newValue,oldValue)}}}

用handler的时候同时返回两个参数newValue和oldValue

(2)vm.$watch

const vm=new Vue({el:'#root',data:{isHot:true},computed:{info(){return this.isHot?'炎热':'凉爽'// isHot不是computed里的找不到，所以得this，就是vue的}},})vm.$watch('isHot',{immediate:true,//初始化时让handler调用//当isHot发生改变时它就调用handler(newValue,oldValue){console.log('isHot改了',newValue,oldValue)}})

第一个参数是对象名，第二个参数是配置对象

区别：很明确坚实谁就写第一种，否则就写第二种

3. 深度监视

(1).Vue中的watch默认不监测对象内部值的改变（一层，如果监视那么对象地址不变就不变）。
(2).配置deep:true可以监测对象内部值改变（多层）。
(3).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！想要可以就要手动开启deep:true
(4).使用watch时根据数据的具体结构，决定是否采用深度监视。

 <div id="root"><h3>a的值是:{{numbers.a}}</h3><button @click="numbers.a++">点我实现a+1</button><h3>b的值是:{{numbers.b}}</h3><button @click="numbers.b++">点我实现b+1</button></div><script type="text/javascript">new Vue({el:'#root',data:{isHot:true,numbers:{a:1,b:1}},watch:{//监视多级结构中某个属性的变化numbers:{//不加引号报错是因为本来就应该加引号写，有的中间不带.的简写了没加//  如果想要给b也加的话，一个一个写太麻烦了，但是发现直接给number加//  改变a或者bnumber都不输出，因为它没有深入的去看a或b的变化deep:true,//监视多级结构中所有属性的变化handler(){console.log('number改了')}}}})</script>

4.监视的简写形式

用简写的前提是不需要immediate也不需要deep

(1)watch写法

watch:{isHot(newValue,oldValue){console.log('isHot被改了')}}

(2)$watch写法

vm.$watch('isHot',function(newValue,oldValue){console.log('isHot被改了')})

三、watch对比computed

1.watch

<div id="root">姓：<input type="text" v-model="firstName">名: <input type="text" v-model="lastName">全名： <span>{{fullName}}</span></div><script type="text/javascript">new Vue({el:'#root',data:{firstName:'张',lastName:'三',fullName:'张-三'},watch:{firstName(newValue){this.fullName=newValue+'-'+this.lastName},lastName(newValue){this.fullName=this.firstName+'-'+newValue}}})

监视姓的同时还是监视名

2.computed 

computed:{fullName: {get(){console.log('get被调用喽')return this.firstName+'-'+this.lastName}}}

加一下就完事了，但是computed计算属性里面不能开启异步任务去维护数据的，靠的就是返回值，watch就可以开延迟什么的。

 firstName(newValue){setTimeout(()=>{this.fullName=newValue+'-'+this.lastName},1000)

总结：

1、computed能完成的功能，watch都可以完成。
2、watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则！
1、所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
2、所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象