vue监听器watch & 计算属性computed

侦听器watch

vue中watch是用来监听vue实例中的数据变化

watch监听时有几个属性：

• handle：其值是一个回调函数，就是监听对象对话的时候需要执行的函数
• deep：其值true 或者 false，是否深度监听（一般监听是不能监听到对象属性值变化的，数组除外）
• immediate：其值 true 或者 false，是否以当前的初始值执行handle函数（当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。）。

监听基本类型数据

<script>
export default {
    name: "jianting",
    data() {
        return {
            msg: "1223"
        };
    },
    watch: {
        msg: function(newVal, oldVal) {
            // TO DO
            console.log("newVal:", newVal);
            console.log("oldVal:", oldVal);
        }
    },
    methods: {
        stringClick() {
            this.msg = Math.random() * 100;
        }
    }
};
</script>

监听对象

<script>
export default {
    name: "jianting",
    data() {
        return {
            obj: {
                name: "Tony",
                age: 50,
                children: [
                    {
                        name: "小明",
                        age: 12
                    },
                    {
                        name: "小花",
                        age: 5
                    }
                ]
            }
        };
    },
    watch: {
        obj: {
            handler: function(newVal, oldVal) {
                // TO DO
                console.log("newVal:", newVal);
                console.log("oldVal:", oldVal);
            },
            deep: true,
            immediate: true
        },
        "obj.name": function(newVal, oldVal) {
            // TO DO
            console.log("newVal obj.name:", newVal);
            console.log("oldVal obj.name:", oldVal);
        }
    },
    methods: {
        click() {
            this.obj.name = "未知";
        }
    }
};
</script>

• deep: watch监听对象的时候，需要加deep:true，只有这样才能深入底层去实时监听，不加对象是监听不到变化的,
• immediate: 添加immediate时会在侦听开始之后被立即调用

监听路由

方法一：

 watch: {
     //$route.path == this.$route.path
     '$route.path': function(newVal,oldVal){
         if(newVal === '/login'){
             console.log('欢迎进入login')
         }else if(newVal === '/register'){
             console.log('欢迎进入register')
         }
     }
 }

方法二：

// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},

计算属性computed

computed:{
    //完整写法
    fullName:{
        get(){
            return this.firstName + '-' + this.lastName
        },
        set(value){
            let arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
    //简写
    fullName(){
        console.log('get被调用了')
        return this.firstName + '-' + this.lastName
    }
}

简写形式相当于只调用了get函数

computed和watch之间的区别

1. computed能完成的功能，watch都可以完成。
2. watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作。
3. watch只能侦听data中存在的属性；computed可以定义data中不存在的属性，该属性也会出现在vue实例中供使用，就跟定义在data中一样

两个重要的小原则：

• 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
• 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。