前言
記錄平時(shí)學(xué)到的知識(shí)村象，標(biāo)題寫的大氣一點(diǎn)笆环，也算是給自己一點(diǎn)鼓勵(lì)，希望在技術(shù)這條路可以遠(yuǎn)走越遠(yuǎn)厚者，路越走越寬~
PS：如果對(duì)你有一點(diǎn)幫助躁劣，請(qǐng)順手給個(gè)小星星哦，鼓勵(lì)我繼續(xù)寫下去~
引入的文件文件說(shuō)明
vue.js——開(kāi)發(fā)版本：包含完整的警告和調(diào)試模式
vue.min.js——生產(chǎn)版本：刪除了警告库菲，進(jìn)行了壓縮
1. propsData Option 全局?jǐn)U展的數(shù)據(jù)傳遞
propsData在實(shí)際開(kāi)發(fā)中使用的并不多习绢，用在全局?jǐn)U展時(shí)進(jìn)行傳遞數(shù)據(jù)，主要搭配Vue.extend使用蝙昙。
在實(shí)際的項(xiàng)目中，使用全局?jǐn)U展的方式制作自定義標(biāo)簽比較少用梧却，完全可以使用組件來(lái)替代奇颠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>propsData Option</title>
</head>
<body>
<h1>propsData Option</h1>
<hr>
<div id="app"></div>
<script type="text/javascript">
var header_a = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello,I am Header'
}
}
});
new header_a().$mount('#app');
</script>
</body>
</html>
擴(kuò)展標(biāo)簽已經(jīng)做好了，這時(shí)要在掛載時(shí)傳遞數(shù)據(jù)放航，就用到了propsData烈拒。
使用用propsData三步解決傳值：
- 在全局?jǐn)U展里加入props進(jìn)行接收;
- 傳遞時(shí)用propsData進(jìn)行傳遞;
- 用插值的形式寫入模板;
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>propsData Option</title>
</head>
<body>
<h1>propsData Option</h1>
<hr>
<div id="app"></div>
<script type="text/javascript">
var header_a = Vue.extend({
template:`<p>{{message}}-{{a}}</p>`,
data:function(){
return {
message:'Hello,I am Header'
}
},
props:['a']
});
new header_a({propsData:{a:1}}).$mount('header');
</script>
</body>
</html>
2.computed Option 計(jì)算選項(xiàng)
computed計(jì)算屬性的主要作用是在數(shù)據(jù)渲染之前，根據(jù)實(shí)際需求對(duì)數(shù)據(jù)進(jìn)行處理，比如：大小寫轉(zhuǎn)換荆几，順序重排吓妆，添加符號(hào)……。為了不污染data中定義的數(shù)據(jù)源吨铸，在computed里需要新聲明一個(gè)對(duì)象保存處理之后的數(shù)據(jù)行拢。
computed計(jì)算屬性的所有g(shù)etter和setter的this上下文自動(dòng)地綁定為 Vue 實(shí)例。注意如果你為一個(gè)計(jì)算屬性使用了箭頭函數(shù)诞吱，則 this 不會(huì)指向這個(gè)組件的實(shí)例舟奠，不過(guò)你仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來(lái)訪問(wèn)。
computed: {
aDouble: vm => vm.a * 2
}
計(jì)算屬性的結(jié)果會(huì)被緩存房维，除非依賴的響應(yīng)式屬性變化才會(huì)重新計(jì)算沼瘫。注意，如果某個(gè)依賴 (比如非響應(yīng)式屬性) 在該實(shí)例范疇之外咙俩，則計(jì)算屬性是不會(huì)被更新的耿戚。
用計(jì)算屬性反轉(zhuǎn)新聞數(shù)據(jù)數(shù)組，讓最近發(fā)生的新聞放在前面顯示阿趁，demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>computed 計(jì)算選項(xiàng)</title>
</head>
<body>
<h1>computed 計(jì)算選項(xiàng)</h1>
<hr>
<div id="app">
{{newPrice}}
<br>
<br>
<ul>
<li v-for="item in reverseNews">{{item.title}} - {{item.date}}</li>
</ul>
</div>
<script type="text/javascript">
var newsList = [
{title:'香港或就“裝甲車被扣”事件追責(zé) 起訴涉事運(yùn)輸公司',date:'2017/3/10'},
{title:'日本第二大準(zhǔn)航母服役 外媒：針對(duì)中國(guó)潛艇',date:'2017/3/12'},
{title:'中國(guó)北方將有明顯雨雪降溫天氣 南方陰雨持續(xù)',date:'2017/3/13'},
{title:'起底“最短命副市長(zhǎng)”：不到40天落馬膜蛔，全家被查',date:'2017/3/23'},
];
var app=new Vue({
el:'#app',
data:{
price:100,
newsList: newsList
},
computed:{
newPrice:function(){
return this.price='￥' + this.price + '元';
},
reverseNews:function(){
return this.newsList.reverse();
}
}
})
</script>
</body>
</html>
computed 計(jì)算屬性是非常有用并且在實(shí)際的項(xiàng)目開(kāi)發(fā)中經(jīng)常使用，它在輸出數(shù)據(jù)前可以根據(jù)實(shí)際項(xiàng)目需求對(duì)數(shù)據(jù)進(jìn)行處理歌焦，改變數(shù)據(jù)飞几。
3. methods Option 方法選項(xiàng)
在Vue中，可以使用v-on給元素綁定事件独撇，在methods選項(xiàng)中處理一些邏輯方面的事情屑墨。在Vue中的邏輯處理，一般都在Vue的methods選項(xiàng)中來(lái)處理纷铣，那是因?yàn)楹芏嗍录幚磉壿嫶a都很復(fù)雜卵史，如果直接把JavaScript代碼寫在v-on指令中有時(shí)并不可行，所以在methods中定義方法搜立，讓v-on指令來(lái)接收（調(diào)用）以躯。
一個(gè)數(shù)字，每點(diǎn)擊一下按鈕加2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{ a }}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
a:1
},
methods:{
add () {
this.a++
}
}
})
</script>
</body>
</html>
methods中參數(shù)的傳遞：
使用方法和正常的javascript傳遞參數(shù)的方法一樣啄踊，分為兩步：
- 在methods的方法中進(jìn)行聲明忧设，比如給add方法傳入一個(gè)num參數(shù)，就要寫出add (num){...};
- 調(diào)用方法時(shí)直接傳遞颠通，比如要傳遞2這個(gè)參數(shù)址晕，在button上就直接可以寫。
<button @click=”add(2)”></button>;
給add添加num參數(shù)顿锰，并在按鈕上調(diào)用傳遞：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{ a }}
<p><button @click="add(2)">add</button></p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
a:1
},
methods:{
add (num) {
this.a += num
}
}
})
</script>
</body>
</html>
這時(shí)谨垃，再點(diǎn)擊按鈕時(shí)結(jié)果每次加2启搂。
methods中的$event參數(shù)：
傳遞的$event參數(shù)都是關(guān)于你點(diǎn)擊鼠標(biāo)的一些事件和屬性。傳遞方法：
<button @click=”add(2,$event)”>add</button> 刘陶。
這時(shí)候可以打印一下胳赌，看看event到底是個(gè)怎樣的對(duì)象。你會(huì)發(fā)現(xiàn)匙隔，它包含了大部分鼠標(biāo)事件的屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{ a }}
<p><button @click="add(2,'每次加2', $event)">add</button></p>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
a:1
},
methods:{
add (num, msg, event) {
console.log('num==>', num)
console.log('msg==>', msg)
console.log('event==>', event)
this.a += num
}
}
})
</script>
</body>
native 給組件綁定構(gòu)造器里的原生事件：
在實(shí)際開(kāi)發(fā)中經(jīng)常需要把某個(gè)按鈕封裝成組件疑苫，然后反復(fù)使用，如何讓組件調(diào)用構(gòu)造器里的方法牡直，而不是組件里的方法缀匕。就需要用到.native修飾器了。
把我們的add按鈕封裝成組件碰逸，聲明btn對(duì)象：
var btn={
template:`<button>組件Add</button>`
}
在構(gòu)造器里注冊(cè)組件：
components:{
"btn":btn
}
用.native修飾器來(lái)調(diào)用構(gòu)造器里的add方法：
<p><btn @click.native="add(3)"></btn></p>
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{a}}
<p><button @click="add(2, '每次加2', $event)">add</button></p>
<p><btn @click.native="add(3, '每次加3', $event)"></btn></p>
</div>
<script type="text/javascript">
var btn={
template:'<button>外部組件</button>'
}
var app=new Vue({
el:'#app',
data:{
a:1
},
methods:{
add (num, msg, event) {
console.log('num==>', num)
console.log('msg==>', msg)
console.log('event==>', event)
this.a += num
}
},
components:{
"btn":btn
}
})
</script>
</body>
</html>
作用域外部調(diào)用構(gòu)造器里的方法：
這種不經(jīng)常使用乡小，如果你出現(xiàn)了這種情況，說(shuō)明你的代碼組織不夠好饵史。
<button onclick="app.add(4)" >外部調(diào)用構(gòu)造器里的方法</button>
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>methods Option</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>methods Option</h1>
<hr>
<div id="app">
{{a}}
<p><button @click="add(2, '每次加2', $event)">add</button></p>
<p><btn @click.native="add(3, '每次加3', $event)"></btn></p>
</div>
<button onclick="app.add(4, '每次加4')">外部訪問(wèn)構(gòu)造器里的方法</button>
<script type="text/javascript">
var btn={
template:'<button>外部組件</button>'
}
var app=new Vue({
el:'#app',
data:{
a:1
},
methods:{
add (num, msg, event) {
console.log('num==>', num)
console.log('msg==>', msg)
console.log('event==>', event)
this.a += num
}
},
components:{
"btn":btn
}
})
</script>
</body>
</html>
4. Watch 選項(xiàng) 監(jiān)控?cái)?shù)據(jù)
使用watch選項(xiàng)來(lái)監(jiān)控?cái)?shù)據(jù)的變化满钟。watch選項(xiàng)對(duì)應(yīng)一個(gè)對(duì)象，鍵是觀察表達(dá)式胳喷，值是對(duì)應(yīng)回調(diào)湃番。值也可以是方法名，或者是對(duì)象吭露，包含選項(xiàng)吠撮。在實(shí)例化時(shí)為每個(gè)鍵調(diào)用 $watch() 。
天氣預(yù)報(bào)的穿衣指數(shù)讲竿，它主要是根據(jù)溫度來(lái)進(jìn)行提示泥兰，溫度大于26度時(shí)，建議穿T恤短袖题禀，溫度小于26度大于0度時(shí)鞋诗，建議穿夾克長(zhǎng)裙，溫度小于0度時(shí)建議穿棉衣羽絨服：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch Option</title>
</head>
<body>
<h1>watch Option</h1>
<hr>
<div id="app">
<p>今日溫度：{{temperature}}°C</p>
<p>穿衣建議:{{suggestion}}</p>
<p>
<button @click="add">添加溫度</button>
<button @click="reduce">減少溫度</button>
</p>
</div>
<script type="text/javascript">
var suggestion=['T恤短袖','夾克長(zhǎng)裙','棉衣羽絨服'];
var app=new Vue({
el:'#app',
data:{
temperature:14,
suggestion:'夾克長(zhǎng)裙'
},
methods:{
add:function(){
this.temperature+=5;
},
reduce:function(){
this.temperature-=5;
}
},
watch:{
temperature (newVal,oldVal) {
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
}
}
})
</script>
</body>
</html>
handler方法和immediate屬性：
這里 watch 的一個(gè)特點(diǎn)是迈嘹，最初綁定的時(shí)候是不會(huì)執(zhí)行的削彬，要等到 temperature 改變時(shí)才執(zhí)行監(jiān)聽(tīng)計(jì)算。那我們想要一開(kāi)始就讓它最初綁定的時(shí)候就執(zhí)行改怎么辦呢秀仲？我們需要修改一下我們的 watch 寫法融痛，修改過(guò)后的 watch 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch Option</title>
</head>
<body>
<h1>watch Option</h1>
<hr>
<div id="app">
<p>今日溫度：{{temperature}}°C</p>
<p>穿衣建議:{{suggestion}}</p>
<p>
<button @click="add">添加溫度</button>
<button @click="reduce">減少溫度</button>
</p>
</div>
<script type="text/javascript">
var suggestion=['T恤短袖','夾克長(zhǎng)裙','棉衣羽絨服'];
var app=new Vue({
el:'#app',
data:{
temperature:14,
suggestion:'T恤短袖'
},
methods:{
add:function(){
this.temperature+=5;
},
reduce:function(){
this.temperature-=5;
}
},
watch:{
temperature: {
handler (newVal,oldVal) {
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
},
// 代表在wacth里聲明了temperature這個(gè)方法之后立即先去執(zhí)行handler方法
immediate: true
}
}
})
</script>
</body>
</html>
注意到handler了嗎，我們給 temperature 綁定了一個(gè)handler方法神僵，之前我們寫的 watch 方法其實(shí)默認(rèn)寫的就是這個(gè)handler雁刷，Vue.js會(huì)去處理這個(gè)邏輯，最終編譯出來(lái)其實(shí)就是這個(gè)handler挑豌。
而immediate:true代表如果在 wacth 里聲明了 temperature 之后安券，就會(huì)立即先去執(zhí)行里面的handler方法，如果為 false就跟我們以前的效果一樣氓英，不會(huì)在綁定的時(shí)候就執(zhí)行侯勉。
在上面的事例中把suggestion的初始數(shù)據(jù)設(shè)置為'T恤短袖'，而初始溫度是14°C铝阐，這時(shí)如果沒(méi)有讓watch在最初綁定的時(shí)候就執(zhí)行址貌，那么推薦的穿衣就有問(wèn)題，因?yàn)?4°C原本是推薦穿'夾克長(zhǎng)裙'的徘键，通過(guò)讓watch在最初綁定的時(shí)候就執(zhí)行完美解決了這個(gè)問(wèn)題练对。
deep屬性：
watch 里面還有一個(gè)屬性 deep，默認(rèn)值是 false吹害，代表是否深度監(jiān)聽(tīng)螟凭，比如我們 data 里有一個(gè)obj屬性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch Option</title>
</head>
<body>
<h1>watch Option</h1>
<hr>
<div id="app">
<p>今日溫度：{{obj.temperature}}°C</p>
<p>穿衣建議:{{obj.suggestion}}</p>
<p>
<button @click="add">添加溫度</button>
<button @click="reduce">減少溫度</button>
</p>
</div>
<script type="text/javascript">
var suggestion=['T恤短袖','夾克長(zhǎng)裙','棉衣羽絨服'];
var app=new Vue({
el:'#app',
data: {
obj: {
temperature: 14,
suggestion:'T恤短袖'
}
},
methods:{
add:function(){
this.obj.temperature+=5;
},
reduce:function(){
this.obj.temperature-=5;
}
},
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj.a changed', newVal.temperature)
if(newVal.temperature>=26){
this.obj.suggestion=suggestion[0];
}else if(newVal.temperature<26 && newVal.temperature >=0)
{
this.obj.suggestion=suggestion[1];
}else{
this.obj.suggestion=suggestion[2];
}
console.log('obj.a 2', newVal.suggestion)
},
immediate: true
}
}
})
</script>
</body>
</html>
當(dāng)我們?cè)邳c(diǎn)擊添加溫度和減少溫度按鈕改變obj.temperature的值時(shí)，發(fā)現(xiàn)是無(wú)效的它呀。受現(xiàn)代 JavaScript 的限制 (以及廢棄 Object.observe)螺男，Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程纵穿，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它下隧，這樣才能讓它是響應(yīng)的。
默認(rèn)情況下 handler 只監(jiān)聽(tīng)obj這個(gè)屬性它的引用的變化谓媒，我們只有給obj賦值的時(shí)候它才會(huì)監(jiān)聽(tīng)到淆院，比如我們?cè)?mounted事件鉤子函數(shù)中對(duì)obj進(jìn)行重新賦值：
mounted: {
this.obj = {
temperature: 40,
suggestion:'T恤短袖'
}
}
這樣我們的 handler 才會(huì)執(zhí)行。
如果需要監(jiān)聽(tīng)obj里的屬性temperature的值句惯，這時(shí)候deep屬性就派上用場(chǎng)了：
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj.a changed', newVal.temperature)
if(newVal.temperature>=26){
this.obj.suggestion=suggestion[0];
}else if(newVal.temperature<26 && newVal.temperature >=0)
{
this.obj.suggestion=suggestion[1];
}else{
this.obj.suggestion=suggestion[2];
}
console.log('obj.a 2', newVal.suggestion)
},
immediate: true,
deep: true
}
}
deep的意思就是深入觀察土辩，監(jiān)聽(tīng)器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽(tīng)器宗弯，但是這樣性能開(kāi)銷就會(huì)非常大了脯燃，任何修改obj里面任何一個(gè)屬性都會(huì)觸發(fā)這個(gè)監(jiān)聽(tīng)器里的 handler。
優(yōu)化蒙保，可以使用字符串形式監(jiān)聽(tīng)：
watch: {
'obj.temperature': {
handler(newVal, oldVal) {
console.log('obj.a changed', newVal)
if(newVal>=26){
this.obj.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.obj.suggestion=suggestion[1];
}else{
this.obj.suggestion=suggestion[2];
}
console.log('obj.a 2', this.obj.suggestion)
},
immediate: true,
deep: true
}
}
這樣Vue.js才會(huì)一層一層解析下去辕棚，直到遇到屬性temperature，然后才給temperature設(shè)置監(jiān)聽(tīng)函數(shù)邓厕。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch Option</title>
</head>
<body>
<h1>watch Option</h1>
<hr>
<div id="app">
<p>今日溫度：{{obj.temperature}}°C</p>
<p>穿衣建議:{{obj.suggestion}}</p>
<p>
<button @click="add">添加溫度</button>
<button @click="reduce">減少溫度</button>
</p>
</div>
<script type="text/javascript">
var suggestion=['T恤短袖','夾克長(zhǎng)裙','棉衣羽絨服'];
var app=new Vue({
el:'#app',
data: {
obj: {
temperature: 14,
suggestion:'T恤短袖'
}
},
methods:{
add:function(){
this.obj.temperature+=5;
},
reduce:function(){
this.obj.temperature-=5;
}
},
// watch: {
// obj: {
// handler(newVal, oldVal) {
// console.log('obj.a changed', newVal.temperature)
// if(newVal.temperature>=26){
// this.obj.suggestion=suggestion[0];
// }else if(newVal.temperature<26 && newVal.temperature >=0)
// {
// this.obj.suggestion=suggestion[1];
// }else{
// this.obj.suggestion=suggestion[2];
// }
// console.log('obj.a 2', newVal.suggestion)
// },
// immediate: true,
// deep: true
// }
// }
//優(yōu)化使用字符串形式監(jiān)聽(tīng)
watch: {
'obj.temperature': {
handler(newVal, oldVal) {
console.log('obj.a changed', newVal)
if(newVal>=26){
this.obj.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.obj.suggestion=suggestion[1];
}else{
this.obj.suggestion=suggestion[2];
}
console.log('obj.a 2', this.obj.suggestion)
},
immediate: true,
deep: true
}
}
})
</script>
</body>
</html>
用實(shí)例屬性寫watch監(jiān)控：
有些時(shí)候我們會(huì)用實(shí)例屬性的形式來(lái)寫watch監(jiān)控逝嚎。也就是把我們watch卸載構(gòu)造器的外部，這樣的好處就是降低我們程序的耦合度详恼，使程序變的靈活：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>watch Option</title>
</head>
<body>
<h1>watch Option</h1>
<hr>
<div id="app">
<p>今日溫度：{{temperature}}°C</p>
<p>穿衣建議:{{suggestion}}</p>
<p>
<button @click="add">添加溫度</button>
<button @click="reduce">減少溫度</button>
</p>
</div>
<script type="text/javascript">
var suggestion=['T恤短袖','夾克長(zhǎng)裙','棉衣羽絨服'];
var app=new Vue({
el:'#app',
data:{
temperature:14,
suggestion:'夾克長(zhǎng)裙'
},
methods:{
add:function(){
this.temperature+=5;
},
reduce:function(){
this.temperature-=5;
}
}
})
app.$watch('temperature',function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
})
</script>
</body>
</html>
注銷watch：
為什么要注銷 watch补君？因?yàn)槲覀兊慕M件是經(jīng)常要被銷毀的，比如我們跳一個(gè)路由昧互，從一個(gè)頁(yè)面跳到另外一個(gè)頁(yè)面挽铁，那么原來(lái)的頁(yè)面的 watch 其實(shí)就沒(méi)用了伟桅，這時(shí)候我們應(yīng)該注銷掉原來(lái)頁(yè)面的 watch 的，不然的話可能會(huì)導(dǎo)致內(nèi)置溢出叽掘。當(dāng)把 watch 寫在組件的選項(xiàng)中的楣铁，它會(huì)隨著組件的銷毀而銷毀。
但是更扁，如果我們使用上面的這樣的方式寫 watch：
app.$watch('temperature',function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
})
那么就要手動(dòng)注銷了盖腕，這種注銷其實(shí)也很簡(jiǎn)單:
var unwatch = app.$watch('temperature',function(newVal,oldVal){
if(newVal>=26){
this.suggestion=suggestion[0];
}else if(newVal<26 && newVal >=0)
{
this.suggestion=suggestion[1];
}else{
this.suggestion=suggestion[2];
}
})
unWatch(); // 手動(dòng)注銷watch
app.$watch調(diào)用后會(huì)返回一個(gè)值，就是unWatch方法浓镜，你要注銷 watch 只要調(diào)用unWatch方法就可以了溃列。
5. mixins 混入選項(xiàng)
混入 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式√叛Γ混入對(duì)象可以包含任意組件選項(xiàng)听隐。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)相叁。
mixins一般有兩種用途：
- 在你已經(jīng)寫好了構(gòu)造器后遵绰，需要增加方法或者臨時(shí)的活動(dòng)時(shí)使用的方法，這時(shí)用混入會(huì)減少源代碼的污染增淹。
- 很多地方都會(huì)用到的公用方法椿访，用混入的方法可以減少代碼量，實(shí)現(xiàn)代碼重用虑润。
現(xiàn)在有個(gè)數(shù)字點(diǎn)擊遞增的程序成玫，假設(shè)已經(jīng)完成了，這時(shí)希望每次數(shù)據(jù)變化時(shí)都能夠在控制臺(tái)打印出提示：“數(shù)據(jù)發(fā)生變化”：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num: {{ num }}</p>
<P><button @click="add">增加數(shù)量</button></P>
</div>
<script type="text/javascript">
//額外臨時(shí)加入拳喻，用于顯示日志
var addLog={
updated:function(){
console.log("數(shù)據(jù)放生變化,變化成"+this.num+".");
}
}
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add:function(){
this.num++;
}
},
//混入
mixins:[addLog]
})
</script>
</body>
</html>
選項(xiàng)合并：
當(dāng)組件和混入對(duì)象含有同名選項(xiàng)時(shí)哭当，這些選項(xiàng)將以恰當(dāng)?shù)姆绞交旌希喜⒁?guī)則：
- 值為對(duì)象的選項(xiàng)冗澈，例如數(shù)據(jù)對(duì)象data钦勘、方法對(duì)象methods、組件對(duì)象components和自定義指令對(duì)象directives亚亲，將被混合為同一個(gè)對(duì)象彻采。兩個(gè)對(duì)象鍵名沖突時(shí)，取組件對(duì)象的鍵值對(duì)捌归。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num: {{ num }}</p>
<P><button @click="add">增加數(shù)量</button></P>
</div>
<script type="text/javascript">
//額外臨時(shí)加入肛响，用于顯示日志
var addLog={
data: function () {
return {
message: 'hello',
foo: 'abc'
}
},
updated () {
console.log("數(shù)據(jù)放生變化,變化成"+this.num+".");
},
created () {
console.log('混入對(duì)象的鉤子被調(diào)用==>', this.$data)
}
}
var app=new Vue({
el:'#app',
data:{
num:1,
message: 'goodbye',
bar: 'def'
},
methods:{
add:function(){
this.num++;
}
},
created () {
console.log('實(shí)例鉤子被調(diào)用==>', this.$data)
},
//混入
mixins:[addLog]
})
</script>
</body>
</html>
打開(kāi)控制臺(tái)可以看到，混入的created鉤子函數(shù)和實(shí)例的created鉤子函數(shù)打印出的this.$data都為{bar: "def", foo: "abc", message: "goodbye", num: 1}惜索。
- 由1的例子可以看出特笋，同名鉤子函數(shù)將混合為一個(gè)數(shù)組，因此都將被調(diào)用巾兆。另外猎物，混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用虎囚。
mixins的調(diào)用順序：
從執(zhí)行的先后順序來(lái)說(shuō)，都是混入的先執(zhí)行蔫磨，然后構(gòu)造器里的再執(zhí)行溜宽，需要注意的是，這并不是方法的覆蓋质帅，而是被執(zhí)行了兩邊。
同名鉤子函數(shù)將混合為一個(gè)數(shù)組留攒，因此都將被調(diào)用煤惩。混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用炼邀。
全局API混入方式：
可以全局注冊(cè)混入對(duì)象魄揉。但應(yīng)注意使用！因?yàn)橐坏┦褂萌只烊雽?duì)象拭宁，將會(huì)影響到所有之后創(chuàng)建的 Vue 實(shí)例洛退。
定義全局的混入，然后在需要這段代碼的地方直接引入js杰标，就可以擁有這個(gè)功能了：
Vue.mixin({
updated:function(){
console.log('我是全局被混入的');
}
})
注意：全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法兵怯。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr>
<div id="app">
<p>num: {{ num }}</p>
<P><button @click="add">增加數(shù)量</button></P>
</div>
<script type="text/javascript">
//全局混入
Vue.mixin({
created () {
console.log('我是全局混入');
}
})
//額外臨時(shí)加入，用于顯示日志
var addLog={
data: function () {
return {
message: 'hello',
foo: 'abc'
}
},
updated () {
console.log("數(shù)據(jù)放生變化,變化成"+this.num+".");
},
created () {
console.log('混入對(duì)象的鉤子被調(diào)用==>', this.$data)
}
}
var app=new Vue({
el:'#app',
data:{
num:1,
message: 'goodbye',
bar: 'def'
},
methods:{
add:function(){
this.num++;
}
},
created () {
console.log('實(shí)例鉤子被調(diào)用==>', this.$data)
},
//混入
mixins:[addLog]
})
</script>
</body>
</html>
6. extends Option 擴(kuò)展選項(xiàng)
通過(guò)外部增加對(duì)象的形式腔剂，對(duì)構(gòu)造器進(jìn)行擴(kuò)展媒区。允許聲明擴(kuò)展另一個(gè)組件(可以是一個(gè)簡(jiǎn)單的選項(xiàng)對(duì)象或構(gòu)造函數(shù))，而無(wú)需使用 Vue.extend掸犬。這主要是為了便于擴(kuò)展單文件組件袜漩。和 mixins 類似。
選項(xiàng)合并：
當(dāng)組件和擴(kuò)展對(duì)象含有同名選項(xiàng)時(shí)湾碎，這些選項(xiàng)將以恰當(dāng)?shù)姆绞交旌现婀ィ喜⒁?guī)則：
- 值為對(duì)象的選項(xiàng)，例如數(shù)據(jù)對(duì)象data介褥、方法對(duì)象methods座掘、組件對(duì)象components和自定義指令對(duì)象directives，將被混合為同一個(gè)對(duì)象呻顽。兩個(gè)對(duì)象鍵名沖突時(shí)雹顺，取組件對(duì)象的鍵值對(duì)。
- 同名鉤子函數(shù)將混合為一個(gè)數(shù)組廊遍，因此都將被調(diào)用嬉愧。另外，擴(kuò)展對(duì)象的鉤子將在組件自身鉤子之前調(diào)用喉前。
完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Extends Optin</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Extends Optin Demo</h1>
<hr>
<div id="app">
{{message}}
<p><button @click="add">add</button></p>
</div>
<script type="text/javascript">
var bbb={
created () {
console.log("我是擴(kuò)展出來(lái)的鉤子函數(shù)");
},
methods:{
add () {
console.log('我是被擴(kuò)展出來(lái)的方法没酣！');
}
}
};
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
methods:{
add () {
console.log('我是原生方法');
}
},
created () {
console.log("我是原生的鉤子函數(shù)");
},
extends:bbb
})
</script>
</body>
</html>
打開(kāi)控制臺(tái)可以看到王财，擴(kuò)展出來(lái)的鉤子函數(shù)先執(zhí)行，然后是實(shí)例的鉤子函數(shù)裕便；點(diǎn)擊按鈕之后只有實(shí)例的方法被執(zhí)行绒净。
7. delimiters 選項(xiàng)
delimiters的作用是改變插值的符號(hào)。Vue默認(rèn)的插值是雙大括號(hào){{}}偿衰。但有時(shí)我們會(huì)有需求更改這個(gè)插值的形式挂疆。
比如后臺(tái)渲染模板如swig，也使用“{{ }}“作為渲染下翎，與前端vue的數(shù)據(jù)綁定“Mustache”語(yǔ)法 (雙大括號(hào))產(chǎn)生沖突缤言，此時(shí)只要在新建Vue對(duì)象時(shí)，添加delimiters: ['${', '}'],就搞定了视事。
現(xiàn)在插值形式就變成了${}胆萧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>delimiters Option</title>
</head>
<body>
<h1>delimiters Option</h1>
<hr>
<div id="app">
<ul>
<li v-for=" aa in arr">${aa}</li>
</ul>
</div>
<script type="text/javascript">
var outData={
arr:['aaa','bbb','ccc'],
};
var app=new Vue({
delimiters: ['${', '}'],
el: '#app',
data: outData
})
</script>
</body>
</html>
