watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 侦听器本质上是一个函数，将要侦听的数据作为方法名。
侦听器全都定义在watch节点之下。
侦听器格式：
方法格式：
缺点1：无法在刚进入页面时自动触发；
缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不糊触发侦听器
对象格式：
好处1：可以通过immediate选项让侦听器自动触发；
好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化
方法格式的侦听器：
<body>
<div id="app">
<input type="text" v-model='username'>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
username:''
},
//所有的侦听器都应该被定义在watch下
watch:{
//侦听器本质上时一个函数，要监听那个数据的变化，就把数据名作为方法名
//新值在前，旧值在后
username(newVal){
// console.log(newVal + '和' + oldVal);
//1.调用jQuery中的Ajax发起的请求，侦听username的值，判断newVal是否被占用
if(newVal === '') return
$.get('https://www.escook.cn/api/finduser/'+newVal,function(result){
console.log(result);
})
}
}
})
</script>
</body>
对象格式的侦听器
handler为侦听值发生变化时的处理函数。
默认情况下，组件在初次加载完毕后不会调用watch 侦听器。如果想让watch 侦听器立即被调用，则需要使用immediate选项。
immediate:true表示页面初次渲染好之后，就立即触发当前的watch侦听器。
watch:{
// 对象格式的侦听器
username:{
//侦听器的处理函数
handler(newVal,oldVal){
console.log(newVal,oldVal);
},
//immediate选项的默认值是false
//immediate的作用是控制侦听器是否自动触发一次
immediate:true
}
}
如果watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep 选项。
<body>
<div id="app">
<input type="text" v-model='info.username'>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
//用户的信息对象
info:{
username:'admin'
}
},
watch:{
info:{
handler(newVal){
console.log(newVal);
},
//开启深度侦听，只要对象中任何一个属性变化了，都会触发对象的侦听器
//deep的默认值为false
deep:true
}
}
})
</script>
</body>
监听对象单个属性的变化
watch:{
//如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
'info.username'(newVal){
console.log(newVal);
}
}
计算属性
计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods 方法使用。
计算属性写在computed节点之下。
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
// 蓝色
b: 0
},
methods: {
// 点击按钮，在终端显示最新的颜色
show() {
console.log(rgb)
}
},
//所有的计算属性都要定义到computed之下
//计算属性定义时要定义为方法格式
computed:{
rgb:function(){
return `rgb(${this.r},${this.g},${this.b})`
}
}
});
</script>
计算属性的特点：
1.虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
2.计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
好处：
实现了代码复用。
axios
axios是一个专注于网络请求的库。
基础语法：
axios的返回结果是promise，可以使用then
发起get请求：
```
axios({
methods:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
//GET URL中的查询参数
params:{
id:1
},
}).then(function(result){
console.log(result);
})
```
发起法post请求
axios({
methods:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
//POST 请求体参数
data:{
name:'zhangsan',
age:20
}
}).then(function(result){
console.log(result);
})
结合async和await调用axios
<body>
<button id='btnPost'>发起get请求</button>
<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPost').addEventListener('click',async function(){
//await方法只能用在被async修饰的方法中
//1.调用axios之后，使用async/await进行简化
//2.使用解构赋值，从axios封装的大对象中，把data属性解构出来
//3.把解构出来的data属性使用：进行重命名{ data:res }
const {data:res}= await axios({
methods:'GET',
url:'http://www.liulongbin.top:3006/api/getbooks',
//GET URL中的查询参数
params:{
id:1
},
//POST 请求体参数
data:{}
})
console.log(res.data); //只需要获取结果中的data数据
})
</script>
</body>
可以在main.js文件中为axios创建为vue实例的原型属性，则在其他组件中不用再导入axios就可以使用axios。
//导入axios
import axios from 'axios'
//将axios作为vue组件原型的一个属性（起名为$http）
Vue.prototype.$http = axios
在组件中使用this.$http即可代表axios，后面可以跟axios的get，post等方法进行使用。
async getInfo () {
const { data: res } = await this.$http.get('http://www.liulongbin.top:3006/api/get')
console.log(res)
}
在main.js中进行全局默认配置根路径
import axios from 'axios'
// 全局默认配置axios的请求根路径
// axios.defaults.baseURL='请求根路径'
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 把axios挂载到Vue.prototype上，供每个.vue组件的实例直接使用
Vue.prototype.$http = axios
在组件中进行使用时根路径就可以直接省略。
async getInfo () {
const { data: res } = await this.$http.get('/api/get')
console.log(res)
}
将axios挂载到vue原型的缺点是不利于API接口的复用。
