11-Vue核心-计算属性 vs 监视属性

计算属性（computed） vs 监视属性（watch）

1) computed 能完成的功能，watch 都可以完成

2) watch 能完成的功能，computed 不一定能完成。例如 watch 可以进行异步操作。

 

两个重要的原则

1) 所有被 Vue 管理的函数，最好写成通函数，这样 this 的指向才是 vm 或 组件实例对象

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

 

分别使用计算属性和监视属性，实现姓名案例

1.使用计算属性实现姓名案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>计算属性实现姓名案例</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
            名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>

            <!--使用计算属性实现-->
            姓名全称：<span>{{fullName}}</span><br/>
        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false;

             const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        firstname:"任",
                        lastname:"先生"
                    }
                },
                // 计算属性：要用的属性不存在，需要通过已有属性计算得来
                computed:{
                    // 计算属性的简写写法(默认没有set方法)
                    fullName(){
                        console.log("@---正在调用get()方法...")
                        return this.firstname + "-" + this.lastname;
                    }
                }
            })
        </script>
    </body>
</html>

2.使用监视属性实现姓名案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>监视属性实现姓名案例</title>
        <!--  引入Vue  -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--  准备好一个容器  -->
        <div id="root">
            姓：<input type="text" v-model:value="firstname" placeholder="请输入您的姓"><br/>
            名：<input type="text" v-model:value="lastname" placeholder="请输入您的名"><br/><br/>

            <!--使用计算属性实现-->
            姓名全称：<span>{{fullname2}}</span><br/>
        </div>

        <script type="text/javascript">
            // 阻止 vue 在启动时生成生产提示
            Vue.config.productionTip = false;

             const vm = new Vue({
                el:"#root",
                data(){
                    return{
                        firstname:"任",
                        lastname:"先生",
                        fullname2:"任-先生"
                    }
                },
                // 监视属性：当被监视的属性发生变化时，handle()回调函数自动调用
                watch:{
                    // 监视属性的简写写法（除了handler之外，没有其他的配置项了）
                    firstname(newValue,oldValue){
                        // this.fullname2 = newValue + "-" + this.lastname
                        // setTimeout定时器（异步操作），间隔一秒再实现相应操作
                        setTimeout(() => {return this.fullname2 = newValue + "-" + this.lastname},1000)
                    },
                    lastname(newValue,oldValue){
                        this.fullname2 = this.firstname + "-" + newValue
                    },
                }
            })
        </script>
    </body>
</html>

 

posted @ 2023-09-18 15:33  马铃薯1  阅读(18)  评论(0)    收藏  举报