watch、computed和methods对比

最新推荐文章于 2024-08-19 18:25:12 发布

佛系小菜鸡

最新推荐文章于 2024-08-19 18:25:12 发布

阅读量152

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_40224261/article/details/104425025

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

watch

通过watch 来监视data中的特定数据的变化，一旦数据发生变化，则调用function函数
代码示例：

 // 通过wath监视data数据的变化，一旦变化就出发function，function的第一个参数为新数据，第二个参数为老数据
        watch: {
        	//firstName为data中的数据
            firstName:function(newVal,oldVal){
                console.log(newV+"----"+oldV);
                this.fullName=this.firstName+this.lastName
            }
        },

computed

在computed中，可以定义一些属性，这些属性叫做【计算属性】，计算属性的本质是一个方法，但是我们在使用这些计算属性的时候，是把它们的名称直接当做属性来使用过的，并不会把计算属性当做方法去调用，主要用于一些简单运算。

注意：

计算属性在引用的时候，一定不要加（）去调用，注解当做普通的属性去使用就好
只要计算属性这个function内部，所有用到的任何data中的数据发生了变化，就会重新计算这个计算属性的值
计算属性的求值结果，会被缓存起来，方便下次直接使用，如果计算属性方法中的数据没有发生变化，则不会重新对计算属性求值

代码示例：



<body>
    <div id ="app">
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <input type="text" v-model="fullName">
        <p>{{fullName}}</p>
    </div>

    <script>
     var vm = new Vue({
        el: '#app',
        data: {
            firstName:"",
            lastName:"",
        },
        methods: {
        },
        computed: {

            fullName:function(){
                // 使用计算属性一定要有return
               return this.firstName+this.lastName
            }
        }
     });
    </script>
</body>