vue2.0+vue3.0资料（二）-阿里云开发者社区

8-3、computed计算属性

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
(1).计算属性最终会出现在vm上，直接读取使用即可。
(2).如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>姓名案例_计算属性基本实现</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   姓:<input type="text" v-model="firstName"/><br>
   名:<input type="text" v-model="lastName"/><br>
   全名:<span>{{fullName}}</span>
  </div>
 </body>
 <script type="text/javascript">
  const vm =new Vue({
   el:'#app',
   data:{
    firstName:'张',
    lastName:'三',
   },
   computed:{
    fullName:{
     //get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
     //get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
     get(){
      console.log('get被调用了')
      // console.log(this) //此处的this是vm
      return this.firstName + '-' + this.lastName
     },
     //set什么时候调用? 当fullName被修改时。
     set(value){
      console.log('set',value)
      const arr = value.split('-')
      this.firstName = arr[0]
      this.lastName = arr[1]
     }
    }
   }
  })
 </script>
</html>

8-4、计算属性简写

把computed里面的东西进行简写，确定只读取不修改(只有get没有set)

//完整写法
/* fullName:{
 get(){
  console.log('get被调用了')
  return this.firstName + '-' + this.lastName
 },
 set(value){
  console.log('set',value)
  const arr = value.split('-')
  this.firstName = arr[0]
  this.lastName = arr[1]
 }
} */
//简写   确定只读取不修改(只有get没有set)
fullName(){
 console.log('get被调用了')
 return this.firstName + '-' + this.lastName
}

9、监视属性

9-1、watch监视属性

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>天气案例_监视属性</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
  </div>
 </body>
 <script type="text/javascript">
  const vm = new Vue({
   el:'#app',
   data:{
    isHot:true,
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   /* watch:{
    isHot:{
     immediate:true, //初始化时让handler调用一下,默认为false
     //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>
</html>

9-2、深度监视属性

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>天气案例_深度监视</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
   <hr/>
   <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">
  const vm = new Vue({
   el:'#app',
   data:{
    isHot:true,
    numbers:{
     a:1,
     b:1,
     c:{
      d:{
       e:100
      }
     }
    }
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   watch:{
    isHot:{
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    },
    //监视多级结构中某个属性的变化
    /* 'numbers.a':{
     handler(){
      console.log('a被改变了')
     }
    } */
    //监视多级结构中所有属性的变化
    numbers:{
     deep:true,
     handler(){
      console.log('numbers改变了')
     }
    }
   }
  })
 </script>
</html>

9-3、监视属性简写

当配置项里面不需要immediate和deep时可以简写

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>天气案例_监视属性_简写</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <h2>今天天气很{{info}}</h2>
   <button @click="changeWeather">切换天气</button>
  </div>
 </body>
 <script type="text/javascript">
  const vm = new Vue({
   el:'#app',
   data:{
    isHot:true,
   },
   computed:{
    info(){
     return this.isHot ? '炎热' : '凉爽'
    }
   },
   methods: {
    changeWeather(){
     this.isHot = !this.isHot
    }
   },
   watch:{
    //完整写法
    /* isHot:{
     // immediate:true, //初始化时让handler调用一下
     // deep:true,//深度监视
     handler(newValue,oldValue){
      console.log('isHot被修改了',newValue,oldValue)
     }
    }, */
    //简写
    isHot(newValue,oldValue){
     console.log('isHot被修改了',newValue,oldValue,this)
    }
   }
  })
  //完整写法
  /* vm.$watch('isHot',{
   deep:true,//深度监视
   handler(newValue,oldValue){
    console.log('isHot被修改了',newValue,oldValue)
   }
  }) */
  //简写，这里的this指的是window
  /* vm.$watch('isHot',(newValue,oldValue)=>{
   console.log('isHot被修改了',newValue,oldValue,this)
  }) */
 </script>
</html>

9-4、computed与watch比较

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>姓名案例_watch实现</title>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   姓：<input type="text" v-model="firstName"> <br/><br/>
   名：<input type="text" v-model="lastName"> <br/><br/>
   全名：<span>{{fullName}}</span> <br/><br/>
  </div>
 </body>
 <script type="text/javascript">
  const vm = new Vue({
   el:'#app',
   data:{
    firstName:'张',
    lastName:'三',
    fullName:'张-三'
   },
   watch:{
    /* firstName(val){
      this.fullName = val + '-' + this.lastName
     }
    }, */
    firstName(val){
     setTimeout(()=>{
      console.log(this)
      this.fullName = val + '-' + this.lastName
     },1000);
    },
    lastName(val){
     this.fullName = this.firstName + '-' + val
    }
   }
  })
 </script>
</html>

10、绑定样式

10-1、style与class样式

1. class样式

写法:class="xxx" xxx可以是字符串、对象、数组。

字符串写法适用于：类名不确定，要动态获取。

对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式

:style="{fontSize: xxx}"其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象(key)，且样式对象必须是存在的。

案例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>绑定样式</title>
  <style>
   .basic{
    width: 400px;
    height: 100px;
    border: 1px solid black;
   }
   .happy{
    border: 4px solid red;;
    background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg,yellow,pink,orange,yellow);
   }
   .sad{
    border: 4px dashed rgb(2, 197, 2);
    background-color: gray;
   }
   .normal{
    background-color: skyblue;
   }
   .a1{
    background-color: yellowgreen;
   }
   .a2{
    font-size: 30px;
    text-shadow:2px 2px 10px red;
   }
   .a3{
    border-radius: 20px;
   }
  </style>
  <script type="text/javascript" src="Vue/js/vue.js"></script>
 </head>
 <body>
  <div id="app">
   <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br/><br/>
   <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
   <div class="basic" :class="classArr">{{name}}</div> <br/><br/>
   <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
   <div class="basic" :class="classObj">{{name}}</div> <br/><br/>
   <!-- 绑定style样式--对象写法 -->
   <div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
   <!-- 绑定style样式--数组写法 -->
   <div class="basic" :style="styleArr">{{name}}</div>
  </div>
 </body>
 <script type="text/javascript"> 
  const vm = new Vue({
   el:'#app',
   data:{
    name:'111',
    mood:'normal',
    classArr:['a1','a2','a3'],
    classObj:{
     a1:false,
     a2:false,
    },
    styleObj:{
     fontSize: '40px',
     color:'red',
    },
    styleObj2:{
     backgroundColor:'orange'
    },
    styleArr:[
     {
      fontSize: '40px',
      color:'blue',
     },
     {
      backgroundColor:'gray'
     }
    ]
   },
   methods: {
    changeMood(){
     const arr = ['happy','sad','normal']
     const index = Math.floor(Math.random()*3)
     this.mood = arr[index]
    }
   },
  })
 </script>
</html>

11、条件渲染

11-1、隐藏div的方法：

1、div的visibility控制div的隐藏和显示

style="visibility: none;"

2、设置display属性可以是div隐藏后释放占用的页面空间

style="display: none;"

3、opacity设置元素透明度为0

style="opacity:0;"

vue2.0+vue3.0资料（二）