一、前言
本文主要涉及： 1、watch()监听单个属性
二、主要内容
1、watch()监听器（监听单一数据）
（1）监听简单的数据类型
new Vue({
el:'#app',
data(){
return {
msg:''
}
},
watch:{
//第一个参数为新数据，第二个参数为老数据
msg:function(newV，oldV ){
console.log(newV,oldV)
}
}
})
（2）对于复杂的数据类型（数组，对象）不能用上面的来监听
<body>
<div id="app">
<input type="" name="" v-model='msg'>
<h4>{{stu[0].name}}</h4>
</div> <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el:'#app',
data(){
return {
msg:'',
stu:[{ name: 'jack'}] }
},
watch:{
//第一个参数为新数据，第二个参数为老数据
msg:function(newV,oldV){
console.log(newV,oldV)
}, stu:{
deep:true,
hander:function(newV, oldV){
console.log(newV[0].name) }
}
}
}) </script>
</body>
2、computed计算属性（可以监听多个属性）
（1）计算属性：在computed中定义计算属性的方法，在页面中用{{方法名}}来使用计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视</title>
</head>
<body>
<div id="demo">
姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br> 姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br> </div>
<script type="text/javascript" src="./vue.js"></script>
<script>
new Vue({
el:"#demo",
data:{
firstName: 'A',
lastName: 'B',
//fullName1:'A B'
},
computed:{
//fullName1的值是由前两个属性共同计算得到的
fullName1(){
return this.firstName +" "+this.lastName
}
}
})
</script>
</body>
</html>
计算属性使用(1).html
/*computed计算属性*/
computed:{
//fullName1的值是由前两个属性共同计算得到的
fullName1(){
return this.firstName +" "+this.lastName
}
},
实现效果（单向改变）：
（2）监视属性：通过vm对象的$watch()方法或者watch配置来监听指定的属性，当属性变化时，回调函数自动调用，在函数内部进行计算
a:配置监视
//配置监视
watch:{
firstName:function(newvalue, oldvalue){
this.fullName1 = newvalue + " " + this.lastName
} }
b:实例方法监视，vue实例中有一个$watch()方法来用于监听
//方法监视
vm.$watch('lastName',function(value){
this.fullName1 = this.firstName + value
})
结合watch和$watch()也能实现同样的效果
（3）计算属性的高级
a : 通过计算属性get/set实现对属性数据 的显示和监视（双向监听），每个属性都有一个get()和set()方法，下面在computed中给fullName1属性设置set和get方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03_计算属性和监视</title>
</head>
<body>
<div id="demo">
姓：<input type="text" name="" placeholder="First Name" v-model="firstName"><br>
名：<input type="text" name="" placeholder="Last Name" v-model="lastName"><br> 姓名1：<input type="text" name="" placeholder="Last Name" v-model="fullName1"><br> </div>
<script type="text/javascript" src="./vue.js"></script>
<script>
const vm = new Vue({
el:"#demo",
data:{
firstName: 'A',
lastName: 'B' },
computed:{
fullName1:{
//当获取当前属性值的时候自动调用
get(){
return this.firstName + " " +this.lastName
},
//当属性值发生改变的时候监听属性值变化，
set(value){//value就是fullName1的最新属性值
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
})
</script>
</body>
</html>
效果：
b:计算属性存在缓存，当多次调用getter的时候，只执行一次，当执行第一次的时候就将数据存在缓存里面。
3、计算属性实现音乐列表
下面用一个例子来简单说明
点击列表，切换播放的音乐（这个例子不用计算属性也可实现，用了稍微有点绕，这里只是用他来说明计算属性是如何监听多个属性的）
不用计算属性的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0; } ul li{
height: 100px;
background-color: blue;
padding: 20px;
margin: 10px;
border-radius: 5px;
} ul li.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div>
<audio :src="musicList[this.currentIndex].musicSrc" controls autoplay></audio>
<ul>
<li v-for="(item, index) in musicList" v-on:click='changeMusic(index)'>
<h4>{{item.music}}</h4>
<h6>{{item.musicSrc}}</h6>
<h1>{{index}}</h1> </li> </ul>
</div>
</div> <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var musicList = [
{id:0, music:'Jeol Adams - Please Dont GO.mp3',author:'Jeol', musicSrc:'./static/Joel Adams - Please Dont Go.mp3'},
{id:1, music:'MKJ - Time.mp3',author:'MKJ', musicSrc:'./static/MKJ - Time.mp3'},
{id:2, music:'Russ - Psycho (Pt. 2).mp3',author:'Russ', musicSrc:'./static/Russ - Psycho (Pt. 2).mp3'},
{id:3,music:'于荣光 - 少林英雄.mp3',author:'于荣光', musicSrc:'./static/于荣光 - 少林英雄.mp3'} ] var vm = new Vue({ el:"#app",
data(){
return{
musicList:musicList,
currentIndex:0 }
}, methods:{
changeMusic: function(index){
console.log(index)
return this.currentIndex=index;
} } }) console.log(vm)
</script>
</body>
</html>
不用计算属性实现音乐列表.html
使用计算属性实现音乐列表：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0; } ul li{
height: 100px;
background-color: blue;
padding: 20px;
margin: 10px;
border-radius: 5px;
} ul li.active {
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<div>
<audio :src="getCurrentSongSrc" controls autoplay></audio>
<ul>
<li v-for="(item, index) in musicList" @click="changeMusic(index)">
<h4>{{item.music}}</h4>
<h6>{{item.musicSrc}}</h6> </li> </ul>
</div>
</div> <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var musicList = [
{music:'Jeol Adams - Please Dont GO.mp3',author:'Jeol', musicSrc:'./static/Joel Adams - Please Dont Go.mp3'},
{music:'MKJ - Time.mp3',author:'MKJ', musicSrc:'./static/MKJ - Time.mp3'},
{music:'Russ - Psycho (Pt. 2).mp3',author:'Russ', musicSrc:'./static/Russ - Psycho (Pt. 2).mp3'},
{music:'于荣光 - 少林英雄.mp3',author:'于荣光', musicSrc:'./static/于荣光 - 少林英雄.mp3'} ] new Vue({ el:"#app",
data(){
return{
musicList:musicList,
currentIndex:0 }
},
template:'',
computed:{ // musicList[this.currentIndex].musicSrc
getCurrentSongSrc: function(){
return this.musicList[this.currentIndex].musicSrc;
} },
methods:{
changeMusic(index){
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
使用计算属性实现音乐列表.html
具体实现：
三、总结
1、点击li标签获取当前li标签的索引：
<ul>
<li v-for="(item, index) in musicList" @click="changeMusic(index)"> </li>
</ul>
methods:{
clickHandler(index){
this.currentIndex = index;
}
}