Vue的watch屬性
Vue的watch屬性可以用來監(jiān)聽data屬性中數(shù)據(jù)的變化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstname:"",
lastname:""
},
methods:{},
watch:{
firstname:function(){
console.log(this.firstname)
}
}
})
</script>
</body>
</html>
可以從上述代碼中實(shí)踐得知，輸入框內(nèi)的值變化多少次闰渔，控制臺就會(huì)打印多少次
同時(shí)還可以直接在監(jiān)聽的function中使用參數(shù)來獲取新值與舊值
watch:{
firstname:function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}
其中第一個(gè)參數(shù)是新值暮现，第二個(gè)參數(shù)是舊值
同時(shí)Watch還可以被用來監(jiān)聽路由router的變化还绘，只是這里的監(jiān)聽的元素是固定的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<!--
由于Vue-router的hash匹配原則所以我們需要在原定義的路徑上加一個(gè)#號
-->
<!-- <a href="#/login">登錄</a>
<a href="#/register">注冊</a>-->
<router-link to="/login" tag="span">登錄</router-link>
<router-link to="/register">注冊</router-link>
<router-view></router-view>
</div>
</body>
<script>
var login={
template:'<h1>登錄組件</h1>'
}
var register={
template:'<h1>注冊組件</h1>'
}
var routerObj = new VueRouter({
routes:[
//此處的component只能使用組件對象，而不能使用注冊的模板的名稱
{path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:routerObj,//將路由規(guī)則對象注冊到VM實(shí)例上
watch:{
'$route.path':function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}
})
</script>
</html>
計(jì)算屬性Computed的作用
computed屬性的作用與watch類似栖袋，也可以監(jiān)聽屬性的變化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="lib/vue.min.js"></script>
<script src="lib/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname" />
<input type="text" v-model="lastname" />
<input type="text" v-model="fullname" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstname:"",
lastname:""
},
methods:{},
/* watch:{
firstname:function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}*/
computed:{
fullname:function(){
return this.firstname +"-"+this.lastname
}
}
})
</script>
</body>
</html>
只是他會(huì)根據(jù)他依賴的屬性拍顷，生成一個(gè)屬性，讓vm對象可以使用這個(gè)屬性
methods,watch,computed的區(qū)別
-
computed屬性的結(jié)果會(huì)被緩存塘幅，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算昔案。主要當(dāng)作屬性來使用； -
methods方法表示一個(gè)具體的操作电媳，主要書寫業(yè)務(wù)邏輯踏揣； -
watch一個(gè)對象，鍵是需要觀察的表達(dá)式匾乓，值是對應(yīng)回調(diào)函數(shù)捞稿。主要用來監(jiān)聽某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作；可以看作是computed和methods的結(jié)合體娱局；
