Vue学习day03-计算属性和侦听器、computed vs watch

计算属性computed

1. 计算属性vcomputed
2. 计算属性具有缓冲属性，如果值未发生变化，则不重新渲染

<p>共有{{total}}</p>

computed: {
    total() {
        return this.courses.length + "门课程"
    }
},

侦听器watch

1. vwatcher指令快速生成watch
2. 只用被监听的值发生变化时，才会执行函数
3. 要想立即执行函数，需要添加参数，快捷指令为vwatcher-options

<p>共有{{totalCount}}</p>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        message1: '课程购物车',
        course: '',
        selectedCourse: '',
        courses: ['web课程','python课程','java课程'],
        totalCount:0
    },

默认监听器：

watch: {
    courses(newValue, oldValue) {
        //值发生变化才执行函数
        this.totalCount = newValue.length + '门课程'
    }
},

带参数的监听器：

watch: {
    courses: {
        immediate: true, //立即执行一次
        deep: true, //适用于JSON形式
        handler(newValue, oldValue) {
            this.totalCount = newValue.length + '门课程'
        }
    }
},

computed vs watch

1. 实际开发过程中能用computed就用computed
2. 计算属性具有缓冲性、简单