1.计算属性：
- - 1.概述：
  - 2.语法特点：
  - 3.案例：
  - - 案例1：
    - 案例2：
    - 案例3：
  - 4.总结：
  - 5.get函数什么时候执行？
  - 6.注意:
2.监视属性：
- - 1.概述：
  - 2.用法：
  - - 1.监视单个属性值：
    - - 写法1：在Vue实例对象时配置：
      - 写法2：Vue实例对象完成后，配置监视属性
      - 测试结果展示：
    - 2.深度监视：
    - - 1.监视对象的一个属性：
      - 2.监视整个对象：
  - 3.监视属性的简写：只适用于单个属性等简单逻辑的监视
  - 4.总结：

1.计算属性：

1.概述：

   简单来说，计算属性就是通过Vue实例中data中已存在的属性，经过逻辑运算得到一个新属性；

2.语法特点：

1.定义Vue实例vm
2.在vm中定义el和data属性
3.在data属性中定义相关属性（数据）
4.在vm中定义computed计算属性
5.在计算属性中定义函数，执行对data属性中定义相关属性的逻辑运算
6.如果需要对计算属性的值进行读写操作，还需要在计算属性中定义的函数中定义get/set方法
7.并且通过set方法修改计算数值的值时，必须要引起参与计算属性的变量的改变
8.因为get方法具有缓存机制，只有当数据改变后才会再次执行，如果通过set修改计算属性的值时，不改变参与计算的值，那么get方法就不会执行，更新后的数据也就不会同步更新到页面上了

3.案例：

案例1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>全名：{{fullName}}</h2>姓:<input type="text" v-model="firstName"/><br/>名:<input type="text" v-model="laseName"/><br/>全名:<input type="text" v-model="fullName"/>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {firstName: '张',laseName: "三"}},computed: {//计算属性fullName: {get() {//有缓存 只执行一次 如果改变了  需要二次执行console.log("执行了fullName计算")return this.firstName + "-" + this.laseName;},set(value) {console.log("改变计算属性:", value)//在修改是 要引起 参与计算属性的变量的改变let arr = value.split("-");this.firstName = arr[0];this.laseName = arr[1];}}}).$mount("#root");
</script>
</body>
</html>

说明：在上面案例中，我们给Vue实例添加了一个计算属性，通过实例中data对象的firstname属性和lastname属性计算获取fullname，并将计算属性fullname展示到了页面上。由于我们在计算属性的函数中添加了get/set方法，并在set方法中修改fullname的值后，将新的值赋值给了实例中data对象的firstname属性和lastname属性，所以可以实现浏览器页面上改变fullname的值时，firstname属性和lastname属性以及最上面的fullname的值的同步变化，如下图所示；

案例2：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>全名：{{fullName}}</h2>姓:<input type="text" v-model="firstName"/><br/>名:<input type="text" v-model="laseName"/><br/>全名:<input type="text" v-model="fullName"/>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {firstName: '张',laseName: "三"}},computed: {//计算属性fullName: {get() {//有缓存 只执行一次 如果改变了  需要二次执行console.log("执行了fullName计算")return this.firstName + "-" + this.laseName;},set(value) {console.log("改变计算属性:", value)}}}).$mount("#root");
</script>
</body>
</html>

在案例2中，我们在set方法中只改变fullname的值后，而没有将新的值赋值给了实例中data对象的firstname属性和lastname属性，那么在页面中对应的属性就不会同步更新，因为对于get方法来说，数据未发生改变，就不会再执行了，测试结果如下图所示；

案例3：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>全名：{{fullName}}</h2>姓:<input type="text" v-model="firstName"/><br/>名:<input type="text" v-model="laseName"/><br/>全名:<input type="text" v-model="fullName"/>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {firstName: '张',laseName: "三"}},computed: {//简写  只读fullName() {//有缓存 只执行一次 如果改变了  需要二次执行console.log("执行了fullName计算")return this.firstName + "-" + this.laseName;}}}).$mount("#root");
</script>
</body>
</html>

说明：如果对于计算属性的结果只有读取操作，那么就可以简写计算属性中的函数了，只需在计算属性的函数中定义执行逻辑即可，由于缓存机制，只要该值不发生改变，就可以正常展示到页面上；因为没有set方法，如果此时在页面上修改计算属性的值，就会报错。

4.总结：

要用的属性不存在，需要通过已有的属性计算的来
底层借助了 Object.defineproperty() 方法提供了set get

5.get函数什么时候执行？

在初次读取时执行一次
当依赖属性改变时在次执行

6.注意:

计算属性最终会出现在vm上可以直接调用
如果计算属性要被修改，就必须写set函数，还要引起依赖属性的改变
如果不考虑修改可以简写：

2.监视属性：

1.概述：

<font style="color:rgba(0, 0, 0, 0.85);">在 Vue 中，监视属性（</font>`<font style="color:rgba(0, 0, 0, 0.85);">watch</font>`<font style="color:rgba(0, 0, 0, 0.85);">）用于监听一个特定的数据属性，并在该属性发生变化时执行相应的回调函数。</font>

2.用法：

1.监视单个属性值：

写法1：在Vue实例对象时配置：

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式结合计算属性展示天气信息    --><h2>今天的天气：{{info}}</h2>
<!--绑定单击鼠标事件切换天气    --><button @click="changeWeather">点击切换天气</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {isHot: true}},//通过计算属性的函数展示天气信息computed: {info() {return this.isHot ? '炎热' : '凉爽';}},//通过单击鼠标事件的回调函数改变天气信息methods: {changeWeather() {this.isHot = !this.isHot;}},//监视isHot属性，当属性的值发生改变时，将改变前和改变后的值输出到控制台watch: {//监视属性isHot: {//在初始化时监视immediate:true,handler(newValue, oldValue) {console.log('新的数据：', newValue);console.log('旧的数据：', oldValue);}}}})vm.$mount("#root");
</script>
</body>
</html>

