监听 watch computed

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

1.引入库

代码如下（示例）：

 const vm = new Vue({
            el: '#app',
            data: {
                firstName: '',
                endName: '',
                // name: '',
                obj: {
                    name: 'zs'
                }
            },
            // 监听data中属性的改变：
            watch: {
                // firstName(val) {
                //     console.log(val);
                //     this.name = this.firstName + '-' + this.endName
                // },
                // endName(val) {
                //     console.log(val);
                //     this.name = this.firstName + '-' + this.endName
                // }
                obj: {
                    handler(val) {
                        console.log(val);
                    },
                    deep: true
                },
                firstName: {
                    handler(newVal, oldVal) {
                        console.log(newVal);
                        console.log(oldVal);
                    },
                    // 立即执行监听
                    immediate: true,
                    // 深度监听
                    deep: true
                }
            },
            computed: {
                // The computed property "name" is already defined in data.
                // 计算属性中的属性不能再data中定义
                // name() {
                //     // console.log('执行了');
                //     return this.firstName + '-' + this.endName
                //     // return  11
                // },
                name: {
                    get() {
                        return this.firstName + '-' + this.endName
                    },

                    set(val) {
                        console.log(val);
                        console.log(val.split('-'));
                        this.firstName = val.split('-')[0]
                        this.endName = val.split('-')[1]
                    }
                }
            },
            methods: {
                changeObj() {
                    this.obj.name = 'ls'
                    // console.log(this.obj.name);
                }
                // add() {
                //     this.name = this.firstName + '-' + this.endName
                // }
            },
            // mounted() {
            //     this.name = this.firstName + '-' + this.endName
            // },

            // beforeUpdate() {
            //     this.name = this.firstName + '-' + this.endName
            // }
            // updated() {
            //     this.name = this.firstName + '-' + this.endName
            // }
        })