Vue.js中计算属性、方法和侦听器的用法_计算属性和侦听器的用法是什么-CSDN博客

本文链接：https://blog.csdn.net/qq_44050737/article/details/104333658

Vue.js中计算属性、方法和侦听器的用法

在写博客之前再做一个自我介绍，本人是一个初入IT行业的大专实习生，写博客的原因就是记录所学技术和吐槽公司，在公司里主要做Android部分的开发，悄悄说一声，整个公司就是本人（狗子）一人在Android方面独当一面，虽然我只是个实习生。
今天分享一下我学习Vue.js对于计算属性、方法和侦听器这三个的用法和不同之处

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Vue的计算属性、方法和侦听器</title>
 //导入vue.js的官方库
 <script src="vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
 var vm=new Vue({
     el:'#app',
     data:{
         firstName:'dog zi',
         lastName:'two',
     }
 })
</script>
</body>
</html>

在这些代码中，可以看到我在vue实例中定义了firstname和lastname，现在我想做的是把他们俩拼成全名，灵机一动，可以直接拼接，这样不好。比如在lastName后面再加一句：

allName:'two dog zi'

这不是脑子有病吗，那还定义firtstName和lastName干什么，还增加代码冗余

计算属性：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'dog zi',
            lastName: 'two',
           
        },
        //计算属性
        computed: {
            allName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        }
    })
</script>

对，在computed里面写一个函数即可。

方法：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'dog zi',
            lastName: 'two',
     
        },
        //方法
        methods: {
            allName: function () {
                return this.firstName + ' ' + this.lastName;
            }
        },
    })
</script>

这个就是方法，在这里也许就能看出来计算属性和方法的用法不一样，计算属性是在computed里写一个函数，而方法是在methods里面写的

侦听器：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'dog zi',
            lastName: 'two',
            allName: 'two dog zi'
        },
        //侦听器
        watch: {
            firstName: function () {
                this.allName = this.firstName + " " + this.lastName;
            },
            lastName: function () {
                this.allName = this.firstName + " " + this.lastName;
            }
        }
    })
</script>

侦听器就是在watch里面对data的每一个数据进行侦听，如果有一个改变就运行一次，可以看出这样写的代码很繁琐。

相同之处：

他们三个都可以通过代码得到想要的结果

不同之处：

计算属性和侦听器是有缓存机制的，什么叫缓存机制，就是代码运行一次就保存数据，第二次如果是相同的就不会再运行，而是直接使用缓存的数据，这样的好处就是可以提高代码运行的速度，不过这种速度人是不怎会体会到的
而方法不同，方法就是每次都会重新运行一次，等于刷新一遍。
所以在写代码时当选择计算属性和方法还有侦听器时肯定首选计算属性了

在最后，本人要多讲一下：希望大家少喷，轻喷，不喷是不可能的，因为太阳都做不到所有人都喜欢它，更别说我是个帅小伙了。