computed和watch之间的区别：

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

两个重要的小原则：

  1. 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。

  2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

    应用场景

    image.png
    image.png

    computed

    1. <body>
    2.      <!-- 
    3.          计算属性：
    4.                  1.定义：要用的属性不存在，要通过已有属性计算得来。
    5.                  2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
    6.                  3.get函数什么时候执行？
    7.                              (1).初次读取时会执行一次。
    8.                              (2).当依赖的数据发生改变时会被再次调用。
    9.                  4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
    10.                  5.备注：
    11.                          1.计算属性最终会出现在vm上，直接读取使用即可。
    12.                          2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
    14.              监视的两种写法：
    15.                          (1).new Vue时传入watch配置
    16.                          (2).通过vm.$watch监视
    17.       -->
    18.  <div id="app">
    19.      <!-- 计算属性 -->
    20.      <h1>{{fullName}}</h1>
    21.      <ul>
    22.          <li v-for="item,index in oddstudents">
    23.              {{item.name}}
    24.          </li>
    25.      </ul>
    26.      <h1>{{reverseMsg}}</h1>
    27.      <!-- 监听 -->
    28.      <h1>{{msg}}</h1>
    29.  </div>
    30.  <script type="text/javascript">
    31.      let vm = new Vue({
    32.          el: '#app',
    33.          data: {
    34.              msg: '申翔上市',
    35.              first: '张',
    36.              last: '三',
    37.              students: [{
    38.                  name: '小黑',
    39.                  age: 15,
    40.              }, {
    41.                  name: '小黄',
    42.                  age: 16,
    43.              }]
    44.          },
    45.          computed: {
    46.              fullName: function() { //拼接
    47.                  return this.first + this.last
    48.              },
    49.              oddstudents: function() { //过滤出一个可供循环的数组
    50.                  return results = this.students.filter((item, i) => {
    51.                      return item.age % 2 == 0;
    52.                  })
    53.              },
    54.            //以上是简写 一般只有只有get（只读属性） 省略set
    55.              reverseMsg: { //颠倒字符串
    56.                  //获取时
    57.                  get: function() {
    58.                      return this.msg.split('').reverse().join('')
    59.                  },
    60.                  //修改时 不添加set修改则无效
    61.                  set: function(val) {
    62.                      this.msg = val.split('').reverse().join('')
    63.                  }
    64.              }
    65.          }
    66.      });
    67.  </script>
    68. </body>

    watch

    API：$watch / handler / immediate

  3. 两种写法

  4. handler - 值发送改变时会调用
  5. immediate - 初始化时让handler调用一下
  6. 可以监视computed属性

  7. deep - 深度监视（监视多级结构中所有属性的变化）

    <!DOCTYPE html>
<html>
 <body>
     <!-- 
             监视属性watch：
                 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
                 2.监视的属性必须存在，才能进行监视！！
                 3.监视的两种写法：
                         (1).new Vue时传入watch配置
                         (2).通过vm.$watch监视
      -->
     <!-- 准备好一个容器-->
     <div id="root">
         <h2>今天天气很{{info}}</h2>
         <button @click="changeWeather">切换天气</button>
     </div>
 </body>

 <script type="text/javascript">

     const vm = new Vue({
         el:'#root',
         data:{
             isHot:true,
         },
         methods: {
             changeWeather(newValue,oldValue){
         console.log(newValue);//改变后value
         console.log(oldValue);//改变前value
                 this.isHot = !this.isHot
             }
         },
         watch:{
     //正常写法
             isHot:{
                 immediate:true, //初始化时让handler调用一下
                 //handler什么时候调用？当isHot发生改变时。
                 handler(newValue,oldValue){
                     console.log('isHot被修改了',newValue,oldValue)
                 }
             },
     //简写
     isHot(newValue,oldValue){
                 console.log('isHot被修改了',newValue,oldValue)        
             }
         } 
     })

 //使用$watch写法
     vm.$watch('isHot',{
         immediate:true, //初始化时让handler调用一下
         //handler什么时候调用？当isHot发生改变时。
         handler(newValue,oldValue){
             console.log('isHot被修改了',newValue,oldValue)
         }
     })
 </script>
</html>

    deep 深度监视

    <!DOCTYPE html>
<html>
 <head>
     <meta charset="UTF-8" />
     <title>天气案例_深度监视</title>
     <!-- 引入Vue -->
     <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
     <!-- 
             深度监视：
                     (1).Vue中的watch默认不监测对象内部值的改变（一层）。
                     (2).配置deep:true可以监测对象内部值改变（多层）。
             备注：
                     (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
                     (2).使用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>
         <button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
         {{numbers.c.d.e}}
     </div>
 </body>

 <script type="text/javascript">
     Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

     const vm = new Vue({
         el:'#root',
         data:{
             isHot:true,
             numbers:{
                 a:1,
                 b:1,
                 c:{
                     d:{
                         e:100
                     }
                 }
             }
         },
         watch:{
             //监视多级结构中某个属性的变化
             /* 'numbers.a':{
                 handler(){
                     console.log('a被改变了')
                 }
             } */
             //监视多级结构中所有属性的变化
             numbers:{
                 deep:true,
                 handler(){
                     console.log('numbers改变了')
                 }
             }
         }
     })

 </script>
</html>