Vue 监听

计算属性和侦听器

如果一个属性是依赖于其他属性变化的 使用 computed 计算属性

• watch 监视属性 当属性发生变化时触发 必须在 data 中已经声明(可以异步操作)
  • 写成函数 相当于直接调用 handler 函数
  • 写成对象 只有当监视的属性值发生改变时,handler 函数才会执行,可以设置属性; 添加 immediate:true 属性, 可以立即执行handler 函数; deep:true 属性,深层次监控
• computed 计算属性 不能在 data 中声明过 每一个计算属性都有 get,set 方法(不能异步操作) 依赖属性发生改变 则计算属性发生改变，若没有改变 则直接从缓存中读取之前的值，不会重新渲染。
  • 写成函数 相当于调用 get 方法获取值
  • 写成对象

<script>
let vm = new Vue({
    el: '#app',
    data: {
        // 当 firstName lastName 发生改变时，fullName 的值也跟着更改
        firstName:'FOO',
        lastName: 'Bar',
        // fullName: 'FOO Bar',
    },
    watch: {//监视属性 可以异步操作
        // 函数写法 相当于调用 handler 函数(自带)
        firstName(newVal, oldVal) {
            this.fullName = newVal + this.lastName;
        },
        lastName(newVal, oldVal) {
            this.fullName = this.firstName + newVal
        },
        // 对象写法 
        firstName: {
            handler(newVal,oldVal) { //只有当监视的函数值发生改变时，handler 函数才会执行
                this.fullName = newVal.name + this.lastName;
                console.log('log')
            },
            immediate:true, // 立即执行 handler 函数
            deep: true, // 深层监控 firstName: {name: {m:foo}},
        },
        lastName(newVal, oldVal) {
            this.fullName = this.firstName.name + newVal
        }
    },
    computed: { // 计算属性 不能在 data 里边声明过，每一个计算属性都有 get set 方法
        // 函数写法
        fullName() { // 相当于调用 get 方法获取值 
            // firstNmae lastName 表示 fullName 的依赖属性 依赖属性发生改变 fullName 发生改变，若没有改变 则直接从缓存中读取之前的值，不会重新渲染。
            return this.firstName + this.lastName; 
        },
        // 对象写法
        fullName: {
            get() { // 先回自动调用 后期依赖值发生改变时，调用
                return this.firstName + this.lastName; 
            },
            set(val) { // 对计算属性设置值时调用，并且把设置的值自动保存到 val 中，这个值可以进行其他操作
                // vm.firstName = 'aaa'  //  val 保存 aaa
                console.log(val);
            }
        },
    },
})
</script>