1. 方法總和methods內的函式如何觸發？

機制：methods內的函式和普通的函式沒有區別。

觸發：methods內的函式執行的時候，才能觸發；

注意：當頁面渲染的時候，也會執行下面程式碼中的methodsN函式；methods內的函式命名不能與data中的屬性重名。

下面例項中的methodsName屬性會新增到Vue例項的vm中，和methods一個級別

下面例子中，當點選時執行一次clickme函式：

觸發方式：點選執行

 <div id="demo">
       <button @click="clickme">click me</button>
       <p>{{time}}</p>
</div>
var vm = new({
    data: {
        time: ''
    },
    methods: {
         clickme(){
          console.log("methods")
           this.time = Date();
         }
    },
 
})
 

 

結果： 

2. 計算屬性computed內的函式如何觸發？

機制：{{函式名}} <---return <--- 值   

觸發：當值發生變化的時候，頁面中的{{函式名}}也發生變化，就會觸發該函式

注意：return 會將函式名 返回到和computed一個級別，這樣函式名就是Vue例項vm的屬性，所以才能在標籤中使用該屬性

有快取，所以該值不變下的頁面渲染不會觸發該函式

3. 偵聽器watch內的函式如何觸發？

機制：watch內的函式名  ===  data中的屬性名

觸發：

注意：有快取，所以該值不變下的頁面渲染不會觸發該函式；但程式碼複雜

    <div id="demo">
        <div>{{methodsN()}}執行methods內的methodsN：{{methodsName}}</div>
        <div>觸發computed內的computedName：{{computedName}} {{age}}</div>
        <div>firstName的值：{{firstName}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#demo', 
            data: {
                firstName: 'yuzhu',
                lastName: 'zhu',
                age: 22
            },
            methods: {
                //方法執行就會觸發，每次頁面渲染都會觸發函式
                methodsN: function(){
                    console.log("計算了methods")
                    //this.methodsName 可以通過函式給vm物件新增methodsName屬性
                    this.methodsName = this.firstName + this.lastName;
                }
            },
            computed: {
                //computed：計算屬性，前提是：Vue的html標籤中使用computed自定義的方法
                //同時，要使用return。
                // {{函式名}}  <---return   <--- 值 當值發生變化的時候，{{函式名}}對應變化
                
                computedName: function(){
                    console.log("計算了computed")
                    return this.firstName + ' ' + this.lastName //computedName屬性也新增到vm物件上
                }
            },
            watch: {
                //watch：監聽的是屬性firstName的變化，即watch中的函式名 === data中的屬性名
                //當firstName發生改變時，觸發firstName這個函式
                firstName: function(){
                    console.log("計算了watch")
                }
            }
        })
    </script>
 

結果：頁面重新整理的時候觸發了methods中的methodsN 和 computed中的computedName，而watch中的firstName沒有觸發

原因：

（1）methodsN在標籤中執行，每次頁面重新整理都會執行，每次渲染頁面都會觸發，哪怕是上述例子中age值的改變，也會重排渲染頁面，觸發methodsN函式

（2）computedName在頁面重新整理的時候觸發，因為Vue例項vm中本來沒有computedName屬性，也就是該值為undefined，當頁面重新整理的時候，該值改變，就會觸發computedName函式；而age值的改變不會觸發computedName，因為有快取，只有當computedName值發生改變時，才會觸發該函式。

（3）firstName函式沒有觸發，因為該值沒有改變。

二、深入理解computed

內部函式可以寫成物件形式，該物件內有get、set方法（系統自帶），為什麼還可以直接使用fullName呢？？？

     <div id="demo">{{fullName}}</div>
     <script>
         var vm = new Vue({
             el: '#demo',
             data: {
                 firstName: 1,
                 lastName: 2,
             },
             computed: {
                 fullName: {
                     get: function(){
                         return this.firstName + " " + this.lastName
                     },
                     set: function(value){
                         var arr = value.split(" ");
                         this.firstName = arr[0];
                         this.lastName = arr[1];
                     }
                 }
             }
         })
     </script>

控制檯的操作：