vue的计算属性computed和监视属性watch的区别

总结：

计算属性computed：

1.定义：要用的属性不存在，要通过已有属性计算得来。

2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3.get函数什么时候执行？

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

监视属性watch：

1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作

2.监视的属性必须存在，才能进行监视！！

3.监视的两种写法：

(1).new Vue时传入watch配置

(2).通过vm.$watch监视

　　　　4.深度监视：

(1).Vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注：

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！

(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。
2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或组件实例对象。

一，用计算属性完成姓名案例

 1 <body>
 2 <!-- 
 3             当确定只需要进行展示数据时，可以简写，无需写set
 4          -->
 5     <div id="root">
 6         <input type="text" v-model="firstName"><br><br>
 7         <input type="text" v-model="lastName"><br><br>
 8         <span>全名：{{fullName}}</span>
 9 
10     </div>
11 
12     <script type="text/javascript" >
13         Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
14         const vm = new Vue({
15             el:'#root',
16             data:{
17                firstName:'张',
18                lastName:'三' 
19             },
20             computed:{
21                /*  fullName:{
22                    
23                     get(){
24                     return this.firstName +'-'+this.lastName;
25                     },
26                     set(value){
27                         const arr = value.split('-');
28                         this.firstName = arr[0];
29                         this.lastName = arr[1];
30                     }
31                 } */
32                 fullName(){
33                     return this.firstName +'-'+this.lastName;
34                 }
35                
36             }
37         })       
38     </script>
39 </body>

二，用监视属性完成姓名案例

<body>

    <div id="root">
        <input type="text" v-model="firstName"><br><br>
        <input type="text" v-model="lastName"><br><br>
        <span>全名：{{fullName}}</span>

    </div>

    <script type="text/javascript" >
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el:'#root',
            data:{
               firstName:'张',
               lastName:'三', 
               fullName:'张-三'
            },
            computed:{
              
            },

            watch:{
               /*  firstName:{
                    handler(newValue,oldnewValue){
                        this.fullName = newValue + '-'+this.lastName;
                    }
                }
                 */
                firstName(newValue){
                    this.fullName = newValue + '-'+this.lastName;

                },
                lastName(newValue){
                    this.fullName = this.firstName  + '-' + newValue;
                }
            }

        })       
    </script>
</body>