<body>
<script src="../libs/vue.js"></script>
<div id="app">
? ? <!--可讀性不強-->
? ? {{message.split("").reverse().join("")}}
? ? <br>
? ? <!--每次都需要計算-->
? ? {{reverseMessage()}}
? ? {{reverseMessage()}}
? ? <br>
? ? <!--響應(yīng)式依賴進行緩存-->
? ? {{reverseMsg}}
? ? {{reverseMsg}}
? ? <br>
? ? {{calculate}}
? ? {{getFullName}}
? ? {{getFullName = 'Alice Xiaosu'}}
</div>
<script>
? ? new Vue({
? ? ? ? el: '#app',
? ? ? ? data: {
? ? ? ? ? ? message: 'Hello Vue.js',
? ? ? ? ? ? array: [1, 3, 4, 6, 7, 10, 3, 5]
? ? ? ? },
? ? ? ? computed: {
? ? ? ? ? ? reverseMsg() {
? ? ? ? ? ? ? ? console.log('=====reverseMsg=====')
? ? ? ? ? ? ? ? return this.message.split('').reverse().join('')
? ? ? ? ? ? },
? ? ? ? ? ? calculate() {
? ? ? ? ? ? ? ? var list = this.array.filter((item) => {
? ? ? ? ? ? ? ? ? ? return item % 2 === 0
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? return list
? ? ? ? ? ? },
? ? ? ? ? ? getFullName: {
? ? ? ? ? ? ? ? //getter
? ? ? ? ? ? ? ? get() {
? ? ? ? ? ? ? ? ? ? return this.firstName + this.lastName;
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? //setter
? ? ? ? ? ? ? ? set(val) {
? ? ? ? ? ? ? ? ? ? //Alice Xiaosu
? ? ? ? ? ? ? ? ? ? //分割
? ? ? ? ? ? ? ? ? ? var value = val.split(' ')
? ? ? ? ? ? ? ? ? ? this.firstName = value[0];
? ? ? ? ? ? ? ? ? ? this.lastName = value[1];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? /*方法寫在methods*/
? ? ? ? ? ? reverseMessage() {
? ? ? ? ? ? ? ? console.log("=====reverseMessage=====")
? ? ? ? ? ? ? ? //methods里拿data的數(shù)據(jù)
? ? ? ? ? ? ? ? /*
? ? ? ? ? ? ? ? * item 數(shù)組里的數(shù)據(jù)
? ? ? ? ? ? ? ? * index 索引
? ? ? ? ? ? ? ? * data 數(shù)據(jù)源
? ? ? ? ? ? ? ? * */
? ? ? ? ? ? ? ? // return 如果是true? 放到數(shù)組里， false? 從數(shù)組里移除
? ? ? ? ? ? ? ? const result = this.array.filter((item, index, data) => {
? ? ? ? ? ? ? ? ? ? console.log(item)
? ? ? ? ? ? ? ? ? ? console.log(index)
? ? ? ? ? ? ? ? ? ? console.log(data)
? ? ? ? ? ? ? ? ? ? return item >= 5
? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? console.log('array', this.array)
? ? ? ? ? ? ? ? console.log('result', result)
? ? ? ? ? ? ? ? this.array.filter((item) =>
? ? ? ? ? ? ? ? ? ? item >= 5
? ? ? ? ? ? ? ? )
? ? ? ? ? ? ? ? return this.message.split('').reverse().join('')
? ? ? ? ? ? }
? ? ? ? },
? ? })
</script>
</body>
點擊偵聽器屬性
計算和方法的區(qū)別：
我們可以將同一函數(shù)定義為一個方法而不是一個計算屬性。兩種方式的最終結(jié)果確實是完全相同的。然而，不同的是計算屬性是基于它們的響應(yīng)式依賴進行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。
