复杂data的处理方式

◼ 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
◼ 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示；
    比如我们需要对多个data数据进行运算、三元运算符来决定结果、数据进行某种转化后显示；
    在模板中使用表达式，可以非常方便的实现，但是设计它们的初衷是用于简单的运算；
    在模板中放入太多的逻辑会让模板过重和难以维护；
    并且如果多个地方都使用到，那么会有大量重复的代码；

例如:

    div id="app">
    <!-- 拼接名字 -->
    <!-- 方式一:使用插值语法表达式直接拼接-->
     <h2>姓名:{{firstName +" "+lastName}}</h2>
     <h2>{{firstName}}{{lastName}}</h2>
    <!-- 2.显示分数等级 -->
     <h2>{{score >=60?"及格":"不及格"}}</h2>
     <!--3.反转单词显示文本 -->
     <h2>{{message.split(" ").reverse().join()}}</h2>
    </div>
    <!-- 引入本地vue文件 -->
    <script src="./lib/vue.js"></script>
    <script>
      // 创建app
      const app = Vue.createApp({
        data(){
          return{
            // message:"Hello Vue"
            //1.姓名
            firstName:"Kobe",
            lastName:"bryant",
            // 2.分数:根据分数显示及格/不及格
            score:80,
            // 2.一串文本:对文本中的单词进行反转显示
            message:"my name is hdc"
          }
        },

      })
      // 挂载app
      app.mount("#app")
    ```
    ◼ 我们有没有什么方法可以将逻辑抽离出去呢？
        可以，其中一种方式就是将逻辑抽取到一个method中，放到methods的options中；
    例如:
      <div id="app">
    <!-- 拼接名字 -->
    <!-- 方式一:使用methods函数调用拼接-->
     <h2>姓名:{{getFullName()}}</h2>
     <h2>{{getFullName()}}</h2>
    <!-- 2.显示分数等级 -->
     <h2>{{scoreLevel()}}</h2>
     <!--3.反转单词显示文本 -->
     <h2>{{formartArr()}}</h2>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          // message:"Hello Vue"
          //1.姓名
          firstName:"Kobe",
          lastName:"bryant",
          // 2.分数:根据分数显示及格/不及格
          score:80,
          // 2.一串文本:对文本中的单词进行反转显示
          message:"my name is hdc"
        }
      },
      methods:{
        getFullName(){
          return this.firstName +" "+this.lastName
        },
        scoreLevel(){
          if(this.score >=60){return "及格"}
          return "不及格"
        },
        formartArr(){
          return this.message.split(" ").reverse().join(" ")
        }
      }

    })
    // 挂载app
    app.mount("#app")
    但是，这种做法有一个直观的弊端，就是所有的data使用过程都会变成了一个方法的调用；
    另外一种方式就是使用计算属性computed；

认识计算属性computed

    <div id="app">
    <!-- 拼接名字 -->
    <!-- 方式一:使用methods函数调用拼接-->
     <h2>姓名:{{fullName}}</h2>
     <h2>{{fullName}}</h2>
    <!-- 2.显示分数等级 -->
     <h2>{{scoreLevel}}</h2>
     <!--3.反转单词显示文本 -->
     <h2>{{formatArr}}</h2>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          // message:"Hello Vue"
          //1.姓名
          firstName:"Kobe",
          lastName:"bryant",
          // 2.分数:根据分数显示及格/不及格
          score:80,
          // 2.一串文本:对文本中的单词进行反转显示
          message:"my name is hdc"
        }
      },
      methods:{
      },
      computed:{
        // 计算属性默认对应的是一个函数
        fullName(){return this.firstName + " " + this.lastName},
        scoreLevel(){return this.score >= 60?"及格":"不及格"}, 
        formatArr(){return this.message.split(" ").reverse().join(" ")},
      }

    })
    // 挂载app
    app.mount("#app")

计算属性vsmethods

计算属性的缓存

计算属性的setter和getter

认识侦听器watch

    <div id="app">
    <h2>{{message}}</h2>
    <button @click="changeMessage">修改message</button>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          message:"Hello Vue",
          info:{name:"hdc",age:21,height:1.88}
        }
      },
      methods:{
        changeMessage(){
          this.message = "你好啊!WEBKing",
          this.info={name:"kobe",age:30,height:1.98}
        }
      },
      watch:{
        // 可以传递两个参数:newValue/oldValue
        message(newValue,oldValue){
          console.log("message发生变化",newValue,oldValue)
        },
        // 对象类型拿到的都是proxy代理对象
        info(newValue,oldValue){
          console.log("info发生变化",newValue,oldValue)
          // 获取原始对象
          //方式一:展开运算符
          console.log({...newValue},{...oldValue})
          //Vue方法:toRaw()
          console.log(Vue.toRaw(newValue),Vue.toRaw(oldValue))
        }
      }
    })
    // 挂载app
    app.mount("#app")

侦听器watch的配置选项

◼ 我们先来看一个例子：

  <div id="app">
    <h2>{{info.name}}</h2>
    <button @click="changeInfo">更改info</button>
  </div>
  <!-- 引入本地vue文件 -->
  <script src="./lib/vue.js"></script>
  <script>
    // 创建app
    const app = Vue.createApp({
      data(){
        return{
          info:{name:"hdc",age:21}
        }
      },
      methods:{
        changeInfo(){
          // 创建一个新对象赋值给info
          // this.info = {name:"kobe"}
          // 2,直接修改原对象某一个属性
          this.info.name = "kobe"
        }
      },
      watch:{
        info(newValue,oldValue){
          console.log("侦听到info发生改变",newValue,oldValue)
        }
      }
    })
    // 挂载app
    app.mount("#app")

    当我们点击按钮的时候会修改info.name的值；
    这个时候我们使用watch来侦听info，可以侦听到吗？答案是不可以。
◼ 这是因为默认情况下，watch只是在侦听info的引用变化，对于内部属性的变化是不会做出响应的：
    但是template模板里面的内容是深度监听的;
    这个时候我们可以使用一个选项deep进行更深层的侦听；
    注意前面我们说过watch里面侦听的属性对应的也可以是一个Object；
◼ 还有另外一个属性，是希望一开始的就会立即执行一次：
    这个时候我们使用immediate选项；
    这个时候无论后面数据是否有变化，侦听的函数都会有限执行一次；

      watch:{
        // 默认watch监听不会进行深度监听的
        // info(newValue,oldValue){
        //   console.log("侦听到info发生改变",newValue,oldValue)
        // }
        // 进行深度监听
        info:{
          handler(newValue,oldValue){
            console.log("侦听到info发生改变",newValue,oldValue)
            // 没有改变info只是改变了info里的属性,所以他们两个是相等的
            console.log(newValue === oldValue)//true
          },
          // 深度监听
          deep:true,
          // 第一次渲染的时候就执行监听器
          immediate:true
          
        }
      }

侦听器watch的配置选项（代码）

侦听器watch的其他方式（一）

侦听器watch的其他方式（二）

◼ 另外一个是Vue3文档中没有提到的，但是Vue2文档中有提到的是侦听对象的属性：
```
  'info.name':function(newValue,oldValue){
      console.log(newValue,oldValue);
    }
```
◼ 还有另外一种方式就是使用$watch 的API：
◼ 我们可以在created的生命周期（后续会讲到）中，使用this.$watch 来侦听；
    第一个参数是要侦听的源；
    第二个参数是侦听的回调函数callback；
    第三个参数是额外的其他选项，比如deep、immediate；
```
  // 生命周期回调函数:当前的组件被创建时自动执行
  //一般在该函数中会进行网络请求
  created(){
    // this.message = []
    this.$watch("message",(newValue,oldValue)=>{
       console.log(newValue,oldValue)
    },{deep:true,immediate:true})
  }
})
```