一、watch：监视单个属性，可做简单监视和深度监视。根据数据的具体结构，决定是否采用深度监视。配置deep:true可以监测对象内部值的改变，做深度监视时使用。
1、简单监视：监视单个属性值的改变。
<div id="app">
<input type="text" name="" v-model='msg'>
<h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="vue/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'',
}
},
watch:{
msg:function(newV, oldV){
console.log(newV,oldV);
if(newV === 'xxx'){
console.log('xxx出来了')
}
},
}
});
</script>
2、深度监视：监听复杂数据类型 object、array，可监听到对象或者数组内部值的改变。
开启深度监视： deep: true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='stus[0].name = "rose"'>改变</button>
<h3>{{stus[0].name}}</h3>
</div>
<script type="text/javascript" src="vue/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'',
stus:[{name:'jack'}]
}
},
watch:{
// 监听复杂数据类型 object array 深度监视
stus:{
deep:true, //深度监视
handler:function(newV, oldV){
console.log(newV[0].name);
}
}
}
});
</script>
</body>
</html>
二、computed 计算属性：可监视多个数据的改动。computed 用于动态的根据某个值或某些值的变化,来产生对应的变化。computed具有缓存性,具有缓存功能，只要里面的数据不发生改变，就不会重新计算。
1、computed 默认只有 get 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
ul li{
margin: 20px 20px;
padding: 10px 5px;
border-radius: 3px;
}
ul li.active{
background-color: #66FFFF;
}
</style>
</head>
<body>
<div id="app">
<audio :src='getCurrentSongSrc' autoplay controls></audio>
<ul>
<li v-for = '(item,index) in musicData' :class='{active:currentIndex==index}' @click='clickHandler(index)'>
<h2>{{item.id}}-歌名-{{item.name}}</h2>
<p>歌手：{{item.author}}</p>
</li>
</ul>
</div>
<script type="text/javascript" src="vue/vue.js"></script>
<script type="text/javascript">
var musicData = [
{id:1,name:'于荣光 - 少林英雄',author:'于荣光',songSrc:'./static/于荣光 - 少林英雄.mp3'},
{id:2,name:'Joel Adams - Please Dont Go',author:'Joel Adams',songSrc:'./static/Joel Adams - Please Dont Go.mp3'},
{id:3,name:'MKJ - Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'},
{id:4,name:'Russ - Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}
];
new Vue({
el:"#app",
data(){
return{
musicData:musicData,
currentIndex:0
}
},
computed:{
getCurrentSongSrc:function() {
// 默认只有getter
return this.musicData[this.currentIndex].songSrc
}
},
methods:{
clickHandler(index){
this.currentIndex = index;
}
}
});
</script>
</body>
</html>
2、computed 的set方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
ul li{
margin: 20px 20px;
padding: 10px 5px;
border-radius: 3px;
}
ul li.active{
background-color: #66FFFF;
}
</style>
</head>
<body>
<div id="app">
<audio :src='getCurrentSongSrc' autoplay controls></audio>
<ul>
<li v-for = '(item,index) in musicData' :class='{active:currentIndex==index}' @click='clickHandler(index)'>
<h2>{{item.id}}-歌名-{{item.name}}</h2>
<p>歌手：{{item.author}}</p>
</li>
</ul>
</div>
<script type="text/javascript" src="vue/vue.js"></script>
<script type="text/javascript">
var musicData = [
{id:1,name:'于荣光 - 少林英雄',author:'于荣光',songSrc:'./static/于荣光 - 少林英雄.mp3'},
{id:2,name:'Joel Adams - Please Dont Go',author:'Joel Adams',songSrc:'./static/Joel Adams - Please Dont Go.mp3'},
{id:3,name:'MKJ - Time',author:'MKJ',songSrc:'./static/MKJ - Time.mp3'},
{id:4,name:'Russ - Psycho (Pt. 2)',author:'Russ',songSrc:'./static/Russ - Psycho (Pt. 2).mp3'}
];
new Vue({
el:"#app",
data(){
return{
musicData:musicData,
currentIndex:0
}
},
computed:{
/*getCurrentSongSrc:function() {
// 默认只有getter
return this.musicData[this.currentIndex].songSrc
}*/
getCurrentSongSrc:{
set:function(newV){
this.currentIndex = newV;
},
get:function(oldV){
return this.musicData[this.currentIndex].songSrc
}
}
},
methods:{
clickHandler(index){
// 相当于设置值，只走set方法
this.getCurrentSongSrc = index;
}
}
});
</script>
</body>
</html>
标签：musicData,Vue,computed,author,songSrc,监听器,id,name From： https://www.cnblogs.com/sfwu/p/16899368.html