Vue之computed（计算属性） VS watch（监视属性）

1. computed能完成的功能，watch都可以完成
2. watch可以完成的功能，computed不一定完成，例如：watch可以进行异步操作

两个重要原则：

1. 被Vue直接管理的函数，最好写成普通函数，这样this的指向才是vm本身
2. 不被Vue管理的函数（定时器、ajax等回调函数），最好写成箭头函数，这样this才可以指向vm

<div id="root">
        姓：<input type="text" v-model="firstName"><br><br>
        名：<input type="text" v-model="lastName"><br><br>
        全名:<span>{{fullName}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:"#root",
            data:{
                firstName:"旋涡",
                lastName:"鸣人",
                fullName:"旋涡鸣人"
            },
            methods:{
                
            },
            //计算属性是靠返回值的
            // computed:{
            //     fullName:{
            //         get(){
            //             return this.firstName+this.lastName;
            //         }
            //     }
            // },
            watch:{
                //完整写法,如果面临异步需求的话，那么就需要使用watch监视
                firstName:{
                    handler(newValue){
                        setTimeout(() => {
                            this.fullName = newValue+this.lastName;
                        }, 1000);
                    }
                },
                //简写
                lastName(newValue){
                    setTimeout(() => {
                        this.fullName = this.firstName+newValue;
                    }, 1000);
                    //这里必须写出箭头函数，如此，this会指向lastName函数，lastName又属于Vue，最终this指向vue
                    //如果这里写的是普通函数，那么this会指向window。

                }
            }
        })
    </script>

注意如果采取计算属性的方法，那么就需要将data里的fullName注释掉。
如果采取watch监视方法，则需要将watch注释掉，还原computed即可。