【Vue基础二】--- 计算属性，watch，style，class，条件列表渲染

1-1 计算属性与监听

只要data中的数据发生变化，vue一定会重新解析模板

1-1-1 计算属性-computed

只考虑读取,不考虑修改时,可以简写computed

1. 计算属性：

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

2. 原理：底层借助了Object.defineProperty方法提供的getter和setter

3. get函数什么时候执行：

   • 初始化读取会执行一次
   • 当依赖的数据发生变化时会被再次调用

4. 优势： 与methods实现相比，内部有缓存机制，效率更高

5. 备注：

   • 计算属性最终会出现在vm上
   • 如果计算属性要被修改，必须写set函数求相应修改，且set中要引起计算时依赖的数据

6. <div id="root">
          姓：<input type="text" value="张" v-model="fName"> <br> 名：
          <input type="text" value="三" v-model="lName"><br> 姓名： <span>{{fullName}}</span><br>
          <span>{{fullName}}</span><br>
          <span>{{fullName}}</span><br>
          <span>{{fullName}}</span><br>
          <!-- 只在控制台输出get一次，计算属性发生缓存 -->
      </div>
      <script>
          const vm = new Vue({
              el: '#root',
              data: {
                  fName: '张',
                  lName: '三'
              },
              computed: {
                  fullName: {
                      // get作用：有人读取fullName时，get就会被调用，且返回值作为fullName的值
                      // get什么时候调用？ 1.初次读取fullName时2.所以来的数据发生变化时
                      get() {
                          console.log('get');
                          console.log(this); // 计算属性中的this指向vue实例对象
                          return this.fName + this.lName
                      },
                      // set什么时候调用？当fullName被修改时
                      set(value) {
                          console.log('set', value);
                      }
                  }
              }
          })
      </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32

7. 简写：

   computed: {
      fullName() {
          
      }
   }
   1
   2
   3
   4
   5

8. vue中三个VScode的插件

   • Vue 3 Snippets

1-1-2 监听属性-watch

1. 监听属性watch:

   • 当被监听的属性变化时，回调函数自动调用，进行相关操作
   • 监听的属性必须存在，才能进行监听
   • 监听的两种写法：
     • new Vue时传入watch配置
     • 通过vm.$watch监听

2.     <div id="root">
           <h2>今天天气很{{info}}</h2>
           <button @click="changeWeather">切换天气</button>
       </div>
   
   </body>
   <script>
       const vm = new Vue({
           el: '#root',
           data: {
               isHot: true
           },
           computed: {
               info() {
                   return this.isHot ? '炎热' : '凉爽'
               }
           },
           methods: {
               changeWeather() {
                   this.isHot = !this.isHot
               }
           },
           watch: {
               // 配置对象
               isHot: {
                   immediate: true, // 初始化时让handler调用一下
                   // handler什么时候调用？当isHot发生改变时
                   handler(newValue, oldValue) {
                       console.log('isHot被修改了', newValue, oldValue);
                   }
               }
           }
       }
   
   
       })
   
       vm.$watch('isHot', {
           immediate: true, // 初始化时让handler调用一下
           // handler什么时候调用？当isHot发生改变时
           handler(newValue, oldValue) {
               console.log('isHot被修改了', newValue, oldValue);
           }
       })
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45

3. Vue的watch默认是无法检测对象内部值的改变

1-1-2-1 深度监听

1. 深度监视:
   • .Vue中的watch默认不检测对象内部值的改变(一层)
   • 配置deep： true可以检测对象内部值改变(多层)
2. 备注：
   • Vue自身可以检测对象内部值的改变，但Vue提供的watch默认不可以
   • 使用watch时根据数据的具体结构，决定是否采用深度监视

1-1-3 computed与watch

1. 区别：

   • computed与watch之间的区别：
     • computed能完成的功能，watch都可以完成
     • watch能完成的功能，computed不一定能完成，watch可以进行异步操作

2. 原则：

   • 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象： aaa(){}

     aaa: function(){}

   • 所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数等），最好写成箭头函数

     • 这样this的指向才是vm或 组件实例对象
     • aaa()=>{}

3. 计算属性完全靠fullName的返回值，计算属性不能开启异步任务维护属性

1-2 style，DOM

1-2-1

1. 绑定样式

   • class样式：
     • class=“xxx” :xxx可以是字符串、对象、数组
     • 字符串写法适用于：类名不确定，要动态获取
     • 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
     • 数组写法适用于： 要绑定多个样式，个数确定，名字也确定，但不确定用不用

2. style样式

   :style="{fontSize: xxx}"其中xxx是动态值
   :style="[a,b]"  其中a、b是样式对象
   1
   2

3. 例子：

   <body>
       
       
       <div id="root">
           
           <div class="basic" :class="mood" @click="changeMood">{{name}}div> <br/><br/>
   
           
           <div class="basic" :class="classArr">{{name}}div> <br/><br/>
   
   
           
           <div class="basic" :class="classObj">{{name}}div> <br/><br/>
           <div class="basic" :class="{atguigu1,atguigu2}">{{name}}div> <br/><br/>
   
           
           <div class="basic" :style="{fontSize: fsize+'px';}">{{name}}div>
           <div class="basic" :style="styleObj">{{name}}div> <br/><br/>
           
           {name}}