计算属性和监视属性实现姓名案例

凉沫serendipity

已于 2023-03-26 08:57:31 修改

阅读量104

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-02-16 22:24:37 首次发布

本文链接：https://blog.csdn.net/qq_50582468/article/details/129073290

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章对比了Vue.js中的computed属性和watch选项，指出computed用于计算缓存的属性，而watch可以执行更复杂的逻辑，包括异步操作。在处理数据绑定时，computed适合简单的依赖关系，而watch适用于需要深度监听或触发副作用的情况。同时，文章强调了函数的this指向问题，推荐在不同场景下使用普通函数或箭头函数来确保正确的上下文。

摘要由CSDN通过智能技术生成

一、computed和watch之间的区别：

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

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

两个重要的小原则：

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

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

计算属性

<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br><br>
        名:<input type="text" v-model="secondName"><br><br>
        <span>全名：{{fullname}}</span>
    </div> 
    <script text="text/javascript">
      const vm= new Vue({
           el: '#root',
           data: {
            firstName:"张",
            secondName:"三"
           },
       
           computed:{
            fullname(){
                    return this.firstName+" "+this.secondName 

            }
           }
         
       })
       

    </script>
    
</body>

监视属性

<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br><br>
        名:<input type="text" v-model="secondName"><br><br>
        <span>全名：{{fullname}}</span>
    </div> 
    <script text="text/javascript">
      const vm= new Vue({
           el: '#root',
           data: {
            firstName:"张",
            secondName:"三",
            fullname:'张'+"-"+"三"
           },
           watch:{
            firstName(value){
                this.fullname=value +"-"+this.secondName;
            },
            secondName(value){
                 this.fullname=this.firstName+"-"+value
            }
           }
         
       })
       

    </script>
    
</body>