前言

本文不是Vue.js的教程，只是一邊看官網Vue的教程文件一邊記錄並總結學習過程中遇到的一些問題和思考的筆記。

1、vue和avalon一樣，都不支援VM初始時不存在的屬性

而在Angular裡是可以支援的，因為angular採用髒檢查的方式實現雙向繫結，vue和avalon都是採用setter和getter實現雙向繫結

例，如下程式碼在一秒後不會顯示出“xxcanghai”的字樣

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{}
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//無效
   },1000);
</script>
 

若給定初始值，則可生效，如下：

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{
               text:"default Text" //給定初始值
           }
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//有效
   },1000);
</script>
 

不過Vue其中比avalon好的一點是，Vue在只是對初始化時不存在的屬性賦值無效，但顯示是不會報錯的。而avalon則根本無法顯示，對於上述第一段程式碼執行都會報錯（不知道最新的avalon是否修改此問題）

好在vue中提供了$set方法來解決這種賦值失敗的問題，如下：

<div i<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj: {}
       }
   });
   setTimeout(function() {
       v.$set("obj.text", "xxcanghai");//有效
   }, 1000);
</script>
 

雖然這種採用字串來表示變數名的方式會導致無法使用強型別的預編譯檢查（TypeScript），但也至少算能解決問題吧。

2、input元素中屬性與v-model同時存在在以屬性為優先

如下程式碼：當文字框中的value屬性與v-model衝突時會以input的value屬性為優先，並覆蓋v-model的屬性
最終console.log輸出的也是“inputText”

<div id="app">
   <input type="text" v-model="a" value="inputText">
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           a: "vueText"
       }
   });
   console.log(v.a);//inputText
</script>

對於複選框型別的input上述結論也同樣適用，如下：

<div id="app">
   <input type="checkbox" v-model="isCheck" checked>
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           isCheck: false
       }
   });
   console.log(v.isCheck);//true
</script>

複選框的v-model設定為false不選中，同時設定checked屬性選中，最終效果為以checked屬性優先，複選框被選中，同時v.isCheck屬性被改寫為true。

3、VM中的函式放到data屬性和methods屬性中的區別，以及函式呼叫時帶括號與不帶括號的區別

1. Vue在例項化的時候有一個特殊的屬性即methods，我看官方文件中把所有VM中的函式都放到methods屬性裡面，經測試把函式寫在data和methods中都可以正常執行，那麼兩者有何區別？
2. 通過官方demo可知，在繫結函式的時候可以帶括號也可以不帶括號，對於有引數的函式那必須帶括號呼叫，但是對於無參函式帶括號呼叫與不帶括號呼叫的區別是什麼？
   以下測試：

<div id="app">
    <button @click="dataFn">1.dataFn</button> 
    <!--輸出：<button>,[MouseEvent]-->
    
    <button @click="dataFn()">2.dataFn()</button> 
    <!--輸出：Vue,[]-->
    
    <button @click="methodsFn">3.methodsFn</button> 
    <!--輸出：Vue,[MouseEvent]-->
    
    <button @click="methodsFn()">4.methodsFn()</button> 
    <!--輸出：Vue,[]-->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dataFn: function() {
                console.log(this,arguments);
            }
        },
        methods: {
            methodsFn: function() {
                console.log(this,arguments);
            }
        }
    });
    //[email protected]部落格園
</script>

通過上述程式碼對比可以得到以下結論：

1. 若想要在事件響應函式中獲得Event物件，那麼事件繫結時不能加括號，參見上述1、3示例。
2. 若想在函式中this指向Vue例項化物件，函式呼叫時應當加括號。同時，所有在methods屬性中的函式，無論如何呼叫，this都指向當前Vue例項化物件。
3. 遂最終結論為：應當把所有VM中的函式都放在methods中，同時對於事件的繫結應當使用無括號方式。即上述示例3中為最優方案。

PS：當然你也可以使用vue內建的$event來顯示的傳遞event物件，以保證函式寫在任何位置都可以正常使用this和event。

<div id="app">
    <button @click="dataFn($event)">5.dataFn($event)</button> 
    <!--輸出：Vue,[MouseEvent]-->
    
    <button @click="methodsFn($event)">6.methodsFn($event)</button> 
    <!--輸出：Vue,[MouseEvent]-->
</div>

相關筆記