computed与methods、watch的区别

最新推荐文章于 2023-06-20 19:47:58 发布

夏目-Moon

最新推荐文章于 2023-06-20 19:47:58 发布

阅读量399

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_40692642/article/details/122823181

版权

参考地址1
参考地址2
一、computed与methods的异同
computed存在缓存机制验证，只在相关响应式依赖发生改变时它们才会重新求值。
methods每当触发重新渲染时，每次调用方法总会重新执行函数。

1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7 </head>
 8 
 9 <body>
10     <div id="div1">
11         <p>{{getName()}}</p>
12         <p>{{getName()}}</p>
13         <p>{{getName()}}</p>
14         <p>{{getName()}}</p>
15 
16         <p>{{name}}</p>
17         <p>{{name}}</p>
18         <p>{{name}}</p>
19         <p>{{name}}</p>
20     </div>
21 </body>
22 <script src="../js/vue.js"></script>
23 <script>
24     const app = new Vue({
25         el: '#div1',
26         data: {
27             message: "hello vue!"
28         },
29         methods: {
30             getName() {
31                 console.log("methods方法被调用了")
32                 return "kelvin"
33             }
34         },
35         computed: {
36             name() {
37                 console.log("computed计算属性被调用了");
38                 return "mary"
39             }
40         },
41     });
42 </script>
45 </html>

计算结果

二、computed和watch
在computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。
计算是通过变量计算来得出数据。而观察是观察一个特定的值，根据被观察者的变动进行相应的变化。
当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的。

夏目-Moon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
computed与methods、watch的区别

参考地址1参考地址2一、computed与methods的异同computed存在缓存机制验证，只在相关响应式依赖发生改变时它们才会重新求值。methods每当触发重新渲染时，每次调用方法总会重新执行函数。1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7
复制链接

扫一扫