问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue data数据改变methods方法自动调用

头像
半忆
    2011124
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   
    <div id="app"></div>
    <script type="text/javascript">
         var app = Vue.createApp({
             data(){
                 return {
                     message:'bilibili',
                     count:0,
                     price:25
                 }
             },
             methods:{
                    getCount(){

                        console.log(this.count);
                        return this.count;
                    },
                    getTotal(){
                        console.log("zhixingle")
                        this.count ++;
                      //   console.log(this.count)
                        return (this.count) ;
                    }
             },
             computed:{
                total(){
                    return this.price * this.count;
                },

             },
             template:`<h2>message</h2>
                       <h2>字面量运算所得total:{{price * count}}</h2>
                       <h2>计算属性所得total:{{total}}</h2>
                       <h2>methods方法计算所的：{{getTotal()}}</h2>`
         })
         const vm =app.mount("#app")
    </script>
</body>
</html>


    在template模板里面调用 methods 里面的方法getTotal,getTotal方法修改了data中的数据count，methods里面的getTotal 方法会调用102次？疑惑？？？

    vue.js
    阅读 4k
    1 个回答
    得票最新
    头像
    linong
      29.2k1368137
      ✓ 已被采纳

      算特性吧。因为你在 getTotal 里面又执行了，所以导致整个模版渲染了，至于为啥是102，估计是有限制的吧，但是我很好奇为啥没报错，懒得去看源码实现了。

      给你改个 setTimeout 的方法吧，就永动机了。 http://jsrun.net/U8VKp/edit

      <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
   
    <div id="app"></div>
    <script type="text/javascript">
         var app = Vue.createApp({
             data(){
                 return {
                     message:'bilibili',
                     count:0,
                     countA:0,
                     price:25
                 }
             },
             methods:{
                    getCount(){

                        console.log(this.count);
                        return this.count;
                    },
                    getTotal(){
                        console.log("zhixingle")
                        setTimeout(v=>{
                            this.countA ++;
                        }, 10)
                      //   console.log(this.count)
                        return (this.countA) ;
                    }
             },
             computed:{
                total(){
                    return this.price * this.count;
                },

             },
             template:`<h2>message</h2>
                       <h2>字面量运算所得total:{{price * count}}</h2>
                       <h2>计算属性所得total:{{total}}</h2>
                       <h2>methods方法计算所的：{{getTotal()}}</h2>`
         })
         const vm =app.mount("#app")
    </script>
</body>
</html>

      image.png

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题