Vue核心基础3：计算属性和监视属性

1 计算属性

这边以姓名案例，来介绍计算属性

    

        
        姓：

        名：

        全名：{{fullName}}

    
    

---

计算属性主要依靠它的返回值

 

2 监视属性

这边以天气案例，来介绍监视属性

    

        
今天天气很{{info}}
        切换天气

    
    

2.1 深度监视

            watch: {
                isHot: {
                    // immediate: false, // 初始化时如果为true,就是让handler调用一下
                    // handler什么时候调用呢？  -> 当isHot发生改变的时候
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了')
                        console.log(newValue, oldValue)
                    }
                },

                // 1. 监视多级结构中某个属性的变化
                 'numbers.a': function (newValue, oldValue) {
                     console.log('a被修改了')
                    console.log(newValue, oldValue)
                  },

                // 2. 监视多级结构中所有属性的变化
                numbers: {
                    deep: true,
                    handler() {
                        console.log('numbers被修改了')
                    }
                }
            }

2.2 简写形式

            watch: {
                // 1.   完整写法
                isHot: {
                    immediate: false, // 初始化时如果为true,就是让handler调用一下
                    deep: true,  // 深度监视

                    // handler什么时候调用呢？  -> 当isHot发生改变的时候
                    handler(newValue, oldValue) {
                        console.log('isHot被修改了')
                        console.log(newValue, oldValue)
                    }
                },


                // 2. 简写
                isHot(newValue, oldValue) {
                    console.log('isHot被修改了')
                    console.log(newValue, oldValue)
                }

            }

2.3 使用监视属性实现姓名案例

    

        
        姓：

        名：

        全名：{{fullName}}

    
    

---

 

3 computed 和 watch 的比较