写法2：Vue实例对象完成后，配置监视属性

 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式结合计算属性展示天气信息    --><h2>今天的天气：{{info}}</h2>
<!--绑定单击鼠标事件切换天气    --><button @click="changeWeather">点击切换天气</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {isHot: true}},//通过计算属性的函数展示天气信息computed: {info() {return this.isHot ? '炎热' : '凉爽';}},//通过单击鼠标事件的回调函数改变天气信息methods: {changeWeather() {this.isHot = !this.isHot;}}})//第二种写法  创建实例后 配置vm.$watch('isHot', {//在初始化时监视immediate: true,handler(newValue, oldValue) {console.log('新的数据：', newValue);console.log('旧的数据：', oldValue);}})vm.$mount("#root");
</script>
</body>
</html>

说明：配置监视属性必须要在Vum实例绑定div容器之前；

测试结果展示：

因为我们在监视属性中配置了属性初始化时就开始监视，所以页面刚加载出来时，控制台就输出了相关信息，由于此时数据未改变，所以旧的值为unfined，表示未定义；

此时当我们单击按钮时，就会再次触发事件，引起监视的属性的改变，进而会执行监视属性中的逻辑

2.深度监视：

1.监视对象的一个属性：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式获取data中numbers的属性值    --><h3> a：的值是{{numbers.a}} </h3><h3> b：的值是{{numbers.b}} </h3>
<!--绑定单击鼠标事件，执行numbers的属性++操作(Vue 会自动将表达式执行的结果作为回调函数来处理,属于回调函数的简写)     --><button @click="numbers.a++">点击a++</button><button @click="numbers.b++">点击b++</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {numbers: {a: 1,b: 2}}},watch: {//单独的监视对象的一个属性'numbers.b': {handler(newValue, oldValue) {console.log(newValue,oldValue)}}}})vm.$mount("#root");
</script>
</body>
</html>

在上面案例中，我们对data属性中的numbers对象的b属性进行监视，当点击对应按钮时触发事件，改变了b属性的值，此时就会在监视属性中执行相关逻辑，控制台打印新旧数据；

2.监视整个对象：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式获取data中numbers的属性值    --><h3> a：的值是{{numbers.a}} </h3><h3> b：的值是{{numbers.b}} </h3>
<!--绑定单击鼠标事件，执行numbers的属性++操作(Vue 会自动将表达式执行的结果作为回调函数来处理,属于回调函数的简写)     --><button @click="numbers.a++">点击a++</button><button @click="numbers.b++">点击b++</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {numbers: {a: 1,b: 2}}},watch: {numbers: {//启用深度监视deep: true,handler(newValue,oldValue) {console.log(newValue,oldValue)}}}})vm.$mount("#root");
</script>
</body>
</html>

在上面案例中，我们对data属性中的numbers对象的b属性进行监视，当点击对应按钮时触发事件，改变了b属性的值，此时就会在监视属性中执行相关逻辑，控制台打印新旧数据。但实际上对于numbers对象而言，虽然b属性的值发生了改变，但numbers对象本身并没发生变化，因此新旧数值实际上是相同的；

3.监视属性的简写：只适用于单个属性等简单逻辑的监视

对于监视单个属性的简单逻辑，可以对监视属性的写法进行简化，示例代码如下：

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>今天的天气：{{info}}</h2><button @click="changeWeather">点击切换天气</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {isHot: true}},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather() {this.isHot = !this.isHot;}},watch: {//监视属性'isHot'(newValue, oldValue) {console.log('新的数据：', newValue);console.log('旧的数据：', oldValue);}}})vm.$mount("#root");
</script>
</body>
</html>